运用 DialogX 轻松完成运用操作引导

在功用复杂时时长需求制作引导提示来指引用户进行操作，引导提示一般又分为非关联引导（提示图）以及关联到界面上固定布局的引导提示，此时要完成在各分辨率下都能精准指引的提示作用便是件麻烦事了，DialogX 新增的 GuideDialog 能够轻松完成这个操作。

如何运用

1. 在 project 的 build.gradle 文件中找到 allprojects{} 代码块增加以下代码：

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }      //增加 jitPack Maven 仓库
    }
}

⚠️请注意，运用 Android Studio 北极狐版本（Arctic Fox）创立的项目，需求您前往 settings.gradle 增加上述 jitpack 仓库装备。

2. 在 app 的 build.gradle 文件中找到 dependencies{} 代码块，并在其中参加以下句子：

def dialogx_version = "0.0.46.beta8"
implementation "com.github.kongzue.DialogX:DialogX:${dialogx_version}"

有关 DialogX 对话框结构的介绍文档请参阅这儿：运用 DialogX 快速构建 Android App 对话框 – ()

显现一个简单引导对话框

首要准备一个自界说引导图或自界说布局，然后运用以下代码显现一个引导对话框：

自界说图片支持资源图（redId）、Drawable 或位图（Bitmap）。

//运用自界说图片
GuideDialog.show(R.mipmap.img_guide_tip);
​
//运用自界说布局
GuideDialog.show(new OnBindView<CustomDialog>(R.layout.layout_custom_dialog) {
  @Override
  public void onBind(final CustomDialog dialog, View v) {
    ImageView btnOk;
    btnOk = v.findViewById(R.id.btn_ok);
    btnOk.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        dialog.dismiss();
       }
     });
   }
});

你也能够运用 build() 办法构建 CustomDialog：

GuideDialog.build()
     .setTipImage(R.mipmap.img_guide_tip)
     .show();

指定 GuideDialog 根据一个布局显现

要根据界面上现已存在的布局对用户进行引导，请在显现 GuideDialog 时绑定布局：

//view 即需求 GuideDialog 绑定的布局
GuideDialog.show(view, R.mipmap.img_tip_login);

绑定布局后，默许会运用“舞台光”作用照亮绑定的布局方位，舞台光作用支持以下模式：

STAGE_LIGHT_TYPE 类型	介绍	图例
RECTANGLE	根据绑定布局外围显现矩形舞台光
SQUARE_OUTSIDE	根据绑定布局外围显现正方形舞台光
SQUARE_INSIDE	根据绑定布局内围显现正方形舞台光
CIRCLE_OUTSIDE	根据绑定布局外围显现圆形舞台光
CIRCLE_INSIDE	根据绑定布局内围显现圆形舞台光

然后运用代码设置：

//在发动办法指定
GuideDialog.show(btnFullScreenDialogLogin, GuideDialog.STAGE_LIGHT_TYPE.CIRCLE_OUTSIDE, R.mipmap.img_tip_login);
​
//运用 set 办法指定
GuideDialog.show(btnFullScreenDialogLogin, R.mipmap.img_tip_login)
     .setStageLightType(GuideDialog.STAGE_LIGHT_TYPE.CIRCLE_OUTSIDE);

当运用矩形 RECTANGLE 和方形 SQUARE_* 时能够指定圆角，办法为：

.setStageLightFilletRadius(15)  //设置圆角，单位像素

引导图、引导布局选项

GuideDialog 的引导图/布局是指提供引导提示的部分，能够独自显现，也能够环绕绑定的布局上下左右显现。

运用引导图时，能够指定资源图（redId）、Drawable 或位图（Bitmap），除了静态办法发动对话框外也能够独自指定：

GuideDialog.build()
     .setCustomView(new OnBindView(...))     //指定引导布局
     .setTipImage(...)   //指定引导图

请注意，引导图和引导布局只能选其一，运用引导布局时引导图将不收效。

绑定引导布局时

能够使 GuideDialog 环绕绑定布局的周围显现：

//在发动办法指定
GuideDialog.show(btnFullScreenDialogLogin, R.mipmap.img_tip_login, Gravity.BOTTOM|Gravity.CENTER_HORIZONTAL);
​
//运用 set 办法指定
GuideDialog.build()
     .setAlignBaseViewGravity(Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL);

还能够设置引导图/布局距离绑定布局的间距：

//指定引导图/布局和绑定布局之间的左上右下的间距（单位：像素）
.setBaseViewMargin(left, top, right, bottom)
.setBaseViewMargin(new int[]{left, top, right, bottom})
  
//仅独自指定上间距
.setBaseViewMarginTop(-dip2px(30))

不绑定引导布局时

但独自运用引导图/布局且不绑定引导布局时，GuideDialog 和自界说对话框 CustomDialog 功用基本一致，能够设置 Align 来修改 GuideDialog 的发动方式：

GuideDialog.show(...)
   .setAlign(ALIGN.TOP);

ALIGN 是一个枚举，其值界说如下：

CENTER          中心显现（默许）
TOP         顶部显现（等同于顶部中心）
TOP_CENTER      顶部中心显现
TOP_LEFT        顶部左边显现
TOP_RIGHT       顶部右侧显现
BOTTOM          底部显现（等同于底部中心）
BOTTOM_CENTER       底部中心显现
BOTTOM_LEFT     底部左边显现
BOTTOM_RIGHT        底部右侧显现
LEFT            左边显现（等同于左边中心）
LEFT_CENTER     左边中心显现
LEFT_TOP        左边上方显现
LEFT_BOTTOM     左边下方显现
RIGHT           右侧显现（等同于右侧中心）
RIGHT_CENTER        右侧中心显现
RIGHT_TOP       右侧上方显现
RIGHT_BOTTOM        右侧下方显现

请注意： 其中，例如顶部左边显现 TOP_LEFT 和左边上方显现 LEFT_TOP 的区别在于进场进场动画方向不一样，顶部左边显现的动画是从屏幕顶部进入，布局居于屏幕左边，而左边上方显现则是动画从屏幕左边进入，居于上方显现。

您也能够自界说发动/封闭动画，支持运用自界说的 anim 资源文件进行设置：

GuideDialog.build()
   .setCustomView(...)
   .setEnterAnimResId(R.anim.enter_anim)
   .setExitAnimResId(R.anim.exit_anim)
   .show();

或：

GuideDialog.build()
   .setCustomView(...)
   .setAnimResId(R.anim.enter_anim, R.anim.exit_anim)
   .show();

请注意，发动动画有必要在对话框发动前设置，即运用build()办法构建对话框进行设置。

引导点击

设置引导绑定布局的方位点击：

.setOnStageLightPathClickListener(new OnDialogButtonClickListener<GuideDialog>() {
  @Override
  public boolean onClick(GuideDialog dialog, View v) {
    toast("点击了原按钮");
    btnCustomDialogAlign.callOnClick();     //调用原按钮点击事情
    return false;
   }
});

设置点击了外围遮罩：

.setOnBackgroundMaskClickListener(new OnBackgroundMaskClickListener<CustomDialog>() {
  @Override
  public boolean onClick(CustomDialog dialog, View v) {
    toast("点击了外围遮罩");
    return false;       //return true能够使对话框无法点击遮罩封闭
   }
})

沉溺式

GuideDialog 默许会开启沉溺式非安全区阻隔模式，也便是说，会在根布局设置一个 padding，将顶部状态栏和底部导航栏的无法触控的非安全区方位分离开，确保自界说布局方位一定处于安全区内，但这可能与您运用的沉溺式结构，或者未装备任何沉溺式（即顶部导航栏和底部状态栏都不沉溺式）时产生冲突，导致 GuideDialog 在运用顶部显现/底部显现时额定空出一部分区域，此时您能够运用以下设置封闭沉溺式 padding：

GuideDialog.build()
   .setCustomView(...)
   .setAutoUnsafePlacePadding(false)
   .show();

请注意，setAutoUnsafePlacePadding(Boolean) 有必要在对话框发动前设置，即运用build()办法构建对话框进行设置。

生命周期回调

想要监控对话框的生命周期，能够完成其 接口，建议运用build()办法构建对话框：

GuideDialog.build()
     .setDialogLifecycleCallback(new DialogLifecycleCallback<CustomDialog>() {
      @Override
      public void onShow(CustomDialog dialog) {
        //CustomDialog 发动时回调
       }
      @Override
      public void onDismiss(CustomDialog dialog) {
        //CustomDialog 封闭时回调
       }
     })
     .show();

其他额定办法

//强制从头刷新界面
.refreshUI();
​
//封闭对话框
.dismiss();
​
//获取对话框实例化目标，您能够通过此办法更深度的定制Dialog的功用
.getDialogImpl()
​
//获取自界说布局实例
.getCustomView()
  
//设置对话框宽度
.setWidth(px)
  
//设置对话框高度
.setHeight(px)

下载 Demo App 试用

最新的 DialogX Demo App 现已更新并增加 GuideDialog 的范例，也能够优先下载测验 beta.kongzue.com/DialogXDemo