引导层错位问题解决
在今天修复燕谷坊的Bug过程中,发现了这样一个问题:在APP的实现过程中常常有这样一个功能,当用户第一次使用app的时候部分界面会弹出新手引导蒙版来告知用户具体的功能和操作;在燕谷坊导购端中也是用了这样的一个功能,但是它的实现方式是在界面上直接套上一个静态面板,这样实现起来方便快捷 ,但是会出现比较严重的适配问题,在不同的分辨率的手机上会出现严重的错位问题,因此需要舍弃旧的方案,采用适配性更强的方案,这里是采用第三方开源框架来实现的(NewGuide),
https://github.com/huburt-Hu/NewbieGuide
具体实现代码为:
一:添加依赖
1 | dependencies { |
二:添加依赖后就可以直接使用了,以下为燕谷坊中使用的核心代码
1 | private void initCustomTip(final String commissionCalculateTip, final String serverCommissionTips, final String spreadCommissionTips){ |
1 | private void initCustomTipsData(View customView,String commissionCalculateTip, String serverCommissionTips, String 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 | /** |
给高亮区设置虚线
首先构建一个HighlightOptions,并设置OnHighlightDrewListener:
1 | HighlightOptions options = new HighlightOptions.Builder() |
之后传入highlight以及option到addHighLightWithOptions方法中:
1 | GuidePage.newInstance().addHighLightWithOptions(btnRelative, options); |
相对高亮位置的引导布局
有时候对于箭头指向的引导控制起来比较麻烦,,在不用的手机屏幕尺寸上会有位置差异,可以通过在高亮相对位置添加引导布局的方法,具体使用如下:
1 | .addGuidePage( |
一下是燕谷坊中引导布局的xml文件:
item_commission_header_tip.xml
1 | <RelativeLayout |
以上就是整体在燕谷坊中关于引导层的使用方案,在此记录。