Android开发引导蒙版

需求：在界面上特定位置做出指引，一步步告诉用户是怎么操作

效果图：

实现思路：

在界面出来之后，获取相应的坐标，然后传坐标到startActivity一个新的界面，该界面背景是带透明度的，界面上添加一个根据坐标点镂空的TipsView

下面一步步实现

步骤一：自定义镂空控件TipsView

示例代码：

public class TipsView extends FrameLayout {
private final Context mContext;
private int[] mCircleLocation;
private  int position = 0;


public TipsView(Context context) {
    this(context, null);
}

public TipsView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public TipsView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    this.mContext = context;
    initView();
}

private void initView() {
    setBackgroundColor(Color.parseColor("#7f000000"));//半透明底色
}

public void setCircleLocation(int[] location,int position) {
    this.mCircleLocation = location;
    this.position = position;
    invalidate(); //重新绘画
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (mCircleLocation != null) {

        //根据传过来的特定坐标位置掏空一个圆形
        Paint paintarc = new Paint(Paint.ANTI_ALIAS_FLAG);
        PorterDuffXfermode porterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR);
        paintarc.setXfermode(porterDuffXfermode);
        paintarc.setAntiAlias(true);
        RectF rectF = new RectF(mCircleLocation[0], mCircleLocation[1], mCircleLocation[2], mCircleLocation[3]);
        canvas.drawArc(rectF, 0, 360, true, paintarc);
        //画虚线
//Paint paintdashed = new Paint(Paint.ANTI_ALIAS_FLAG);
//paintdashed.setStyle(Paint.Style.STROKE);
//paintdashed.setColor(Color.WHITE);
//paintdashed.setStrokeWidth(1);
//PathEffect pathEffect = new DashPathEffect(new float[]{10, 10}, 0);
//paintdashed.setPathEffect(pathEffect);
//canvas.drawArc(rectF, 0, 360, true, paintdashed);
        if (position == 0){
            //画分享指引图片
            Paint paintImage = new Paint(Paint.ANTI_ALIAS_FLAG);
            Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.course_share_arrow_mark);
            int width = bitmap.getWidth();
            int height = bitmap.getHeight();
            int def = Util.dip2px(10f);
            int left = mCircleLocation[0] - width+def;
            int top = mCircleLocation[3] + def;
            canvas.drawBitmap(bitmap, left, top, paintImage);
        } else if(position == 1) {
            //画打卡指引图片
            Paint paintImage = new Paint(Paint.ANTI_ALIAS_FLAG);
            Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.course_daka_arrow_mark);
            int width = bitmap.getWidth();
            int height = bitmap.getHeight();
            int def = Util.dip2px(10f);
            int left = mCircleLocation[2] - def;
            int top = mCircleLocation[3] ;
            canvas.drawBitmap(bitmap, left, top, paintImage);
        } else if (position == 2) {
            //画大纲指引图片
            Paint paintImage = new Paint(Paint.ANTI_ALIAS_FLAG);
            Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.course_dagang_arrow_mark);
            int width = bitmap.getWidth();
            int height = bitmap.getHeight();
            int def = Util.dip2px(10f);
            int left = mCircleLocation[0] + (mCircleLocation[2] - mCircleLocation[0])/2 - def;
            int top = mCircleLocation[3] + def;
            canvas.drawBitmap(bitmap, left, top, paintImage);
        } else if (position == 3) {
            //画简介指引图片
            Paint paintImage = new Paint(Paint.ANTI_ALIAS_FLAG);
            Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.course_jianjie_arrow_mark);
            int width = bitmap.getWidth();
            int height = bitmap.getHeight();
            int def = Util.dip2px(10f);
            int left = mCircleLocation[0] - width + (mCircleLocation[2] - mCircleLocation[0])/2;
            int top = mCircleLocation[3] + def;
            canvas.drawBitmap(bitmap, left, top, paintImage);
        }

    }
}}

步骤二：配置TipsActivity

TipActivity

public class TipsActivity extends Activity {

private RelativeLayout tips_rootview;

private int[] mShareLocs;
private int[] mDakaLocs;
private int[] mJianjieLocs;

@Override
protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_tips);
    
    if (getIntent().hasExtra("shareLocs")){
        mShareLocs = getIntent().getIntArrayExtra("shareLocs");
    }
    if (getIntent().hasExtra("dakaLocs")){
        mDakaLocs = getIntent().getIntArrayExtra("dakaLocs");
    }
    
    if (getIntent().hasExtra("jianjieLocs")){
        mJianjieLocs = getIntent().getIntArrayExtra("jianjieLocs");
    }
    
    
    tips_rootview = findViewById(R.id.tips_rootview);


    final TipsView tipsView = new TipsView(this);
    tipsView.setCircleLocation(mShareLocs,0);
    tips_rootview.addView(tipsView,new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));

    final TipsView tipsDakaView = new TipsView(this);
    tipsDakaView.setCircleLocation(mDakaLocs,1);
    tips_rootview.addView(tipsDakaView,new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT));
    tipsDakaView.setVisibility(View.GONE);

    final TipsView tipsJianjieView = new TipsView(this);
    tipsJianjieView.setCircleLocation(mJianjieLocs,3);
    tips_rootview.addView(tipsJianjieView,new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT));
    tipsJianjieView.setVisibility(View.GONE);

    tipsView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            tipsView.setVisibility(View.GONE);
            tipsDakaView.setVisibility(View.VISIBLE);

        }
    });
    tipsDakaView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            tipsDakaView.setVisibility(View.GONE);
            tipsJianjieView.setVisibility(View.VISIBLE);
        }
    });

    tipsJianjieView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            finish();
            overridePendingTransition(0,0);
        }
    });

}

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_BACK) {
        finish();
        overridePendingTransition(0, 0);
        return true;
    }
    return super.onKeyDown(keyCode, event);
}}  

清单注册：

注意：清单注册中不要固定竖屏或者横屏，不然在8.0的手机会闪退，切记，切记。不要怀疑

步骤四：使用示例

public class MainActivity extends AppCompatActivity {

private TextView tv_jianjie;
private TextView tv_share;
private TextView tv_daka;


@Override
protected void onCreate(Bundle savedInstanceState) {
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    tv_jianjie = findViewById(R.id.tv_jianjie);
    tv_share = findViewById(R.id.tv_share);
    tv_daka = findViewById(R.id.tv_daka);


    tv_share.post(new Runnable() {
        @Override
        public void run() {
            int left = tv_share.getLeft();
            int top = tv_share.getTop();
            int right = tv_share.getRight();
            int bottom = tv_share.getBottom();
            int[] shareLoc = new int[]{left,top,right,bottom};

            int dakaleft = tv_daka.getLeft();
            int dakatop = tv_daka.getTop();
            int dakaright = tv_daka.getRight();
            int dakabottom = tv_daka.getBottom();
            int[] dakaLoc = new int[]{dakaleft,dakatop,dakaright,dakabottom};

            int jianjieleft = tv_jianjie.getLeft();
            int jianjiedakatop = tv_jianjie.getTop();
            int jianjiedakaright = tv_jianjie.getRight();
            int jianjiedakabottom = tv_jianjie.getBottom();
            int[] jianjieLoc = new int[]{jianjieleft,jianjiedakatop,jianjiedakaright,jianjiedakabottom};

            Intent it = new Intent(MainActivity.this, TipsActivity.class);
            it.putExtra("shareLocs", shareLoc);
            it.putExtra("dakaLocs",dakaLoc);
            it.putExtra("jianjieLocs",jianjieLoc);
            MainActivity.this.startActivity(it);
        }
    });
}}

关键点：传坐标，蒙版activity的配置，镂空处理
有问题加我QQ:893151960或者请加群：142739277