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

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

------一个具有透明渐变效果的引导页
今天来模仿一个挺好看的引导页，至少之前不知道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。
log1

（二）在第一页向左滑动

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

（三）在第二页向左滑动

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

（四）在第二页向右滑动

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