最近项目里面要做引导页,然后美工出图了,看到效果图的第一眼我觉得还是很容易的
我的第一个思路是用WindowManger
往里面丢View
就行了,第2个思路是使用Dialog
来实现。然后问了下Lite群里面,有大神Aite
推荐了2个库:
https://github.com/hongyangAndroid/Highlight
https://github.com/fredericojssilva/ShowTipsView
抱着试一试的态度,我去看了2个库;然后发现ShowTipsView
不就有我的想要的效果的么。
好吧,扯了那么久,终于要进入主题了(你他么真是啰嗦的啊)。
要实现这种相交区域高亮的效果,说实话以我作孽的智商是没有想出来的,不过还有大神的代码可以参考,让我们共同去了解其中的原理吧!!
// ShowTipsView
ShowTipsView showtips = new ShowTipsBuilder(this)
.setTarget(btn_two).setTitle("A magnific button")
.setDescription("This button do nothing very well")
.setDelay(1000)
.setBackgroundAlpha(128)
.setCloseButtonColor(Color.RED)
.setCloseButtonTextColor(Color.GREEN)
.build();
showtips.show(this);
这里看到构建ShowTipsView
使用的是Builder
模式,进去看下ShowTipsBuilder
的构造方法,里面调用了
public ShowTipsBuilder(Activity activity) {
this.showtipsView = new ShowTipsView(activity);
}
那么进去看ShowTipsView
public ShowTipsView(Context context) {
super(context);
init();
}
private void init() {
this.setVisibility(View.GONE);
this.setBackgroundColor(Color.TRANSPARENT);
this.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// DO NOTHING
// HACK TO BLOCK CLICKS
}
});
showTipsStore = new StoreUtils(getContext());
paint = new Paint();
bitmapPaint = new Paint();
circleline = new Paint();
transparentPaint = new Paint();
// it's very important,so highlight cool
porterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/*
* Draw circle and transparency background
*/
/*
* Since bitmap needs the canva's size, it wont be load at init()
* To prevent the DrawAllocation issue on low memory devices, the bitmap will be instantiate only when its null
*/
if (bitmap == null) {
bitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888);
temp = new Canvas(bitmap);
}
if (background_color != 0)
paint.setColor(background_color);
else
paint.setColor(Color.parseColor("#000000"));
paint.setAlpha(background_alpha);
temp.drawRect(0, 0, temp.getWidth(), temp.getHeight(), paint);
transparentPaint.setColor(getResources().getColor(android.R.color.transparent));
transparentPaint.setXfermode(porterDuffXfermode);
int x = showhintPoints.x;
int y = showhintPoints.y;
temp.drawCircle(x, y, radius + 200, transparentPaint);
canvas.drawBitmap(bitmap, 0, 0, bitmapPaint);
circleline.setStyle(Paint.Style.STROKE);
if (circleColor != 0)
circleline.setColor(circleColor);
else
circleline.setColor(Color.RED);
circleline.setAntiAlias(true);
circleline.setStrokeWidth(3);
// canvas.drawCircle(x, y, radius, circleline);
}
说下源码的思路吧:
- 先把当前的
View
也就是ShowTipsView
添加到Activity
的DecorView
里面去 - 根据一系列条件去生成需要的
showhintPoints
,具体逻辑请看代码 - 最主要的使用了
PorterDuff.Mode.CLEAR
,实现了高亮的效果;从onDraw
的源码可以看出,先生成一个bitmap
,在拿到他的Canvas
即是里面变量temp
,重要的是temp.drawCircle(x, y, radius, transparentPaint);
这里使用了CLEAR
,清除画布,如果吧这里注释掉之后就没有高亮的效果了;看了感觉原来原理还是很简单的啊!!!!
好了原理之后了,剩下的就是Enjoy yourself !!!