UI-引导层

Posted on | In

引导层错位问题解决

image-20210219103102195

在今天修复燕谷坊的Bug过程中，发现了这样一个问题：在APP的实现过程中常常有这样一个功能，当用户第一次使用app的时候部分界面会弹出新手引导蒙版来告知用户具体的功能和操作；在燕谷坊导购端中也是用了这样的一个功能，但是它的实现方式是在界面上直接套上一个静态面板，这样实现起来方便快捷 ，但是会出现比较严重的适配问题，在不同的分辨率的手机上会出现严重的错位问题，因此需要舍弃旧的方案，采用适配性更强的方案，这里是采用第三方开源框架来实现的（NewGuide）,

https://github.com/huburt-Hu/NewbieGuide

具体实现代码为：

一：添加依赖

1
2
3
dependencies {
    compile 'com.github.huburt-Hu:NewbieGuide:v2.4.0'
}

二：添加依赖后就可以直接使用了，以下为燕谷坊中使用的核心代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
private void initCustomTip(final String commissionCalculateTip, final String serverCommissionTips, final String spreadCommissionTips){
    HighlightOptions options = new HighlightOptions.Builder()
        .setOnHighlightDrewListener(new OnHighlightDrewListener() {
            @Override
            public void onHighlightDrew(Canvas canvas, RectF rectF) {
                Paint paint = new Paint();
                paint.setColor(Color.WHITE);
                paint.setStyle(Paint.Style.STROKE);
                paint.setStrokeWidth(5);
                paint.setPathEffect(new DashPathEffect(new float[]{20, 20}, 0));
                canvas.drawCircle(rectF.centerX(), rectF.centerY(), rectF.width() / 2 + 35, paint);
            }
        })
        .build();
    NewbieGuide.with(this)
        .setLabel("guide1")
        .addGuidePage(GuidePage.newInstance()
                      .addHighLight(mToolbarRightLl, HighLight.Shape.CIRCLE,0,10,new RelativeGuide(R.layout.item_commission_header_tip, Gravity.LEFT))
                      .addHighLightWithOptions(mToolbarRightIv,options)
                      .setLayoutRes(R.layout.dialog_commission_description,R.id.llyt_close)
                      .setOnLayoutInflatedListener(new OnLayoutInflatedListener() {
                          @Override
                          public void onLayoutInflated(View view, Controller controller) {
                              initCustomTipsData(view,commissionCalculateTip,serverCommissionTips,spreadCommissionTips);
                          }
                      }))
        .show();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
private void initCustomTipsData(View customView,String commissionCalculateTip, String serverCommissionTips, String spreadCommissionTips){
    ImageView close;
    LinearLayout descptionView;//引导图
    TextView commissionCalculateTipsTv;
    TextView serverCommissionTv;
    TextView serverCommissionTipsTv;
    TextView spreadCommissionTv;
    TextView spreadCommissionTipsTv;
    int mAppSysType;
    mAppSysType = Constants.getAppSystemType();
    /*close = customView.findViewById(R.id.llyt_close);
        close.setOnClickListener(this);*/
    /*descptionView = (LinearLayout) customView.findViewById(R.id.llyt_head);
        descptionView.setVisibility(View.VISIBLE);*/
    commissionCalculateTipsTv = (TextView) customView.findViewById(R.id.tv_commission_calculate_tips);
    serverCommissionTv = (TextView) customView.findViewById(R.id.tv_server_commission);
    serverCommissionTipsTv = (TextView) customView.findViewById(R.id.tv_server_commission_tips);
    spreadCommissionTv = (TextView) customView.findViewById(R.id.tv_spread_commission);
    spreadCommissionTipsTv = (TextView) customView.findViewById(R.id.tv_spread_commission_tips);
    serverCommissionTv.setVisibility(mAppSysType == 2 ? View.VISIBLE : View.GONE);
    serverCommissionTipsTv.setVisibility(mAppSysType == 2 ? View.VISIBLE : View.GONE);
    spreadCommissionTv.setVisibility(View.VISIBLE);
    spreadCommissionTipsTv.setVisibility(View.VISIBLE);
    commissionCalculateTipsTv.setText("\n"+commissionCalculateTip);
    serverCommissionTipsTv.setText(serverCommissionTips);
    spreadCommissionTipsTv.setText(spreadCommissionTips);
}

3：分析代码的使用：

  • with方法可以传入Activity或者Fragment，获取引导页的依附者。Fragment中使用建议传入fragment，内部会添加监听，当依附的Fragment销毁时，引导层自动消失。
  • setLabel方法用于设置引导页的标签，区别不同的引导页，该方法必须调用设置，否则会抛出异常。内部使用该label控制引导页的显示次数。
  • addGuidePage方法添加一页引导页，这里的引导层可以有多个引导页，但至少需要一页。
  • GuidePage即为引导页对象，表示一页引导页，可以通过.newInstance()创建对象。并通过addHighLight添加一个或多个需要高亮的view，该方法有多个重载，可以设置高亮的形状，以及padding等（默认是矩形）。setLayoutRes方法用于引导页说明布局，就是上图的说明文字的布局。
  • show方法直接显示引导层，如果不想马上显示可以使用build方法返回一个Controller对象，完成构建。需要显示得时候再次调用Controller对象的show方法进行显示。

在addGuidePage来配置引导层的信息，其中：

高亮view

addHighLight方法有多个重写，完整参数如下：

1
2
3
4
5
6
7
8
9
10
/**
 * 添加需要高亮的view
 *
 * @param view          需要高亮的view
 * @param shape         高亮形状{@link com.app.hubert.guide.model.HighLight.Shape}
 * @param round         圆角尺寸，单位dp，仅{@link com.app.hubert.guide.model.HighLight.Shape#ROUND_RECTANGLE}有效
 * @param padding       高亮相对view的padding,单位px
 * @param relativeGuide 相对于高亮的引导布局
 */
public GuidePage addHighLight(View view, HighLight.Shape shape, int round, int padding, @Nullable RelativeGuide relativeGuide)

给高亮区设置虚线

首先构建一个HighlightOptions，并设置OnHighlightDrewListener：

1
2
3
4
5
6
7
8
9
10
11
12
13
HighlightOptions options = new HighlightOptions.Builder()
    .setOnHighlightDrewListener(new OnHighlightDrewListener() {
        @Override
        public void onHighlightDrew(Canvas canvas, RectF rectF) {
            Paint paint = new Paint();
            paint.setColor(Color.WHITE);
            paint.setStyle(Paint.Style.STROKE);
            paint.setStrokeWidth(10);
            paint.setPathEffect(new DashPathEffect(new float[]{20, 20}, 0));
            canvas.drawCircle(rectF.centerX(), rectF.centerY(), rectF.width() / 2 + 10, paint);
        }
    })
    .build();

之后传入highlight以及option到addHighLightWithOptions方法中：

1
GuidePage.newInstance().addHighLightWithOptions(btnRelative, options);

相对高亮位置的引导布局

有时候对于箭头指向的引导控制起来比较麻烦，，在不用的手机屏幕尺寸上会有位置差异，可以通过在高亮相对位置添加引导布局的方法，具体使用如下：

1
2
3
4
5
.addGuidePage(
    GuidePage.newInstance()
    .addHighLight(btnRelative, new RelativeGuide(R.layout.view_relative_guide,
                                                 Gravity.RIGHT, 100))
)

一下是燕谷坊中引导布局的xml文件：

item_commission_header_tip.xml

1
2
3
4
5
6
7
8
9
10
11
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:layout_width="240dp"
        android:layout_height="160dp"
        android:layout_alignParentRight="true"
        android:layout_marginTop="25dp"
        android:src="@drawable/ic_commission_descption_head_single" />
</RelativeLayout>

以上就是整体在燕谷坊中关于引导层的使用方案，在此记录。