实现一个引导页的透明渐变效果

学习安卓笔记之自定义控件（五）

——一个具有透明渐变效果的引导页
　　今天来模仿一个挺好看的引导页，至少之前不知道ViewPager可以这样用，这里先看一下效果图，当然了图是盗来的- -！。

---

　　这样一看发现跟普通的引导页没有什么区别，我们再来看张GIF图片，要不没法知道要实现的是啥样的效果。没办法图片大小有限制，先来看张向右滑动的效果。这是会看见一个透明简便的效果。

---

　　再来看一张向左滑动的效果，这样可以发现在滑动ViewPager的时候会有一个透明渐变的效果。

---

　　那么如何实现这样的效果呢，我的想法是使用一个自定义布局来放置ImageView，然后通过获取ViewPager的滑动监听的偏移量来设置自定义布局中的ImageView的透明度来达到这样的效果
　　自定义布局中的代码并不多，这里就全贴出来了。

/** * Author LYJ * Created on 2016/11/29. * Time 13:41 */public class GuideImageLayout extends FrameLayout{    private static final String TAG = GuideImageLayout.class.getSimpleName();    private static ArrayList<ImageView> showItems;//显示图像的集合    private static int itemCounts;//item的数量    private ViewPager viewPager;//选项卡    private int imagePosition;//位置    public GuideImageLayout(Context context) {        this(context,null);    }    public GuideImageLayout(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    /**     * 初始化     */    private void init() {        showItems = new ArrayList<>();//数据集合用来存放ImageView    }    /**     * 设置显示的数量     * @param resID     * @return true为添加成功，false为添加失败     */    public boolean addItems(@DrawableRes int[] resID){        itemCounts = resID.length;        for (int i = 0; i < itemCounts; i++) {            ImageView imageView = new ImageView(getContext());            RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(                    ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);            imageView.setLayoutParams(params);            imageView.setBackgroundResource(resID[i]);            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);            addView(imageView);            showItems.add(imageView);        }        showItemPosition(0);        return showItems.size() == itemCounts;    }    /**     * 设置ViewPager     * @param pager     */    public void setViewPager(ViewPager pager){        this.viewPager = pager;        if (viewPager == null){            throw new NullPointerException("viewPager is null,Please setViewPager(viewPager)");        }        viewPager.addOnPageChangeListener(pagerListener);    }    private ViewPager.SimpleOnPageChangeListener pagerListener = new ViewPager.SimpleOnPageChangeListener() {        @Override        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            super.onPageScrolled(position, positionOffset, positionOffsetPixels);            if (position == imagePosition && position < itemCounts - 1) {                showItems.get(position + 1).setAlpha(positionOffset);                Log.i(TAG, "onPageScrolled: 向左滑动");            } else if (position == imagePosition - 1) {                showItems.get(position).setAlpha(positionOffset);                Log.i(TAG, "onPageScrolled: 向右滑动");            }            imagePosition = position;        }        @Override        public void onPageSelected(int position) {            super.onPageSelected(position);            showItemPosition(position);        }    };    /**     * 显示Item     * @param position     */    private void showItemPosition(int position){        for (int i = 0; i < itemCounts; i++) {            if (position == i){                showItems.get(i).setAlpha(1.0f);            }else {                showItems.get(i).setAlpha(0.0f);            }        }    }}

　　这里把这段代码的截图先展示一下。
　　
　　这里为什吗要这样写呢？这里看一下Log日志输出结果的对比。

---

（一）在第一页向右滑动

这里看一下Log日志输出的结果,这里发现输出是0，并没有变化。为什吗说是没变化呢，因为第一页的position为0。

（二）在第一页向左滑动

这里看一下Log日志输出的结果,这里发现输出是0，还是没有变化。

（三）在第二页向左滑动

这里因为第二页position为1，所以这里输出1，这里还是没有变化。那么什么时候会有变化呢。我们继续向下看。

（四）在第二页向右滑动

这时候可以发现当不是起始页的向左滑动，position会发生变化，那就是position减一，也就是在第二页向右滑动，position输出不是1而是0。到这步就可以不用测试第三个界面了因为他肯定与第二个页面log输出是相似的，我们可以直接去看最后一页。看看是否会有一些相同的变化。

（五）在最后一页向左滑动

这里呢position为3也就是当前页没有变。

（六）在最后一页向右滑动

这里呢position减小说明有滑动到前一界面的趋势。

---

综上所属于是有了这些判断。

有了这个控件接下来应该如何使用呢。大致布局如下图。

java代码中与ViewPager绑定，如下图所示。

---

代码不多，实现起来也非常简单。

---

圆点指示器参考链接：https://github.com/THEONE10211024/CircleIndicator