Android使用PorterDuffXfermode图片合成实现新手引导
一些APP需要新手引导功能,如下图所示:

一个黑色半透明的浮层盖住页面的大部分,需要引导用户操作的地方突出显示。实现这种效果有两种思路:

一个黑色半透明的浮层盖住页面的大部分,需要引导用户操作的地方突出显示。实现这种效果有两种思路:
- 将要突出显示的地方做成图片,放到下层页面相同的位置,实现伪透明效果。这样的缺点是,如果图片较大或者是动画会占用空间,或者要突出的内容是可变的也不合适。
- 在View的onDraw()方法中绘图,在要突出显示的地方绘制透明区域。也许你会想,这很简单,先把黑色的浮层画出来,再在其中画透明的图形不就行了?事实上直接这么做是行不通的,透明图形会被下面的黑色的浮层“覆盖”,根本看不到。要实现透明效果需要将透明区域从黑色浮层中挖去。
原理
实现挖去效果就需要使用PorterDuffXfermode图片合成技术,它将两张图片合称为一张,合成后的效果会突出或隐藏图片的一部分。
PorterDuffXfermode中的16种模式如上图所示。图中蓝色矩形是源图Src,黄色圆形是目标图Dst。源图和目标图并无差别,只需要知道先画的是目标图,后画的是源图就行了。
根据前面的需求,先画黑色浮层,然后画透明图形,并将透明图形挖去。也就是Dst是黑色浮层,Src是透明图形,Src挖去。满足这个条件的是上图的 SrcOut 模式。
代码
这种镂空布局的实现如下:
HollowLayout.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 version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="cc.rome753.demo.MainActivity">
<ImageView
android:src="@mipmap/ic_launcher"
android:scaleType="fitXY"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<cc.rome753.demo.HollowLayout
android:id="@+id/hv"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:text="这是提示文字"
android:textColor="@android:color/white"
android:layout_marginTop="310dp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</cc.rome753.demo.HollowLayout>
</FrameLayout>
将HollowLayout直接放到页面布局的最上层,HollowLayout中放引导文字
MainActivity.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 单位转换。
最终效果:
分类:
Android
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性