新手指引页功能实现

新手指引页功能实现

在本期版本更新的需求中添加了新手指引页功能，从网上看了去多大神的实现方式，有用自定义View来自己挖透明区域的，也有透明图来实现遮盖的，时间紧迫就采用UI给图遮盖的实现方式。
自己简单的用Dialog来实现的，思路就是将Dialog设置成了全屏的，然后找到你要添加蒙板的地方，给他设置上图片即可
具体实现方式请看代码，估计你能看懂~代码添加还算可以~
在这将几个方法说明一下即可：
setGuideStyle(Context context, int themeResId, int laytouResId)
设置Dialog的样式以及布局ID，本文使用的布局只需要一个跟标签即可,需要给一个默认的style和layout
setImageRes(Context context, int imgResId, Direction direction, int topMargin)
设置图片的ID，其中的Direction是自定义方向，注意最后的topMargin，指的是显示的图片距离TOP的边距，特别注意的是，做机型适配的时候，需要将状态栏的高度也算进去
同时还监听了Dialog显示的时候的返回键按下，通过接口回调，传递你自己要处理的事件~

比较简单的解释~希望以后继续改进了~~

public class GuideViewUtils {
private static GuideViewUtils instance;
private static Dialog dialog;
private View view;
private RelativeLayout rl_dismiss;
//    private ImageView iv_show;
private RelativeLayout.LayoutParams params;
private final String TAG = getClass().getSimpleName();
private OnClickCallback onclickListener;

/**
 * 私有构造
 */
private GuideViewUtils() {
}

public static GuideViewUtils getInstance() {
    if (instance == null) {
        instance = new GuideViewUtils();
    }
    return instance;
}

/**
 * 设置Dialog样式
 * 都传0的时候使用默认样式
 *
 * @param context     上下文对象
 * @param themeResId  样式ID
 * @param laytouResId layout布局ID
 * @return this
 */
public GuideViewUtils setGuideStyle(Context context, int themeResId, int laytouResId) {
    if (themeResId == 0) {
        dialog = new Dialog(context, R.style.guideDialog);
        view = View.inflate(context, R.layout.layout_guideview, null);
    } else {
        dialog = new Dialog(context, themeResId);
        view = View.inflate(context, laytouResId, null);
    }
    return this;
}

/**
 * 设置图片资源ID、显示位置
 *
 * @param context   上下文
 * @param imgResId  资源ID
 * @param direction 方向
 * @param topMargin margin_top
 * @return this
 */
public GuideViewUtils setImageRes(Context context, int imgResId, Direction direction, int topMargin) {
    rl_dismiss = (RelativeLayout) view.findViewById(R.id.rl_dismiss);
    ImageView imageView = new ImageView(context);
    if (imgResId != 0) {
        imageView.setImageResource(imgResId);//设置图片资源ID
    }
    RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
    switch (direction) {
        case RIGHT_TOP://右上角的
            rl_dismiss.setGravity(Gravity.RIGHT | Gravity.TOP);
            break;
        case BOTTOM://底部居中
            rl_dismiss.setGravity(Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL);
            break;
        case TOP_CENTER_HORIZONTAL://需要手动设置margin_top
            rl_dismiss.setGravity(Gravity.TOP | Gravity.CENTER_HORIZONTAL);
            if (topMargin != 0) {
                layoutParams.topMargin = topMargin;//设置margin_top
            }
            break;
        default:
            break;
    }
    imageView.setLayoutParams(layoutParams);
    imageView.requestLayout();
    rl_dismiss.addView(imageView);

    dialog.setContentView(view);
    rl_dismiss.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            dialog.dismiss();
            onclickListener.onClickedGuideView();
        }
    });
    return this;
}

/**
 * 设置全屏，获取屏幕尺寸
 *
 * @return
 */
public GuideViewUtils setGuideGravity() {
    Window dialogWindow = dialog.getWindow();
    dialogWindow.setGravity(Gravity.CENTER);
    WindowManager m = dialogWindow.getWindowManager();
    Display d = m.getDefaultDisplay(); // 获取屏幕宽、高用
    WindowManager.LayoutParams p = dialogWindow.getAttributes(); // 获取对话框当前的参数值
    Log.e(TAG, "屏幕宽度           Width = " + d.getWidth() + "                  Height : " + d.getHeight());
    p.width = d.getWidth(); // 宽度设置为屏幕宽度
    p.height = WindowManager.LayoutParams.MATCH_PARENT;
    dialogWindow.setAttributes(p);
    return this;
}

/**
 * 显示
 *
 * @return
 */
public GuideViewUtils show() {
    dialog.setCanceledOnTouchOutside(true);
    //简单的方法是直接设置        dialog.setCancelable(false);     立解囧况
    dialog.setOnKeyListener(new DialogInterface.OnKeyListener() {
        @Override
        public boolean onKey(DialogInterface dialog, int keyCode, KeyEvent event) {
            if (keyCode == KeyEvent.KEYCODE_BACK) {
                L.e("IVEN", "在Dialog显示的时候，点击了 返回键 ........");
                dialog.dismiss();
                onclickListener.onClickedGuideView();//回调
                return true;
            } else {
                return false;
            }
        }
    });
    dialog.show();
    return this;
}

/**
 * 方向枚举设置
 * OTHER:表示不需要具体的方向，是需要自己设置具体的边距的
 */
public enum Direction {
    LEFT,
    TOP,
    RIGHT,
    /**
     * 居底
     */
    BOTTOM,
    LEFT_TOP,
    LEFT_BOTTOM,
    /**
     * 水平居中、向上
     */
    TOP_CENTER_HORIZONTAL,
    /**
     * 右上角
     */
    RIGHT_TOP,
    RIGHT_BOTTOM,
    OTHER
}

/**
 * Callback
 */
public interface OnClickCallback {
    void onClickedGuideView();
}

public GuideViewUtils setOnclickListener(OnClickCallback onclickListener) {
    this.onclickListener = onclickListener;
    return this;
}

}“

---

样式：

    <style name="guideDialog" parent="@android:style/Theme.Holo.Light.Dialog">
    <item name="android:windowFrame">@null</item>
    <!--是否浮在activity上-->
    <item name="android:windowIsFloating">true</item>
    <!-- 半透明 -->
    <item name="android:windowIsTranslucent">true</item>
    <!-- 是否有title -->
    <item name="android:windowNoTitle">true</item>
    <!--dialog背景 -->
    <item name="android:background">@android:color/transparent</item>
    <!-- 模糊 不设置背景不是半透明的 -->
    <item name="android:backgroundDimEnabled">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowContentOverlay">@null</item>
</style>