ViewPager+Fragment自定义View滑动条

1.实现效果图

效果：滑动的View会随着屏幕滑动而动态滑动

---

2.滑动条是一个自定义View

实现原理：ViewPager在滑动的过程中，通过对其监听，可以获取滑动的一个幅度，或者说偏移系数，我们可以通过这个偏移系数来计算需要绘制的View的上下左右的一个位置，看代码：

package com.midea.viewpagedemo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by xgq on 2016/11/3 0003.
 * 使用方法：
 * ①.写到XML布局中；
 * <com.midea.viewpagedemo.ScrollView
 * android:layout_width=“match_parent”
 * android:layout_height="自定义高度，单位dp"
 * android:id="@+id/scrollView"/>
 *
 * ②.在Activity中findViewById（int id）获取该控件，
 * 在ViewPager滑动监听回调方法onPageScrolled(int position, float offset, int arg2)
 * 中调用setOffset（int position, float offset）；
 */

public class ScrollView extends View {

    /**
     * 菜单标签个数
     */
    private int mTabNum;
    /**
     * 第一次进入activity选中的标签角标，基本为第一个，设置0
     */
    private int mCurrentNum;

    /**
     * XML文件中，当前自定义View的宽度，所有标签宽度的总和
     */
    private float mWidth;
    /**
     * 单个菜单标签宽度
     */
    private float mTabWidth;
    /**
     * ViewPager滑动的偏移量，X轴方向偏移的量0~1之间
     */
    private float mOffset;

    private Paint paint;

    public ScrollView(Context context, AttributeSet attributeSet) {
        super(context, attributeSet);

    }

    /**
     * 初始化画笔，颜色
     * @param color
     */
    public void initPaint(int color) {
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setDither(true);
        paint.setColor(getResources().getColor(color));
    }


    public void setTabNum(int n) {
        mTabNum = n;
    }

    /**
     * 第一次进入Activity需要设置默认滑动条所选中的标签，即定位滑动条
     * mOffset设置为移动初始位置，或者说X坐标0的位置
     *
     * @param n
     */
    public void setCurrentNum(int n) {
        mCurrentNum = n;
        mOffset = 0;
    }

    /**
     * 在ViewPager滑动监听的回调方法中调用
     * 滑动时，标签、偏移量都在变动
     *
     * @param position
     * @param offset
     */
    public void setOffset(int position, float offset) {
        if (offset == 0) {
            return;
        }
        mCurrentNum = position;
        mOffset = offset;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mTabWidth == 0) {
            mWidth = getWidth();
            mTabWidth = mWidth / mTabNum;
        }
        //通过一个简单的示意图来理解下原理：
        //假设当前选中的是第2个标签，则mCurrentNum=1，假设此时偏移量为0.5
        //当前有5个标签，分别对应滑动条可能在的5个位置
        //   0       1       2       3      4
        //------  ------  ------  ------  ------ 
        //              1
        //            ------                    滚动条滚动到该位置时
        //------  ---           float left   滚动条在X轴上左边的位置
        //------  ------ ---    float right  滚动条在X轴上右边的位置

        float left = mCurrentNum * mTabWidth + mOffset * mTabWid
   //   float left = (mCurrentNum + mOffset) * mTabWidth;
        final float right = left + mTabWidth;
        final float top = getPaddingTop();    //获取标签顶部边界位置
        final float bottom = getHeight();     //获取标签底部边界位置
        canvas.drawRect(left, top, right, bottom, paint);
    }

}

---

3.把自定义的View添加到XML文件中

android:layout_height=”1dp” 这个即为滑动条的高度。

    <com.midea.viewpagedemo.ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="1dp" />

---

4.在Activity中找到该控件，做相关初始化的设置

直接在Activity的写到onCreate方法中

ScrollView  scrollView = (ScrollView) findViewById(R.id.scrollView);
    scrollView.setTabNum(5);                  //设置标签个数
    scrollView.setCurrentNum(0);              //设置默认选中的标签角标
    scrollView.initPaint(R.color.colorAccent);//滑动条颜色

---

5.ViewPager的滑动监听

通过setOffset方法不断传入偏移系数，达到不断绘制View的一个实现。

 public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {

        /**
         * @param arg0 当前显示第一页的序号
         * @param arg1 一个0到1的数，用来表示当前页滑动的偏移量，数值越大，
         * 则滑动的幅度越大，这个参数用于计算自定义View绘制轨迹。
         * @param arg2
         */
        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
            //页面滑动时的监听，在这里调用自定义View的setOffset方法
             scrollView.setOffset(arg0, arg1);
        }

        @Override
        public void onPageScrollStateChanged(int arg0) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onPageSelected(int arg0) {
            setColorAndSize(tvList, arg0);
            //页面选中时的监听
        }
    }

---

6.源码下载

http://download.csdn.net/detail/a370380156/9672441