前言
纵观android市面上的所有APP，没有一个页面不具备欢迎引导页，可以看出引导页面的魅力有多大，引导页面能迅速抓住用户的眼球，让用户很快的了解该app的主打方向。一个好的引导页让人看了就喜欢，甚至于达到卸载重装看引导页的地步。那么，市面上的app引导页都是用什么做的呢。我大致分为3类。
1. 普通的viewpager页面
这是最普通的一种了，很多app就是这个，这个在刚开始流行的时候，可能还会感到新奇，但是，这么长时间了，人们都形成审美疲劳了（不管是开发人员还是用户，还是…）
2. 视差引导页面
这种比上一种强点，但是好像用的不多，为什么呢，因为下面第三种。这个动画看起来很炫酷，很牛B，但是越炫酷越难实现（相比较html5来说）。
3. HTML5引导页面
现在越来越多的app开始使用这种方式，HTML5在动画方面是很强大的，所以能弄出来很牛的效果。
好了，废话不多说，开始今天的学习之旅。。。
普通的ViewPager引导页面
先来张效果图看看。 
,
这里只是也演示的demo，为了省事，我就没加指示器。那么，接下来我们就说下具体的实现方法。很简单（ViewPager已经被玩烂了有木有。）
1. 在xml文件中添加
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.gl.NormalViewPager"> <android.support.v4.view.ViewPager android:id="@+id/normalviewpager" android:layout_width="match_parent" android:layout_height="match_parent"/> </RelativeLayout>
2. 编写Adapter类
因为这里没有其他元素，我们就只是添加点ImageView进来。所以代码简单点。
public class NormalPagerAdapter extends PagerAdapter {
private Context mContext;
private List<ImageView> mDatas;
public NormalPagerAdapter(Context context,List<ImageView> mDatas){
this.mContext = context;
this.mDatas = mDatas;
}
@Override
public int getCount() {
return mDatas.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view.equals(object);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager)container).removeView((ImageView) object);
}
@Override
public ImageView instantiateItem(ViewGroup container, int position) {
container.addView(mDatas.get(position));
return mDatas.get(position);
}
}viewpager都被玩烂了，上面的代码也没啥可说的，
3.初始化ViewPager，初始化视图数据、添加监听器，等等
在这一步我们能干的事就多了
private void initData() {
ImageView imageView_1 = new ImageView(this,null);
imageView_1.setBackgroundResource(R.drawable.hpw1);
ImageView imageView_2 = new ImageView(this);
imageView_2.setBackgroundResource(R.drawable.hpw2);
ImageView imageView_3 = new ImageView(this);
imageView_3.setBackgroundResource(R.drawable.hpw3);
ImageView imageView_4 = new ImageView(this);
imageView_4.setBackgroundResource(R.drawable.hpw4);
ImageView imageView_5 = new ImageView(this);
imageView_5.setBackgroundResource(R.drawable.hpw5);
mDatas = new ArrayList<>();
mDatas.add(imageView_1);
mDatas.add(imageView_2);
mDatas.add(imageView_3);
mDatas.add(imageView_4);
mDatas.add(imageView_5);
}
private void initAdapter() {
adapter = new NormalPagerAdapter(this,mDatas);
viewPager.setAdapter(adapter);
viewPager.setPageTransformer(true, new DepthPageTransformer());
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
Log.e("tag","this is offset--->"+positionOffset);
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}上面的代码就是添加个监听器，添加个切换动画什么的，相信大家还是都会的。关于ViewPager的切换动画，请移步张鸿洋
视差引导页面
在说这个之间，我先吐槽下腾讯课堂某州学院，妈的，大概今年4月份的时候，我去听免费课，他在那里将小红书，我说这个github上就有，怎么能说国内没几个人会呢？然后把链接发在了公屏上，然后。。。我TMD现在还在小黑屋。
先来2张gif图看看。其中一张是ecmobile稍微改了下，另一张是著名的小红书。 
怎么感觉背景图被打了马赛克呢？不管他了，看另一张。 
看到没，效果感觉不错吧。那么我们说下原理，原理呢其实也不难，归结为一句话：层级不同，滑动速度不同。
Ecmobile的实现
1.XML文件
由于XML代码有点多，就不贴出来了，这里给出个层级图。 
层级为3层
背景图层（像是被打了马赛克） back_image_one
layer层 内含FrameLayout，一个FrameLayout对应一个ViewPager的pager页面。我们要控制的就是FrameLayout中的元素的滑动速度。
ViewPager层
2.Adapter的实现
代码有点长，我贴instantiateItem函数。
@Override
public Object instantiateItem(ViewGroup container, int position) {
final ViewHolder holder;
holder = new ViewHolder();
View imageLayout = mInflater.inflate(R.layout.gallery_image_item, null);
holder.image = (LinearLayout) imageLayout.findViewById(R.id.gallery_image_item_view);
if(position == 4) {
holder.image.setEnabled(true);
} else {
holder.image.setEnabled(false);
}
if(position == 0) {
holder.image.removeAllViews();
View view0 = inflater.inflate(R.layout.lead_a, null);
holder.image.addView(view0);
} else if (position == 1) {
holder.image.removeAllViews();
View view1 = inflater.inflate(R.layout.lead_b, null);
holder.image.addView(view1);
} else if (position == 2) {
holder.image.removeAllViews();
View view2 = inflater.inflate(R.layout.lead_c, null);
holder.image.addView(view2);
} else if (position == 3) {
holder.image.removeAllViews();
View view3 = inflater.inflate(R.layout.lead_d, null);
holder.image.addView(view3);
} else if (position == 4) {
holder.image.removeAllViews();
View view4 = inflater.inflate(R.layout.lead_e, null);
holder.image.addView(view4);
}
((ViewPager) container).addView(imageLayout, 0);
return imageLayout;
}看看gallery_image_item.xml文件
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#00000000" android:orientation="vertical" > <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:id="@+id/gallery_image_item_view" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" > </LinearLayout> </FrameLayout> </LinearLayout>
这里在结合代码我们知道了，逻辑就是根据position，向这个布局中添加对应的视图（添加之前先要移除原来添加的）。这里要注意，这个布局是透明的，是透明的，是透明的。
看看lead_a 
,到这里，视图就搞清楚了，那么我们看代码是如何控制速度的。
3.设置，控制
我们在层级树中知道，第二层是一个横向滑动的Framelayout。所以我们需要设置每个FrameLayout的大小。如下代码:
FrameLayout.LayoutParams frameLayoutParams; ImageView layer_image_one = (ImageView) findViewById(R.id.layer_image_one); frameLayoutParams = (FrameLayout.LayoutParams) layer_image_one.getLayoutParams(); frameLayoutParams.height = dm.heightPixels; frameLayoutParams.width = dm.widthPixels; layer_image_one.setLayoutParams(frameLayoutParams);
其他几个一样。
当然，也需要设置下最下层的背景。
ImageView back_image_one = (ImageView) findViewById(R.id.back_image_one); layoutParams = back_image_one.getLayoutParams(); layoutParams.height = dm.heightPixels; layoutParams.width = dm.widthPixels; back_image_one.setLayoutParams(layoutParams);
我觉得这里设置一个就OK，因为在这里我们的背景被没有滑动。
最最关键的一点，给viewPager设置监听器，并在onPageScrolled中监听滑动并设置layer层元素的滑动。
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
float realOffset = Cubic.easeIn(positionOffset, 0, 1, 1);
total_page = adapter.getCount();
float offset = (float) ((float) (position + realOffset) * 1.0 / total_page);
int offsetPositon = (int) (backgoundWidth * offset);
float layerRealOffset = Sine.easeIn(positionOffset, 0, 1, 1);
float layerOffset = (float) ((float) (position + layerRealOffset) * 1.0 / total_page);
int layerOffsetPositon = (int) (backgoundWidth * layerOffset);
layer_srcollview.scrollTo(layerOffsetPositon, 0);
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});看下easeIn
public static float easeIn(float t,float b , float c, float d) {
return -c * (float)Math.cos(t/d * (Math.PI/2)) + c + b;
}说下上面的这个玩意。上面那个玩意就是余弦波的3PI/2到2PI的波形状，
float layerOffset = (float) ((float) (position + layerRealOffset) * 1.0 / total_page);
在+上position([0,1)),layerOffset就也到了0到1范围，波的形状是倒过来的cos波，开始的1/4段，这样就波斜率（对应速度）也就越来越快，直到停止，你们可以画图看下，这样就形成了我们上面图中看到的视差。
小红书的实现
先看下目录结构。 
其中最关键的是parallaxContainer（自定义布局）和parallaxLayoutInflater（加载布局） 
几个布局页里面都是些ImageView，发现ImageView里面有了新的属性，（这里报红没关系，还是可以编译通过切正常运行）
有哪些属性呢？看下面这个类。（ps，就不看attrs.xml文件了）
public class ParallaxViewTag {
protected int index;
protected float xIn;
protected float xOut;
protected float yIn;
protected float yOut;
protected float alphaIn;
protected float alphaOut;
}工作原理这里就不说了。上面有说到过，那么我们看看小红书是怎么实现的。
mParallaxContainer.setImage(iv_man); mParallaxContainer.setLooping(false); iv_man.setVisibility(View.VISIBLE); mParallaxContainer.setupChildren(getLayoutInflater(), R.layout.view_intro_1, R.layout.view_intro_2, R.layout.view_intro_3, R.layout.view_intro_4, R.layout.view_intro_5, R.layout.view_login);
设置中间那个人，设置子布局。我们看看setupChildren方法。
public void setupChildren(LayoutInflater inflater, int... childIds) {
if (getChildCount() > 0) {
throw new RuntimeException("setupChildren should only be called once when ParallaxContainer is empty");
}
ParallaxLayoutInflater parallaxLayoutInflater = new ParallaxLayoutInflater(
inflater, getContext());
for (int childId : childIds) {
View view = parallaxLayoutInflater.inflate(childId, this);
viewlist.add(view);
}
pageCount = getChildCount();
for (int i = 0; i < pageCount; i++) {
View view = getChildAt(i);
addParallaxView(view, i);
}
updateAdapterCount();
viewPager = new ViewPager(getContext());
viewPager.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
viewPager.setId(R.id.parallax_pager);
attachOnPageChangeListener();
viewPager.setAdapter(adapter);
addView(viewPager, 0);
}代码也不难，
将布局页加载进来
View view = parallaxLayoutInflater.inflate(childId, this); viewlist.add(view); addParallaxView(view, i);
初始化ViewPager并设置监听
viewPager = new ViewPager(getContext()); viewPager.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT)); viewPager.setId(R.id.parallax_pager); attachOnPageChangeListener(); viewPager.setAdapter(adapter); addView(viewPager, 0);
我们看下addParallaxView方法
private void addParallaxView(View view, int pageIndex) {
if (view instanceof ViewGroup) {
ViewGroup viewGroup = (ViewGroup) view;
for (int i = 0, childCount = viewGroup.getChildCount(); i < childCount; i++) {
addParallaxView(viewGroup.getChildAt(i), pageIndex);
}
}
ParallaxViewTag tag = (ParallaxViewTag) view.getTag(R.id.parallax_view_tag);
if (tag != null) {
tag.index = pageIndex;
parallaxViews.add(view);
}
}这个方法中就是用添加子view的。
接着看attachOnPageChangeListener方法。
有点长，就给出关键代码把。就是初始化了ViewPager.OnPageChangeListener监听器，并在onPageScrolled方法中根据我们的tag和偏移量来移动view。
for (View view : parallaxViews) {
tag = (ParallaxViewTag) view.getTag(R.id.parallax_view_tag);
if (tag == null) {
continue;
}
if ((pageIndex == tag.index - 1 || (isLooping && (pageIndex == tag.index
- 1 + pageCount)))
&& containerWidth != 0) {
// make visible
view.setVisibility(VISIBLE);
// slide in from right
view.setTranslationX((containerWidth - offsetPixels) * tag.xIn);
// slide in from top
view.setTranslationY(0 - (containerWidth - offsetPixels) * tag.yIn);
// fade in
view.setAlpha(1.0f - (containerWidth - offsetPixels) * tag.alphaIn / containerWidth);
} else if (pageIndex == tag.index) {
// make visible
view.setVisibility(VISIBLE);
// slide out to left
view.setTranslationX(0 - offsetPixels * tag.xOut);
// slide out to top
view.setTranslationY(0 - offsetPixels * tag.yOut);
// fade out
view.setAlpha(1.0f - offsetPixels * tag.alphaOut / containerWidth);
} else {
view.setVisibility(GONE);
}
}那么，这里频繁出现的Tag是什么时候设置的呢。仔细想想，应该是在加载的时候设置的把？那我们去看看setupChildren方法。呀，仔细一看，发现如下代码
ParallaxLayoutInflater parallaxLayoutInflater = new ParallaxLayoutInflater(
inflater, getContext());
for (int childId : childIds) {
View view = parallaxLayoutInflater.inflate(childId, this);
viewlist.add(view);
}每个子view都是通过ParallaxLayoutInflater来加载的。那么我们就去看看他.
public class ParallaxLayoutInflater extends LayoutInflater {
protected ParallaxLayoutInflater(LayoutInflater original, Context newContext) {
super(original, newContext);
setUpLayoutFactory();
}
private void setUpLayoutFactory() {
if (!(getFactory() instanceof ParallaxFactory)) {
setFactory(new ParallaxFactory(this, getFactory()));
}
}
@Override
public LayoutInflater cloneInContext(Context newContext) {
return new ParallaxLayoutInflater(this, newContext);
}
}返现构造方法中，通过setFactory方法，设置Factory为ParallaxFactory，到这里，就明白了。ParallaxFactory实现了LayoutInflater.Factory，这个接口是干什么用的。我们这个时候去看看这个的介绍 
大概的意思是可以通过实现这个接口来获取xml文件中的tag（就像小红书中的app：x_in等等），欧，到这里就明白了，由于ImageView不是我们的自定义控件，我们没法在ImageView的构造方法中获取一些值，所以我们通过实现这个接口来获取。
protected void onViewCreated(View view, Context context, AttributeSet attrs) {
int[] attrIds =
{ R.attr.a_in, R.attr.a_out, R.attr.x_in, R.attr.x_out, R.attr.y_in, R.attr.y_out, };
TypedArray a = context.obtainStyledAttributes(attrs, attrIds);
if (a != null) {
if (a.length() > 0) {
ParallaxViewTag tag = new ParallaxViewTag();
tag.alphaIn = a.getFloat(0, 0f);
tag.alphaOut = a.getFloat(1, 0f);
tag.xIn = a.getFloat(2, 0f);
tag.xOut = a.getFloat(3, 0f);
tag.yIn = a.getFloat(4, 0f);
tag.yOut = a.getFloat(5, 0f);
view.setTag(R.id.parallax_view_tag, tag);
}
a.recycle();
}
}在这个方法中，我们获取了属性并给view设置了tag，所以，在后面我们就可以通过tag来获取这些值了。
看下Adapter
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view;
if (!recycleBin.isEmpty()){
view = recycleBin.pop();
}else {
view = new View(context);
//这里注意，如果不想加前缀，请以静态的方式将包和属性导进来
view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT));
}
container.addView(view);
return view;
}恩？什么都没有的空白页？想想也没错，我们的所有逻辑都在parallaxContainer这个自定义Layout里面，图片什么的也都是，所以我们不需要ViewPager有什么东西（这里是个ecmobile那个的区别之一），我们的viewpager只负责滑动，只负责触发onPageScrolled方法，剩下的就是有view（ImageView）的setTranslationX、setTranslationY、setAlpha方法来实现。
有兴趣的去研究下或者去改造下这个吧。Github地址
HTML5实现引导页
效果确实很炫，native来实现确实难。这张gif图看起来有点卡的原因是我是加载一个微场景。实际项目中会把html5+css3+js代码放在Assest文件夹下面。有图为证 
，我们来反编译下这个apk，来验证我们。MAC下反编译APK，
我们找到如下一行代码。 
，
证明我们是对的。
关于webview就不说了。
总结
在这三种引导页中，我更倾向于第三种，必将界面更加酷炫（虽然响应速度不如native），加上现在更加流行hybrid开发（淘宝、天猫、携程、百度糯米等等），我认为在不久的以后，html5引导页将越来越流行。
如果有错误的地方，请指出。
代码地址：全世界的github
作者：全世界-gl