打造炫酷通用的ViewPager指示器

1.概述

---

　点击打开链接

　上一期我们已经写了一篇 打造炫酷通用的ViewPager指示器 - 玩转字体变色 可是这种效果虽然绚烂可以装装A和C之间，但是在实际的大多数效果中并不常见，只是在内涵段子中有这个效果而已，那么这一期我们就用Adapter适配器模式适配所有的效果，堪称终结者。附视频地址：http://pan.baidu.com/s/1dENNO33
　　
　　

这里写图片描述

2．效果实现　

---

2.1 整合上一个实例：

　　我还是还是拿上一个实例来做演示吧。这里我贴几种常见的效果，首先声明Android自带的有这个控件叫TabLayout，大家可以自己用用试试看好用不？我也用过但是不做任何评价，自己造的轮子还是想怎么用就怎么用。

这里写图片描述

这里写图片描述

这里写图片描述

　　
　　
　　还有一些奇葩的效果如每个头部Item布局不一样，还有上面是图片下面是文字选中的效果各不相同等等，我们都要去适配。
　　
2.2 实现思路：

　　我在老早的时候用过ViewPageIndicator，还没毕业出来工作的时候，好不好用我也不做评价，就是那个时候搞了一晚上没搞出来第二天一看原来是activity的Theme主题没有配置，大家手上肯定也有类似的效果也都可以用，只是以个人的理解来自己造一个轮子。
　　2.2.1 控件肯定是继承ScrollView因为可以左右滑动，如果再去自定义ViewGroup肯定不划算。
　　2.2.2 怎样才能适合所有的效果，难道我们把所有可能出现的效果都写一遍吗？这的确不太可能，所以肯定采用Adapter适配器模式。
　　2.2.3 我们先动起来从简单的入手，先做到动态的添加不同的布局条目再说吧。 　　

2.3 自定义TrackIndicatorView动态添加布局：

　　这里为了适配所有效果，所以决定采用适配器Adapter设计模式，上面也提到过。至于什么是适配器模式大家需要看一下这个 Android设计模式源码解析之适配器(Adapter)模式 这是理论篇，但是仔细看过我博客的哥们应该知道我其实 Adapter设计模式理论与实践相结合写过很多效果和框架了。这里不做过多的讲解，写着写着看着看着就会了就理解了。

　　2.3.1 我们再也不能直接传字符串数组或是传对象数组过去让自定义View去处理了，所以我们先确定一个自定义的Adapter类，getCount() 和 getView(int position,ViewGroup parent) 先用这两个方法吧后面想到了再说。 　　

/** * Created by Darren on 2016/12/7. * Email: [e-mail] * Description:  指示器的适配器 */public abstract class IndicatorBaseAdapter{    // 获取总的条数    public abstract int getCount();    // 根据当前的位置获取View    public abstract View getView(int position,ViewGroup parent);}

　　2.3.2 然后我们来实现指示器的自定义View，TrackIndicatorView 继承自 HorizontalScrollView 。然后我们利用传递过来的Adapter再去动态的添加，我这里就直接上代码吧　　

/** * Created by Darren on 2016/12/13. * Email: [e-mail] * Description: ViewPager指示器 */public class TrackIndicatorView extends HorizontalScrollView {    // 自定义适配器    private IndicatorBaseAdapter mAdapter;    // Item的容器因为ScrollView只允许加入一个孩子    private LinearLayout mIndicatorContainer;    public TestIndicator(Context context) {        this(context, null);    }    public TestIndicator(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public TestIndicator(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        // 初始化Indicator容器用来存放item        mIndicatorContainer = new LinearLayout(context);        addView(mIndicatorContainer);    }    public void setAdapter(IndicatorBaseAdapter adapter) {        if (adapter == null) {            throw new NullPointerException("Adapter cannot be null!");        }        this.mAdapter = adapter;        // 获取Item个数        int count = mAdapter.getCount();        // 动态添加到布局容器        for (int i = 0; i < count; i++) {            View indicatorView = mAdapter.getView(i, mIndicatorContainer);            mIndicatorContainer.addView(indicatorView);        }    }}

　　效果可想而知，可以写一个Activity测试一下，目前可以动态的添加多个不同样式的布局，如果超出一个屏幕可以左右滑动，我这里就不做演示，待会一起吧。
　　
　　2.3.3 动态的制定指示器Item的宽度：
　　
　　目前我们虽然能够动态的去添加各种布局，但是Item的宽度是任意的，我们需要在布局文件中指定一屏显示多少个，如果没有指定那么就获取Item中最宽的一个，如果不够一屏显示就默认显示一屏。我们需要使用自定义属性，这里就不做过多的讲，实在不行大家就自己去看看有关自定义属性的博客或是直接google搜索一下。

    // 获取一屏显示多少个Item,默认是0    private int mTabVisibleNums = 0;    // 每个Item的宽度    private int mItemWidth = 0;    public TrackIndicatorView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        // 之前代码省略...        // 获取自定义属性值 一屏显示多少个        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.TrackIndicatorView);        mTabVisibleNums = array.getInt(R.styleable.TrackIndicatorView_tabVisibleNums,            mTabVisibleNums);        array.recycle();    }    @Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        super.onLayout(changed, l, t, r, b);        if (changed) {            // 指定Item的宽度            mItemWidth = getItemWidth();            int itemCounts = mAdapter.getCount();            for (int i = 0; i < itemCounts; i++) {                // 指定每个Item的宽度                mIndicatorContainer.getChildAt(i).getLayoutParams().width = mItemWidth;            }            Log.e(TAG, "mItemWidth -> " + mItemWidth);        }    }    /**     * 获取每一个条目的宽度     */    public int getItemWidth() {        int itemWidth = 0;        // 获取当前控件的宽度        int width = getWidth();        if (mTabVisibleNums != 0) {            // 在布局文件中指定一屏幕显示多少个            itemWidth = width / mTabVisibleNums;            return itemWidth;        }        // 如果没有指定获取最宽的一个作为ItemWidth        int maxItemWidth = 0;        int mItemCounts = mAdapter.getCount();        // 总的宽度        int allWidth = 0;        for (int i = 0; i < mItemCounts; i++) {            View itemView = mIndicatorContainer.getChildAt(i);            int childWidth = itemView.getMeasuredWidth();            maxItemWidth = Math.max(maxItemWidth, childWidth);            allWidth += childWidth;        }        itemWidth = maxItemWidth;        // 如果不足一个屏那么宽度就为  width/mItemCounts        if (allWidth < width) {            itemWidth = width / mItemCounts;        }        return itemWidth;    }

　　目前我们各种情况都测试了一下，一种是直接在布局文件中指定一屏可见显示4个，一种是不指定就默认以最大的Item的宽度为准，最后一种就是不指定又不足一个屏幕默认就显示一屏。看一下效果吧

这里写图片描述

2.4结合ViewPager
　　
　　接下来我们就需要结合ViewPager了，也就需要实现一系列重要的效果：
　　2.4.1. 当ViewPager滚动的时候头部需要自动将当前Item滚动到最中心；
　　2.4.2. 点击Item之后ViewPager能够切换到对应的页面；
　　2.4.3. 需要页面切换之后需要回调，让用户切换当前选中的状态，需要在Adapter中增加方法；
　　2.4.4. 有些效果需要加入指示器，但并不是每种效果都需要

2.4.1. 当ViewPager滚动的时候头部自动将当前Item滚动到最中心
　　我们目前不光需要Adapter，还需要一个参数就是ViewPager，需要监听ViewPager的滚动事件

    /**     * 重载一个setAdapter的方法     * @param adapter  适配器     * @param viewPager  联动的ViewPager     */    public void setAdapter(IndicatorBaseAdapter adapter, ViewPager viewPager) {        // 直接调用重载方法        setAdapter(adapter);        // 为ViewPager添加滚动监听事件        this.mViewPager = viewPager;        mViewPager.addOnPageChangeListener(this);    }    @Override    public void onPageScrolled(int position, float positionOffset,         int positionOffsetPixels) {        // 在ViewPager滚动的时候会不断的调用该方法        Log.e(TAG,"position --> "+position+"  positionOffset --> "+positionOffset);        // 在不断滚动的时候让头部的当前Item一直保持在最中心        indicatorScrollTo(position,positionOffset);    }    /**     * 不断的滚动头部     */    private void indicatorScrollTo(int position, float positionOffset) {        // 当前的偏移量        int currentOffset = (int) ((position + positionOffset) * mItemWidth);        // 原始的左边的偏移量        int originLeftOffset = (getWidth()-mItemWidth)/2;        // 当前应该滚动的位置        int scrollToOffset = currentOffset - originLeftOffset;        // 调用ScrollView的scrollTo方法        scrollTo(scrollToOffset,0);    }

　　目前我们滚动ViewPager的时候，当前指示器条目会一直保持在最中心，activity的代码我就没贴出来了，这个待会可以下载我的源码看看。我们看看效果
　　

这里写图片描述

　　2.4.2. 点击Item之后ViewPager能够切换到对应的页面

    public void setAdapter(IndicatorBaseAdapter adapter) {        if (adapter == null) {            throw new NullPointerException("Adapter cannot be null!");        }        this.mAdapter = adapter;        // 获取Item个数        int count = mAdapter.getCount();        // 动态添加到布局容器        for (int i = 0; i < count; i++) {            View indicatorView = mAdapter.getView(i, mIndicatorContainer);            mIndicatorContainer.addView(indicatorView);            switchIndicatorClick(indicatorView,i);        }    }    /**     * Indicator条目点击对应切换ViewPager     */    private void switchIndicatorClick(View indicatorView, final int position) {        indicatorView.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                if(mViewPager != null){                    // 对应切换ViewPager                    mViewPager.setCurrentItem(position);                }                // IndicatorItem对应滚动到最中心                indicatorSmoothScrollTo(position);            }        });    }    /**     * 滚动到当前的位置带动画     */    private void indicatorSmoothScrollTo(int position) {        // 当前的偏移量        int currentOffset =  ((position) * mItemWidth);        // 原始的左边的偏移量        int originLeftOffset = (getWidth()-mItemWidth)/2;        // 当前应该滚动的位置        int scrollToOffset = currentOffset - originLeftOffset;        // smoothScrollTo        smoothScrollTo(scrollToOffset,0);    }

　　我们运行起来之后会发现一个问题，我们点击会切换对应的ViewPager但是这个时候还是会调用onPageScrolled()方法，这个就比较dan疼，所以我们必须解决，如果是点击我就不让其执行onPageScrolled()里面的代码。
　　
　　2.4.3. 需要页面切换之后需要回调，让用户切换当前选中的状态，需要在Adapter中增加方法
在Adapter中增加两个回调方法，一个是高亮当前选中方法highLightIndicator(View view) ，恢复默认方法restoreIndicator(View view)，这两个方法可以不用写成抽象的，为了方便我们干脆使用泛型

/** * Created by Darren on 2016/12/7. * Email: [e-mail] * Description:  指示器的适配器 */public abstract class IndicatorBaseAdapter<Q extends View>{    // 获取总的条数    public abstract int getCount();    // 根据当前的位置获取View    public abstract Q getView(int position, ViewGroup parent);    // 高亮当前位置    public void highLightIndicator(Q indicatorView){    }    // 重置当前位置    public void restoreIndicator(Q indicatorView){    }}

TrackIndicatorView

    @Override    public void onPageSelected(int position) {        // 重置上一个位置的状态        View lastView = mIndicatorContainer.getChildAt(mCurrentPosition);        mAdapter.restoreIndicator(lastView);        // 高亮当前位置的状态        mCurrentPosition = position;        highLightIndicator(mCurrentPosition);    }    /**     * 高亮当前位置     */    private void highLightIndicator(int position) {        View currentView = mIndicatorContainer.getChildAt(position);        mAdapter.highLightIndicator(currentView);    }

这里写图片描述

　　一步两步一步两步总算是快到头了，接下来我们只需要加入指示器就可以了，当前这里面涉及到属性动画，如果不是很了解那就去看一下我的视频或者去google官网看一下吧。
　　
　　2.4.4. 有些效果需要加入指示器，但并不是每种效果都需要 　　

/** * Created by Darren on 2016/12/7. * Email: [e-mail] * Description:  指示器的容器包括下标 */public class IndicatorContainer extends RelativeLayout {    private LinearLayout mIndicatorContainer;    private Context mContext;    // 底部跟踪的View    private View mBottomTrackView;    private String TAG = "IndicatorContainer";    // 距离左边的初始距离    private int mInitLeftMargin = 0;    private RelativeLayout.LayoutParams mBottomTrackParams;    private int mTabWidth;    public IndicatorContainer(Context context) {        this(context, null);    }    public IndicatorContainer(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public IndicatorContainer(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        this.mContext = context;    }    @Override    public void addView(View child) {        if (mIndicatorContainer == null) {            // 初始化容器            mIndicatorContainer = new LinearLayout(mContext);            RelativeLayout.LayoutParams params = new LayoutParams(                    ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);            super.addView(mIndicatorContainer, params);        }        mIndicatorContainer.addView(child);    }    public int getIndicatorCount() {        return mIndicatorContainer.getChildCount();    }    public View getIndicatorAt(int index) {        return mIndicatorContainer.getChildAt(index);    }    /**     * 添加底部跟踪指示器     * @param bottomTrackView     */    public void addBottomTrackView(View bottomTrackView) {        if (bottomTrackView == null) return;        mBottomTrackView = bottomTrackView;        super.addView(mBottomTrackView);        // 指定一个规则添加到底部        mBottomTrackParams = (LayoutParams) mBottomTrackView.getLayoutParams();        mBottomTrackParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);        // 计算和指定指示器的宽度        int width = mBottomTrackParams.width;        mTabWidth = mIndicatorContainer.getChildAt(0).getLayoutParams().width;        if (width == ViewGroup.LayoutParams.MATCH_PARENT) {            width = mTabWidth;        }        // 计算跟踪的View初始左边距离        if (width < mTabWidth) {            mInitLeftMargin = (mTabWidth - width) / 2;        }        mBottomTrackParams.leftMargin = mInitLeftMargin;    }    /**     * 底部指示器移动到当前位置     */    public void bottomTrackScrollTo(int position, float offset) {        if (mBottomTrackView == null) return;        // Log.e(TAG,"position --> "+position+" offset --> "+offset);        mBottomTrackParams.leftMargin = (int) (mInitLeftMargin + (position + offset) * mTabWidth);        mBottomTrackView.setLayoutParams(mBottomTrackParams);    }    /**     * 开启一个动画移动到当前位置     */    public void smoothScrollToPosition(int position) {        if (mBottomTrackView == null) return;        // 获取当前指示器距左边的距离        final int mCurrentLeftMargin = mBottomTrackParams.leftMargin;        // 计算出最终的距离        final int finalLeftMargin = mTabWidth * position + mInitLeftMargin;        // 用于动画执行的事件        final int distance = finalLeftMargin - mCurrentLeftMargin;        // 利用属性动画不断的更新距离        ObjectAnimator animator = ObjectAnimator.ofFloat(mBottomTrackView, "leftMargin",                mCurrentLeftMargin, finalLeftMargin).setDuration(Math.abs(distance));        animator.setInterpolator(new DecelerateInterpolator());        animator.start();        // 添加动画监听不断的更新 leftMargin        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                float currentLeftMargin = (float) animation.getAnimatedValue();                // Log.e(TAG, "current --> " + currentLeftMargin);                setBottomTrackLeftMargin((int) currentLeftMargin);            }        });    }    /**     * 设置底部跟踪指示器的左边距离     */    public void setBottomTrackLeftMargin(int bottomTrackLeftMargin) {        mBottomTrackParams.leftMargin = bottomTrackLeftMargin;        mBottomTrackView.setLayoutParams(mBottomTrackParams);    }}

　最后我们看看一些奇葩的一些需求，这是录制的效果
　

这里写图片描述