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

<!-- 重新主題去掉activity切換的動畫效果  -->
<style name="ThemeTips" parent="@android:style/Theme.Translucent.NoTitleBar">
    <item name="android:windowAnimationStyle">@style/TipAnimation</item>
</style>
<style name="TipAnimation">
    <item name="android:activityOpenEnterAnimation">@null</item>
    <item name="android:activityOpenExitAnimation">@null</item>
    <item name="android:activityCloseEnterAnimation">@null</item>
    <item name="android:activityCloseExitAnimation">@null</item>
    <item name="android:taskOpenEnterAnimation">@null</item>
    <item name="android:taskOpenExitAnimation">@null</item>
    <item name="android:taskCloseEnterAnimation">@null</item>
    <item name="android:taskCloseExitAnimation">@null</item>
    <item name="android:taskToFrontEnterAnimation">@null</item>
    <item name="android:taskToFrontExitAnimation">@null</item>
    <item name="android:taskToBackEnterAnimation">@null</item>
    <item name="android:taskToBackExitAnimation">@null</item>
</style>

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);
}}  

清單註冊：

    <activity android:name=".activity.TipsActivity"
android:theme="@style/ThemeTips"
/>

注意：清單註冊中不要固定豎屏或者橫屏，不然在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