一、前言
最近所开发的项目中需要用到引导页，在网上找了很久都没有找到适合的，于是乎就卷起袖子，撸起了代码，决定写一个完全自己的引导页库。写完之后颇有成就感，毕竟100%纯自己，无添加。写的过程中遇到不少问题，于是有了这篇笔记。本文仍然会先展示效果。然后分解实现步骤。接着一步步实现。github地址
二、展示效果
图片的选取有些糙，后续找到合适的会替换，有合适的也可以推荐
二、步骤分解
1.实现滑动的ViewPager
2.实现底部导航条
3.实现下半部分图片的变化
4.实现小猫动画
三、步骤实现
1.ViewPager,这没有什么好说的，现在的项目中基本都会用到，但我在这纠结了很久，也来来回回做了很多测试。主要纠结是用FragmentPagerAdapter还是PagerAdapter。因为只有一张图所以使用PagerAdapter是完全可以胜任的。使用PagerAdapter也会比较高效，但最后还是选择了FragmentPagerAdapter，这里有几个原因：
1.1如果用一张图片上下就是一个整体，如果上下任何一个部分有变化整个图都得变化，这样就不够灵活。
1.2找图太费劲，下半部分是纯色，这个是比较好实现的，但要找一个上半部分是图，下半部分是纯色的那就得找设计师了。
使用FragmentPagerAdapter的具体做法是把布局的上半部分用图片，下半部分透明填充，透明的原因是让背景能够显示出来，这样ViewPager才可以在最上面。滑动的时候才能触发ViewPager的滑动事件。代码比较简单，此处省略。
2.底部导航条
刚开始准备使用第三方的库，这种库有很多，但后来想了想，既然都写了，那就一撸到底部。于是就决定自己写了，其实整个过程也不复杂，只是中间有很多小的细节只有真正的去撸才能发现。
首先还是給大家说一下实现的整体思路：整个的导航条就是一个LinearLayout加一个View。它们俩利用shape资源文件设置不同的背景，比较简单，此处忽略。View的宽短设置为LinearLayout的1/n(导航页的个数),这里不是太灵活，因为，当个数改变时，还需要计算，实际可以封装一下，利用属性去控制，这样会比较规范。由于想整个库一起封装，所以暂时没有优化。
接下来看一下代码(导航条代码单独抽出)
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) vScroll.getLayoutParams();
float distance = vScroll.getWidth();
int leftDistance = 0;
if (lastOffset < positionOffset && positionOffset > 0) {
//正向
leftDistance = (int) (distance * (position));
lp.leftMargin = leftDistance + (int) (positionOffset * distance);
}
if (lastOffset > positionOffset && positionOffset > 0) {
//反向
leftDistance = (int) (distance * (position + 1));
lp.leftMargin = leftDistance + (int) ((positionOffset - 1) * distance);
｝
代码非常简单，但里面有几个需要注意的点：
1.ViewPager从第一页到第二页View滑动的距离正常的话应该是自己的宽度所以distance设置为本身的宽度。
2.positionOffset永远大于等于0，所以必须分正向和逆向,正向和逆向由上次滑动比例和本次滑动比例算出。
3.去除等于0的情况，加上会有抖动，或者与想要的效果不符
4.正向是position 逆向是position+1 .逆向时，如果当前是第二个页面，稍微往左一些potisition就会变为1.所以是position+1
5.positionOffset - 1
当运行demo时，可以注意一下打印注释，顺便关注一下上面说到的几个问题。这样会比较好理解代码为什么长这样。
3.底部图片处理
底部图片主要是透明度的变化，没有太多的难点，注意一些细节即可下面开一下主要代码（图片代码单独抽出）
int leftDistance = 0;
if (lastOffset < positionOffset && positionOffset > 0) {
//正向
if (positionOffset < 0.5) {
ivGuideDown.setImageResource(imgResDown[position]);
float alpha = 1 - 2 * positionOffset;
ivGuideDown.setAlpha(alpha < 0.2 ? 0.2f : alpha);
} else {
ivGuideDown.setImageResource(imgResDown[position+1]);
float alpha = (float) (2 * (positionOffset - 0.5));
ivGuideDown.setAlpha(alpha < 0.2 ? 0.2f : alpha);}
｝
if (lastOffset > positionOffset && positionOffset > 0) {
//反向
if (positionOffset < 0.5) {
ivGuideDown.setImageResource(imgResDown[position]);
float alpha = 1 - 2 * positionOffset;
(alpha < 0.2 ? 0.2f : alpha);
} else {
ivGuideDown.setImageResource(imgResDown[position+1]);
float alpha = 2 * (positionOffset - 0.5f);
ivGuideDown.setAlpha(alpha < 0.2 ? 0.2f : alpha);
}}
几个细节的地方
1.0.5和 2 * positionOffset,0.5是变化的节点，而透明度是0到1，所以是2 * positionOffset
2.透明度最小 0.2，当0.5或者接近。5时文字为看不到，所以这里设置最小值0.2
3.position和position+1的设定，这里建议大家多看看demo中的打印，效果会更直观
4、猫的动画
猫的动画其实很简单，就是一个帧动画。这里是真的不打算说，想了解详情的可以在github地址 中查看。
四、后记
自此文章已经结束，github地址 的下载地址已经给出，对代码有修改建议的也可以提出，相互讨论。
