其他分享
首页 > 其他分享> > 使用PorterDuffXfermode图片合成实现安卓新手引导

使用PorterDuffXfermode图片合成实现安卓新手引导

作者:互联网

一些APP需要新手引导功能,如下图所示: ![hollow1.png](http://upload-images.jianshu.io/upload_images/1896166-fc4ccaacd40404e7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 一个黑色半透明的浮层盖住页面的大部分,需要引导用户操作的地方突出显示。实现这种效果有两种思路: * 将要突出显示的地方做成图片,放到下层页面相同的位置,实现伪透明效果。这样的缺点是,如果图片较大或者是动画会占用空间,或者要突出的内容是可变的也不合适。 * 在View的onDraw()方法中绘图,在要突出显示的地方绘制透明区域。也许你会想,这很简单,先把黑色的浮层画出来,再在其中画透明的图形不就行了?事实上直接这么做是行不通的,透明图形会被下面的黑色的浮层“覆盖”,根本看不到。要实现透明效果需要将透明区域从黑色浮层中挖去。 ### 原理 实现挖去效果就需要使用PorterDuffXfermode图片合成技术,它将两张图片合称为一张,合成后的效果会突出或隐藏图片的一部分。 ![PorterDuffXfermode.jpg](http://upload-images.jianshu.io/upload_images/1896166-72e1b2810387ddbe.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) PorterDuffXfermode中的16种模式如上图所示。图中蓝色矩形是源图Src,黄色圆形是目标图Dst。源图和目标图并无差别,只需要知道**先画的是目标图,后画的是源图**就行了。 根据前面的需求,先画黑色浮层,然后画透明图形,并将透明图形挖去。也就是Dst是黑色浮层,Src是透明图形,Src挖去。满足这个条件的是上图的 *SrcOut* 模式。 ### 代码 这种镂空布局的实现如下: #### HollowLayout.java ```java public class HollowLayout extends FrameLayout { private static final int SHADOW_COLOR = 0xB3000000; private static final int HOLLOW_COLOR = Color.TRANSPARENT; private RectF mRectF; private Paint mPaint; private Xfermode mXfermode; public HollowLayout(Context context) { this(context, null); } public HollowLayout(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public HollowLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); setLayerType(LAYER_TYPE_SOFTWARE, null); setWillNotDraw(false); mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setStyle(Paint.Style.FILL_AND_STROKE); //SrcOut模式 mXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT); } @Override protected void onDraw(Canvas canvas) { if(mRectF == null){ mRectF = new RectF(0, 0, getWidth(), getHeight()); } //绘制目标图 mPaint.setColor(SHADOW_COLOR); canvas.drawRect(mRectF, mPaint); //设置混合模式 mPaint.setXfermode(mXfermode); //绘制源图 mPaint.setColor(HOLLOW_COLOR); if(onDrawHollowListener != null){ onDrawHollowListener.onDrawHollow(canvas, mPaint); } } private OnDrawHollowListener onDrawHollowListener; public void setOnDrawHollowListener(OnDrawHollowListener onDrawHollowListener) { this.onDrawHollowListener = onDrawHollowListener; } public interface OnDrawHollowListener{ void onDrawHollow(Canvas canvas, Paint paint); } } ``` - HollowLayout继承自FrameLayout而不是View,是为了方便在镂空布局的上面添加说明文字和图片。 - 由于想要镂空的图形是不确定的,可能是圆的、也可能是方的、或者多个图形的叠加。这里对外部提供 *OnDrawHollowListener* 接口,在 *onDrawHollow(Canvas canvas, Paint paint)* 中直接用canvas绘图。 #### activity_main.xml ```xml <framelayout android:layout_height="match_parent" android:layout_width="match_parent" tools:context="cc.rome753.demo.MainActivity" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"> ``` 将HollowLayout直接放到页面布局的最上层,HollowLayout中放引导文字 #### MainActivity.java ```java public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final int size = dp2px(200); final int left = (getScreenWidth(this) - size) / 2; final int top = dp2px(100); final int right = left + size; final int bottom = top + size; HollowLayout hl = findViewById(R.id.hv); hl.setOnDrawHollowListener(new HollowLayout.OnDrawHollowListener() { @Override public void onDrawHollow(Canvas canvas, Paint paint) { canvas.drawOval(new RectF(0,0,300,300), paint); canvas.drawOval(new RectF(left,top,right,bottom), paint); } }); } public static int dp2px(float dpValue) { return (int) (0.5f + dpValue * Resources.getSystem().getDisplayMetrics().density); } public static int getScreenWidth(Context context) { return context.getResources().getDisplayMetrics().widthPixels; } } ``` 活动页面中给HollowLayout设置回调,在 *onDrawHollow(Canvas canvas, Paint paint)* 中绘图。这里画了两个圆。注意,canvas绘图是基于像素的,所以要确定具体的位置,就要进行 *dp2px* 单位转换。 最终效果: ![hollow2.png](http://upload-images.jianshu.io/upload_images/1896166-fde436e2769bc330.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

标签:canvas,int,安卓,mPaint,PorterDuffXfermode,context,HollowLayout,新手,public
来源: https://www.cnblogs.com/rome753/p/16491462.html