在日常
Android
业务开发当中,我们肯定会有关于新手引导的需求。我们怎么快速实现呢?这里推荐一个快速实现的框架。
NewbieGuide
这是一款可以通过简洁链式调用新手引导层的库,一行代码实现引导层的显示,自动判断首次显示,当然也可以通过参数配置来满足不同的显示逻辑和需求。
NewbieGuide的引入
需要在项目级的build.gradle
加入:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
module的build.gradle
加入:
dependencies {
implementation 'com.github.huburt-Hu:NewbieGuide:v2.4.0'
}
注意这个库是使用v7
包,如果项目是使用AndroidX
,是需要自己下载代码重构的。更多具体的信息请看开源库wiki
简单使用
NewbieGuide.with(activity)
.setLabel("guide1")
.addGuidePage(GuidePage.newInstance()
.addHighLight(btnSimple)
.setLayoutRes(R.layout.view_guide_simple))
.show();
高亮View
addHighLight方法有多个重写,完整参数如下:
/**
* 添加需要高亮的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)
高亮区域
有些情况可能不太容易获得高亮view的引用,那么此时可以用添加高亮区域的方式来代替, 计算出需要高亮的view在anchor中位置,将获得的rectF传入addHighLight方法
/**
* 添加高亮区域
*
* @param rectF 高亮区域,相对于anchor view(默认是android.R.id.content)
* @param shape 高亮形状{@link com.app.hubert.guide.model.HighLight.Shape}
* @param round 圆角尺寸,单位dp,仅{@link com.app.hubert.guide.model.HighLight.Shape#ROUND_RECTANGLE}有效
* @param relativeGuide 相对于高亮的引导布局
*/
public GuidePage addHighLight(RectF rectF, HighLight.Shape shape, int round, @Nullable RelativeGuide relativeGuide)
显示次数限制
通常情况下引导页只在用户首次打开app的时候显示,第二次进入时不显示,因此默认只显示一次。当然你也可以通过.setShowCounts(3)自定义显示的次数,调试的时候可以使用.alwaysShow(true)设置每次都显示。
NewbieGuide.with(activity)
.setLabel("guide1")
//.setShowCounts(3)//控制次数
.alwaysShow(true)//总是显示,调试时可以打开
.addGuidePage(GuidePage.newInstance()
.addHighLight(btnSimple)
.setLayoutRes(R.layout.view_guide_simple))
.show();
引入布局
setLayoutRes
方法,通常其他的类似的库都是通过代码参数来控制说明内容展示在高亮view相对的位置。
GuidePage.newInstance()
.addHighLight(btnDialog)
.setEverywhereCancelable(false)//是否点击任意位置消失引导页,默认true
.setLayoutRes(R.layout.view_guide_dialog, R.id.btn_ok)
.setOnLayoutInflatedListener(new OnLayoutInflatedListener() {
@Override
public void onLayoutInflated(View view, Controller controller) {
TextView tv = view.findViewById(R.id.tv_text);
}
})
引导页显示隐藏监听
NewbieGuide.with(FirstActivity.this)
.setLabel("listener")
.alwaysShow(true)//总是显示,调试时可以打开
.setOnGuideChangedListener(new OnGuideChangedListener() {
@Override
public void onShowed(Controller controller) {
Toast.makeText(FirstActivity.this, "引导层显示", Toast.LENGTH_SHORT).show();
}
@Override
public void onRemoved(Controller controller) {
Toast.makeText(FirstActivity.this, "引导层消失", Toast.LENGTH_SHORT).show();
}
})
.addGuidePage(GuidePage.newInstance().addHighLight(btnListener))
.show();
多引导页的监听
.setOnPageChangedListener(new OnPageChangedListener() {
@Override
public void onPageChanged(int page) {
//引导页切换,page为当前页位置,从0开始
Toast.makeText(MainActivity.this, "引导页切换:" + page, Toast.LENGTH_SHORT).show();
}
})
.addGuidePage(//添加一页引导页
GuidePage.newInstance()//创建一个实例
.addHighLight(button)//添加高亮的view
.addHighLight(tvBottom, HighLight.Shape.RECTANGLE)
.setLayoutRes(R.layout.view_guide)//设置引导页布局
.setOnLayoutInflatedListener(new OnLayoutInflatedListener() {
@Override
public void onLayoutInflated(View view, Controller controller) {
//引导页布局填充后回调,用于初始化
TextView tv = view.findViewById(R.id.textView2);
tv.setText("我是动态设置的文本");
}
})
.setEnterAnimation(enterAnimation)//进入动画
.setExitAnimation(exitAnimation)//退出动画
)
.addGuidePage(
GuidePage.newInstance()
.addHighLight(tvBottom, HighLight.Shape.RECTANGLE, 20)
.setLayoutRes(R.layout.view_guide_custom, R.id.iv)//引导页布局,点击跳转下一页或者消失引导层的控件id
.setEverywhereCancelable(false)//是否点击任意地方跳转下一页或者消失引导层,默认true
.setBackgroundColor(getResources().getColor(R.color.testColor))//设置背景色,建议使用有透明度的颜色
.setEnterAnimation(enterAnimation)//进入动画
.setExitAnimation(exitAnimation)//退出动画
)
引导页切换动画
Animation enterAnimation = new AlphaAnimation(0f, 1f);
enterAnimation.setDuration(600);
enterAnimation.setFillAfter(true);
Animation exitAnimation = new AlphaAnimation(1f, 0f);
exitAnimation.setDuration(600);
exitAnimation.setFillAfter(true);
GuidePage.setEnterAnimation(enterAnimation)//进入动画
GuidePage.setExitAnimation(exitAnimation)//退出动画