通过Dialog来展示新手指引蒙层

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/mChenys/article/details/83549228

以前展示新手指引蒙层的方式都是在Activity基类的根布局中叠加上一个全屏的ImageView,然后在条件成立的时候设置蒙层并显示,这里介绍一种通过Dialog来展示的方式,用起来比较灵活.

先看dialog的布局,其实就是一个ImageView

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/iv_img"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_add_wish_suc"/>

</android.support.constraint.ConstraintLayout>

然后是自定义Dialog

package blog.csdn.net.mchenys;

import android.app.Activity;
import android.app.Dialog;
import android.content.Context;
import android.graphics.drawable.ColorDrawable;
import android.support.annotation.NonNull;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.ImageView;

import blog.csdn.net.mchenys.R;
import blog.csdn.net.mchenys.utils.UIUtils;

/**
 * Created by mChenys on 2018/10/30.
 */

public class GuideDialog extends Dialog implements View.OnClickListener {
    private ImageView mGuideView;
    private int[] imageIds;//多张引导图数组
    private int currPosition;//当前显示第几个引导图

    public GuideDialog(@NonNull Context context, int id) {
        this(context, new int[]{id});
    }

    public GuideDialog(@NonNull Context context, int[] ids) {
        super(context);
        setContentView(R.layout.dialog_guide);
        Window window = getWindow();
        window.setBackgroundDrawable(new ColorDrawable(0));//布局背景透明
        WindowManager.LayoutParams lp = window.getAttributes();
        lp.width = context.getResources().getDisplayMetrics().widthPixels; //宽度=屏幕宽度
        lp.height = context.getResources().getDisplayMetrics().heightPixels;//高度=屏幕高度
        lp.dimAmount = 0;
        window.setAttributes(lp);
        setCanceledOnTouchOutside(false);

        this.imageIds = ids;
        mGuideView = findViewById(R.id.iv_img);
        mGuideView.setImageResource(imageIds[0]);
        mGuideView.setOnClickListener(this);
        //由于切图是全屏的包括了状态栏,所以图片内容要往上偏移一个状态栏的距离
        mGuideView.scrollBy(0,UIUtils.getStatusBarHeight(context));

    }

    @Override
    public void show() {
        //获取dialog依赖的Activity
        Activity activity = UIUtils.scanForActivity(getContext());
        if (!isShowing() && null != activity && !activity.isFinishing()) {
            super.show();
        }
    }


    @Override
    public void onClick(View v) {
        if (++currPosition < imageIds.length) {
            //点击切换显示下一个引导图
            mGuideView.setImageResource(imageIds[currPosition]);
        } else {
            //没有下一张时隐藏dialog
            dismiss();
        }
    }
}

工具类UIUtils#scanForActivity

package blog.csdn.net.mchenys.utils;

import android.app.Activity;
import android.content.Context;
import android.content.ContextWrapper;

/**
 * Created by mChenys on 2018/10/30.
 */

public class UIUtils {
    public  static Activity scanForActivity(Context cont) {
        if (cont == null)
            return null;
        else if (cont instanceof Activity)
            return (Activity)cont;
        else if (cont instanceof ContextWrapper)
            return scanForActivity(((ContextWrapper)cont).getBaseContext());

        return null;
    }

    /**
     * 获取状态栏高度/像素
     *
     * @return
     */
    public static int getStatusBarHeight(Context context) {
        Class<?> c = null;
        Object obj = null;
        Field field = null;
        int x = 0, statusBarHeight = 0;
        try {
            c = Class.forName("com.android.internal.R$dimen");
            obj = c.newInstance();
            field = c.getField("status_bar_height");
            x = Integer.parseInt(field.get(obj).toString());
            statusBarHeight = context.getResources().getDimensionPixelSize(x);
        } catch (Exception e1) {
            e1.printStackTrace();
        }
        return statusBarHeight;
    }
}

使用方式,直接在需要用到的地方调用一行代码即可:

 new GuideDialog(context, R.drawable.ic_guide_01).show();

如果有多个引导图,依次点击显示下一张的话就传入一个数组即可

new GuideDialog(context,new int[]{
                                   R.drawable.guide_01,
                                   R.drawable.guide_02,
                                   R.drawable.guide_03
                } ).show();