Android开发新手引导层
2020-05-16 本文已影响0人
钓星星的小鱼
新手引导是指:用户第一次使用一个新下载的APP时,使用蒙层的技术+文字或图片来提示用户如何操作 APP,或介绍界面各个按钮的用处。为的就是引导用户熟悉APP。
首先介绍一下市面上比较好用的开源的三方引导层:
1.NewbieGuide(国内开发者开发)
Android 快速实现新手引导层的库,通过简洁链式调用,一行代码实现引导层的显示。
github地址 https://github.com/huburt-Hu/NewbieGuide 当前star数2.6k
![](https://img.haomeiwen.com/i20007666/1eb8dbe62634b3af.png)
2.Highlight(国内开发者开发)
一个用于app指向性功能高亮的库
github地址 https://github.com/hongyangAndroid/Highlight 当前star数3k
![](https://img.haomeiwen.com/i20007666/72838867b9ae43d0.png)
3.GuideView(国内开发者开发)
最最轻量级的新手引导库,能够快速为任何一个View创建一个遮罩层,支持单个页面,多个引导提示,支持为高亮区域设置不同的图形,支持引导动画,方便扩展,良好支持fragment
![](https://img.haomeiwen.com/i20007666/6c029cd0e00b92af.png)
4.Spotlight
Android Library that lights items for tutorials or walk-throughs etc…
github地址 https://github.com/TakuSemba/Spotlight 当前star数2.6k
![](https://img.haomeiwen.com/i20007666/e00981477dcc0086.png)
经过对比后我选择了NewbieGuide,它的优势在于使用极其简单,单页面添加多个引导层只需配置不同xml文件即可,另外蒙层布局的位置是自己来控制的,这会避免和其他三方的屏幕适配方案冲突,从而产生位置偏移。
下面来介绍具体使用方式
1.在 app
的 build.gradle
文件中添加
//新手引导
implementation 'com.github.huburt-Hu:NewbieGuide:v2.4.0'
2.
/**
* 新手引导层 只有第一次使用 APP 才显示
*/
public void showGuide() {
//设置需要高亮的布局
ImageView drawerIv, mindIv, chapterIv, home_open_menuIv, searchIv, sendIv;
drawerIv = findViewById(R.id.drawerIv);
mindIv = findViewById(R.id.mindIv);
chapterIv = findViewById(R.id.chapterIv);
home_open_menuIv = findViewById(R.id.home_open_menuIv);
searchIv = findViewById(R.id.searchIv);
sendIv = findViewById(R.id.sendIv);
//为没个布局配置需要显示的信息 这里自定义xml即可
NewbieGuide.with(HomeActivity.this)
.setLabel("guide1")
.setShowCounts(3)//控制次数
.alwaysShow(true)//总是显示,调试时可以打开
.addGuidePage(GuidePage.newInstance()
.addHighLight(drawerIv)
.setLayoutRes(R.layout.info_known))
.addGuidePage(GuidePage.newInstance()
.addHighLight(mindIv)
.setLayoutRes(R.layout.info_mind))
.addGuidePage(GuidePage.newInstance()
.addHighLight(chapterIv)
.setLayoutRes(R.layout.info_chapter))
.addGuidePage(GuidePage.newInstance()
.addHighLight(home_open_menuIv)
.setLayoutRes(R.layout.info_takephoto))
.addGuidePage(GuidePage.newInstance()
.addHighLight(searchIv)
.setLayoutRes(R.layout.info_search)).addGuidePage(GuidePage.newInstance()
.addHighLight(sendIv)
.setLayoutRes(R.layout.info_sendphoto))
.show();
}
就这么简单新手引导层就完成啦~~