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

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

如何运用

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

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

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

在 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

使用 DialogX 轻松实现应用操作引导

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

如何运用

显现一个简单引导对话框

指定 GuideDialog 根据一个布局显现

引导图、引导布局选项

绑定引导布局时

不绑定引导布局时

引导点击

沉溺式

生命周期回调

其他额定办法

下载 Demo App 试用

作者信息

使用 DialogX 轻松实现应用操作引导

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

如何运用

显现一个简单引导对话框

指定 GuideDialog 根据一个布局显现

引导图、引导布局选项

绑定引导布局时

不绑定引导布局时

引导点击

沉溺式

生命周期回调

其他额定办法

下载 Demo App 试用

相关文章

Flutter III 之你不知道的 PlatformView 的混乱之治

cephadm 安装部署 ceph 集群

【Flutter小技巧】一行代码 全灰致敬

什么？你连个三色渐变圆角按钮都需要UI切图？

作者信息

【Flutter小技巧】一行代码全灰致敬