自定义View — 页面指示器

读人就是读自己。 — 《等一个人读书》

写在前面

最近项目又改了UI，真是一件开心的事情（微笑脸），效果图见图一，右上角有一个水平的白色线条，还有一个灰色的背景线条，就是这个东西，它是一个指示器。起初在没看到代码之前，我以为添加应用的界面类似ScrollView这种东西做的，如图二的淘宝首页轮播图下面部分，指示器和内容联动，手指滑动内容，指示器就会实时随之变化，具体效果详见淘宝首页。但是这里面有一个问题，我们项目这个界面用ViewPager写的，所以解决方案是根据页数去更新指示器位置。

图一.jpg

图二.jpg

具体实现

上面讲明了需求，现在就让我们用代码实现该指示器，创建TrackView继承自View。

public class TrackView extends View {

    // 背景色
    private int mBackColor;
    // 前景色
    private int mForeColor;
    // 背景宽度
    private int mBackWidth;
    // 前景宽度
    private int mForeWidth;
    // 高度
    private int mHeight;
  
    // 前景色距View开始距离
    private float mForeDistance;

    // 画笔
    private Paint mPaint;

    public TrackView(Context context) {
        this(context, null);
    }

    public TrackView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TrackView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(attrs);
    }

    private void init(AttributeSet attrs) {
        if (null != attrs) {
            // 获取自定义属性，获取不到则使用默认值
            TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.TrackView);
            mBackColor = typedArray.getColor(R.styleable.TrackView_back_color, Color.GRAY);
            mForeColor = typedArray.getColor(R.styleable.TrackView_fore_color, Color.WHITE);
            mBackWidth = typedArray.getDimensionPixelOffset(R.styleable.TrackView_back_width, 100);
            mForeWidth = typedArray.getDimensionPixelOffset(R.styleable.TrackView_fore_width, 50);
            mHeight = typedArray.getDimensionPixelOffset(R.styleable.TrackView_height, 10);
            // 一定要回收
            typedArray.recycle();
        } else {
            mBackColor = Color.GRAY;
            mForeColor = Color.WHITE;
            mBackWidth = 100;
            mForeWidth = 50;
            mHeight = 10;
        }
        
        // 创建画笔，设置抗锯齿
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        // 设置画笔开始和结束为圆角
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        // 设置画笔宽度
        mPaint.setStrokeWidth(mHeight);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawBackground(canvas);
        drawForeground(canvas);
    }

    /**
     * 绘制背景线条，固定的那条线
     * 需要考虑内边距
     * @param canvas
     */
    private void drawBackground(Canvas canvas) {
        mPaint.setColor(mBackColor);
        canvas.drawLine(mHeight + getPaddingLeft(),
                mHeight / 2 + getPaddingTop(),
                mHeight + getPaddingLeft() + mBackWidth,
                mHeight / 2 + getPaddingTop(),
                mPaint);
    }

    /**
     * 绘制前景线条，会动的那条线，根据mForeDistance改变位置
     * 需要考虑内边距
     * @param canvas
     */
    private void drawForeground(Canvas canvas) {
        mPaint.setColor(mForeColor);
        canvas.drawLine(mHeight + getPaddingLeft() + mForeDistance,
                mHeight / 2 +  getPaddingTop(),
                mHeight + getPaddingLeft() + mForeDistance + mForeWidth,
                mHeight / 2 + getPaddingTop(),
                mPaint);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 重新计算宽高
        int width = getSize(mHeight * 2 + mBackWidth + getPaddingLeft() + getPaddingRight(), widthMeasureSpec);
        int height = getSize(mHeight + getPaddingTop() + getPaddingBottom(), heightMeasureSpec);
        setMeasuredDimension(width, height);
    }

    private int getSize(int size, int measureSpec) {
        int result = size;
        int mode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);
        switch (mode) {
            // 如果测量模式为未知或wrap_content，则返回默认值。
            case MeasureSpec.UNSPECIFIED:
            case MeasureSpec.AT_MOST:
                result = size;
                break;
            // 如果测量模式为具体数值或match_parent，则返回具体数值。
            case MeasureSpec.EXACTLY:
                result = specSize;
                break;
            default:
                break;
        }
        return result;
    }

    /**
     * 根据页数更新指示器位置
     * @param position 当前页数
     * @param position 总页数
     */
    public void updateByPage(int position, int count) {
        float offset = mBackWidth - mForeWidth;
        mForeDistance = offset / (count - 1) * position;
        postInvalidate();
    }
}

下面是自定义属性，在/src/main/res/values/attrs.xml中。

如何使用

下面通过一个Demo演示如何使用该自定义View。

1.创建布局

使用ConstraintLayout包裹ViewPager和TrackView，指定TrackView的自定义属性。

2.创建适配器

ViewPager需要适配器才能加载内容，所以这里创建一个适配器，每一页的内容都是一个TextView。

public class ViewPagerAdapter extends PagerAdapter {

    private Context mContext;
    private List mData;

    public ViewPagerAdapter(Context context, List data) {
        mContext = context;
        mData = data;
    }

    @Override
    public int getCount() {
        return mData == null ? 0 : mData.size();
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view == object;
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

        TextView textView = new TextView(mContext);
        textView.setLayoutParams(layoutParams);
        textView.setTextColor(Color.BLACK);
        textView.setTextSize(50);
        textView.setText(mData.get(position));
        textView.setGravity(Gravity.CENTER);
        container.addView(textView);

        return textView;
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView((View) object);
    }
}

3.创建Activity

新建Activity，重写onCreate函数，调用setContentView指定布局，初始化View并调用ViewPager的addOnPageChangeListener设置页数改变监听器。

public class TrackActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

    private ViewPager mViewPager;
    private TrackView mTrackView;

    private ViewPagerAdapter mViewPagerAdapter;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_track);
        initView();
    }

    private void initView() {
        mViewPager = findViewById(R.id.view_pager);
        mTrackView = findViewById(R.id.view_track);

        List data = new ArrayList<>();
        for (int i = 0; i < 5; i ++) {
            data.add(String.format("当前页数：%s", i + 1));
        }
        mViewPagerAdapter = new ViewPagerAdapter(this, data);
        mViewPager.setAdapter(mViewPagerAdapter);
        mViewPager.addOnPageChangeListener(this);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        // 该函数为页数改变回调，通过该回调更新指示器
        mTrackView.updateByPage(position, mViewPagerAdapter.getCount());
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

运行效果如下：

运行效果.png

最后

如果这个功能让我做，强烈要求使用类似ScrollView那样的效果实现，这样指示器相当于ScrollBar，类似淘宝那样的效果，用户体验很好，这篇文章就不演示这种实现方式了，实现起来也不是很难，留给有兴趣的同学们搞。