转载自：www.jianshu.com/p/5e80c7aee1fc ，原作者：胡奚冰
前言：
每当一个项目开发一个新功能，总会想办法及时让用户得知有这样一个新功能，这时通常会采用引导页或者蒙版（浮层）的方式提心用户，这里有需要关注的新内容。遇到这种需求，最简单的想法就是将引导的布局直接写在对应的页面中，在首次打开时显示，之后隐藏。但是用这种做法来显示只会出现一次的布局，显然有些浪费资源。而且很low，完全体现不出OOP的编程思想。可以看到这是一个非常好的思路，通过DecorView来添加引导层，引导层的相关代码就可以从activity中抽离出来。高亮则是通过画笔的setXfermode来实现。
开始：
项目名叫 NewbieGuide
导入
先来看下如何导入项目中：
项目的build.gradle添加
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
module的build.gradle添加
dependencies {
compile 'com.github.huburt-Hu:NewbieGuide:v1.0.3'
}
原demo显示效果：
原demo的基本使用设置：
Controller controller = NewbieGuide.with(this)
.setOnGuideChangedListener(new OnGuideChangedListener() {//设置监听
@Override
public void onShowed(Controller controller) {
//引导层显示
}
@Override
public void onRemoved(Controller controller) {
//引导层消失
}
})
.setBackgroundColor(Color.BLACK)//设置引导层背景色，建议有透明度，默认背景色为：0xb2000000
.setEveryWhereCancelable(false)//设置点击任何区域消失，默认为true
.setLayoutRes(R.layout.view_guide, R.id.textView)//自定义的提示layout,第二个可变参数为点击隐藏引导层view的id
.alwaysShow(true)//是否每次都显示引导层，默认false
.build();//构建引导层的控制器
controller.resetLabel("guide1");
controller.remove();//移除引导层
controller.show();//显示引导层
其中setLayoutRes(R.layout.view_guide, R.id.textView)这个方法非常重要，第一个参数是悬浮的指导布局，但是有点缺陷，比如第二个参数传进去的是一个view的id而不是view本身，这就导致这个view无法确定其在高亮view的具体相对位置，只能用来大概猜测然后在原布局中设置Margin，很不合理。为此笔者多添加了几个继承类。
值得注意的是这些类都继承自原来类库中的类，而且它们的包必须是app.hubert.library（创建时可根据代码提示自动生成）。在MyController中我们会看到show()这个方法，这是原来Controller中的方法，用来显示引导布局，我们如果要调整布局中的控件位置就是要在这里进行的。
if(this.viewIds != null) {
int[] var3 = this.viewIds;
int var4 = var3.length;
for(int var5 = 0; var5 < var4; ++var5) {
int viewId = var3[var5];
var7.findViewById(viewId).setOnClickListener(new OnClickListener() {
public void onClick(View v) {
Controller.this.remove();
}
});
}
}
这里viewids表示用来提示的控件，比如“点击这里可进行xxx”的Textview或者其他Imageview,数组形式。上面的代码表示点击了这个view（比如“我知道了”），引导布局就会消失掉。这里var7表示的就是我们的引导界面布局了，通过findbyviewid可以找出要点击或者提示的view。所以我们可以在这里面调整view的位置，使它在高亮view的上面或者下面，list表示的就是高亮view的物理位置（屏幕位置），txt1就是要挪动的view,通过setY()方法将其移动到相关位置，下面的代码中我将它移动到了高亮控件的上面。
for(int var5 = 0; var5 < var4; ++var5) {
int viewId = var3[var5];
var7.findViewById(viewId).setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
MyController.this.remove();
}
});
if (viewId == R.id.txt1){
final TextView txt1 = (TextView) var7.findViewById(viewId);
txt1.post(new Runnable() {
@Override
public void run() {
final float offY_t = list.get(1).getRectF().top;
final float offY_b = list.get(1).getRectF().bottom;
Log.e("yang","offY:"+offY_t+" txt1.getTop():"+txt1.getY());
txt1.setY(offY_t-(offY_b-offY_t));
}
});
txt1.setText("点击这里可以进行相关操作！！！");
}
}
原来 txt1在上面，这就是引导页布局
后来调整到下面，而且变了文字信息
大家可以将Textview换成美工做的图片，比如一个手指指示，视觉效果会更好
