我刚刚在我的一个项目中实现了 Ted 的答案。伟大的!非常容易实现和漂亮的结果。非常感谢这个 Ted。
但由于 Stack Overflow 用于获取和分享,我想分享我对自定义视图的实现,该视图以“针”的形式创建箭头,我使用 Ted 的方法来完成原始答案。代码如下:
package com.yourpackage;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.view.View;
import de.nantoka.miep.R;
public class CoachmarkArrow extends View {
private static final float CIRCLE_RADIUS = 1.5f;
private static final int TOPLEFT = 0;
private static final int TOPRIGHT = 1;
private static final int BOTTOMLEFT = 2;
private static final int BOTTOMRIGHT = 3;
Paint paint;
int from, to;
PointF padding = new PointF();
PointF fromPoint = new PointF();
PointF toPoint = new PointF();
public CoachmarkArrow (Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CoachmarkArrow, 0, 0);
getPaint(a);
getFromTo(a);
a.recycle();
}
private void getFromTo(TypedArray a) {
from = a.getInt(R.styleable.CoachmarkArrow_from, BOTTOMLEFT);
to = a.getInt(R.styleable.CoachmarkArrow_to, TOPLEFT);
}
private void getPaint(TypedArray a) {
paint = new Paint();
paint.setColor(a.getColor(R.styleable.CoachmarkArrow_color, Color.WHITE));
paint.setStrokeWidth(a.getDimensionPixelSize(R.styleable.CoachmarkArrow_size, 0));
paint.setStrokeCap(Paint.Cap.BUTT);
paint.setAntiAlias(true);
}
@Override
protected void onDraw (Canvas canvas){
calculatePadding(canvas);
calculateLinePoints();
drawLine(canvas, fromPoint, toPoint);
drawCircle(canvas, fromPoint);
}
private void calculateLinePoints() {
fromPoint = getPoint(from);
toPoint = getPoint(to);
}
private void calculatePadding(Canvas canvas) {
padding.x = CIRCLE_RADIUS * paint.getStrokeWidth() / canvas.getWidth();
padding.y = CIRCLE_RADIUS * paint.getStrokeWidth() / canvas.getHeight();
}
private PointF getPoint(int position) {
PointF point = new PointF();
if (position == TOPRIGHT || position == BOTTOMRIGHT){
point.x = 1.0f - padding.x;
}
else {
point.x = padding.x;
}
if (position == BOTTOMLEFT || position == BOTTOMRIGHT){
point.y = 1.0f - padding.y;
}
else {
point.y = padding.y;
}
return point;
}
private void drawCircle(Canvas canvas, PointF fromPoint) {
canvas.drawCircle(
canvas.getWidth() * fromPoint.x,
canvas.getHeight() * fromPoint.y,
CIRCLE_RADIUS * paint.getStrokeWidth(),
paint
);
}
private void drawLine(Canvas canvas, PointF fromPoint, PointF toPoint) {
canvas.drawLine(
canvas.getWidth() * fromPoint.x,
canvas.getHeight() * fromPoint.y,
canvas.getWidth() * toPoint.x,
canvas.getHeight() * toPoint.y,
paint
);
}
}
将此类添加到您的项目中(任何包名都可以)并在 res/values 下为 XML 参数创建一个属性文件:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CoachmarkArrow">
<attr name="size" format="dimension" />
<attr name="color" format="color" />
<attr name="from" format="enum">
<enum name="topleft" value="0"/>
<enum name="topright" value="1"/>
<enum name="bottomleft" value="2"/>
<enum name="bottomright" value="3"/>
</attr>
<attr name="to" format="enum">
<enum name="topleft" value="0"/>
<enum name="topright" value="1"/>
<enum name="bottomleft" value="2"/>
<enum name="bottomright" value="3"/>
</attr>
</declare-styleable>
</resources>
现在,您可以像任何其他视图一样在 coachmarks 活动的 XML 布局中创建“针”,例如
<com.yourpackage.CoachmarkArrow
xmlns:coachmark="http://schemas.android.com/apk/res/com.yourproject"
android:layout_height="100dp"
android:layout_width="match_parent"
coachmark:size="3dip"
coachmark:color="@android:color/white"
coachmark:from="bottomright"
coachmark:to="topleft"
/>
创建一个“针”,其头部位于右下角,尖端位于矩形的左上角,该矩形高 100 dp,与包含的父 ViewGroup 一样宽。
这样您就可以创建自动适应不同屏幕尺寸的辅助标记。例如,如果您使用相对布局,请为您要在 coachmarks 活动中描述的 UI 元素创建一个虚拟视图,并告诉相对布局将教练标记放在虚拟视图下方但位于您居中的说明文本框上方在窗口的中间。这样,coachmark 会自动获得正确的大小,以从文本框指向 UI 元素。
希望这对某人有所帮助!