前言
Github上有不少高亮引导的库，比如下面的。但是觉得他们的功能太多，不够简单，跟项目需求不太符合。原本打算直接使用HightLight(效果比较符合需求)，但是发现issue上有不少bitmap的oom异常，以及停止更新维护了。所以自己尝试实现一下。
思路
看了好几篇文章，大体思路都是在DecorView上添加布局，在遮盖Activity的布局。HiGuide也不例外。
- 首先两个最关键的参数，Activity，需要高亮的View。Activity用来获取DecorView，高亮View用来计算高亮位置及区域。
- 获取Activity的DecorView，并把遮盖层布局GuideView添加进去，就可以实现遮挡效果。
- 在遮盖层GuideView(FrameLayout)内，根据高亮View在屏幕的位置(View.getLocationOnSrceen())，及高亮View的宽高，及配置的形状等参数，使用使用Path进行计算(Path.op()可以进行多个path进行层叠区域计算，跟Paint的Xfermode一样)，得到镂空的遮盖区域，在画布上绘制该Path就可以得到有高亮区域的遮盖层。
- 想要添加其他的提示布局，Textview或Imageview，或者其他Layout容器，在GuideView内add就可以了，注意配置边距参数以定位。
- 点击效果通常分两块，一块是背景层，也就是整个遮盖层，另外一个就是高亮区域。高亮区域，可以在使用View在屏幕的位置，及宽高，就可以创建一个RectF矩形区域，把所有的高亮View的RectF用List保存起来。在GuideView的onTouch中，计算，如果点击的坐标xy在某个高亮RectF矩形内，即为点击了高亮区域。
关键代码
- 添加遮盖层
mRootView = (ViewGroup) ((Activity) mContext).getWindow().getDecorView();
if (mRootView instanceof FrameLayout) {
ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT);
mRootView.addView(mGuideView, mRootView.getChildCount(), lp);
} else {
FrameLayout frameLayout = new FrameLayout(mContext);
ViewGroup parent = (ViewGroup) mRootView.getParent();
parent.removeView(mRootView);
parent.addView(frameLayout, mRootView.getLayoutParams());
ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
frameLayout.addView(mRootView, lp);
}
- 移除遮盖层
private void remove() {
ViewGroup parent = (ViewGroup) getParent();
if (parent instanceof RelativeLayout || parent instanceof FrameLayout) {
parent.removeView(this);
} else {
parent.removeView(this);
View origin = parent.getChildAt(0);
ViewGroup graParent = (ViewGroup) parent.getParent();
graParent.removeView(parent);
graParent.addView(origin, parent.getLayoutParams());
}
if (mRemoveCallback != null) {
mRemoveCallback.callback();
}
}
- 高亮区域绘制
@Override
protected void onDraw(Canvas canvas) {
mBgPath.reset();
mShapePath.reset();
mBgPath.addRect(0, 0, getWidth(), getHeight(), Path.Direction.CW);
for (HightLight hightLight : mOverlay.getHightLightList()) {
Path shapePath = calcHightLightShapePath(hightLight, mShapePath);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
mBgPath.op(shapePath, Path.Op.XOR);
}
}
canvas.drawPath(mBgPath, mPaint);
}
- 高亮形状计算
private Path calcHightLightShapePath(HightLight hightLight, Path shapePath) {
shapePath.reset();
switch (hightLight.getShape()) {
case HiGuide.SHAPE_CIRCLE:
shapePath.addCircle(hightLight.getRectF().centerX(),
hightLight.getRectF().centerY(),
hightLight.getRadius(), Path.Direction.CW);
break;
case HiGuide.SHAPE_OVAL:
shapePath.addOval(hightLight.getRectF(), Path.Direction.CW);
break;
case HiGuide.SHAPE_RECT:
shapePath.addRect(hightLight.getRectF(), Path.Direction.CW);
break;
default:
break;
}
return shapePath;
}
- 高亮区域点击
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP) {
//点击高亮
if (mOverlay.getOnClickHightLightListener() != null) {
float x = event.getX();
float y = event.getY();
for (RectF rectF : mOverlay.getHightLightAreas()) {
if (rectF.contains(x, y)) {
mOverlay.getOnClickHightLightListener().onClick(this);
remove();
return super.onTouchEvent(event); //点击高亮后不做其他的处理了，直接返回
}
}
}
//全局点击
if (mOverlay.getOnClickGuideViewListener() != null) {
mOverlay.getOnClickGuideViewListener().onClick(this);
}
if (mOverlay.isTouchDismiss()) {
remove();
}
}
return true;
}
- 添加提示布局
public void addTipsView(Tips tips) {
View tipsView = LayoutInflater.from(getContext()).inflate(tips.layoutRes, this, false);
LayoutParams lp = (LayoutParams) tipsView.getLayoutParams();
lp.leftMargin = tips.leftMargin;
lp.topMargin = tips.topMargin;
lp.rightMargin = tips.rightMargin;
lp.bottomMargin = tips.bottomMargin;
if (lp.rightMargin != 0) {
lp.gravity = Gravity.END;
} else {
lp.gravity = Gravity.START;
}
if (lp.bottomMargin != 0) {
lp.gravity |= Gravity.BOTTOM;
} else {
lp.gravity |= Gravity.TOP;
}
tipsView.setLayoutParams(lp);
addView(tipsView, lp);
}
效果
效果图
后记
因为之前看了一篇文章了解到使用Path进行自定义view绘制，而HightLight项目又是使用Bitmap，被不少issue都提到这个，所以打算使用Path替代Bitmap，这个功能并不复杂，按照思路实现就ok。
