UI-引导层

引导层错位问题解决

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>

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