Android自定义View——滑动变色指示器

滑动变色指示器

仿今日头条滑动指示器变色

先上图，没图说个毛线

这篇先再来回顾一下自定义View的套路：

1、分析效果；
2、确定自定义属性，编写attrs.xml
3、在布局中使用
4、在自定义View中获取自定义属性
5、onMeasure()（如果继承自系统控件，一般情况不需要重写此方法）
6、onDrow画文字
7、其他

1、分析效果：

1、从上图我们可以看出这个效果分为两个部分，上面是我们所需要自定义的控件。只是需要把ViewPager所滑动的距离传递给我们自定义控件
2、自定义控件部分有两种思路可以实现，一种是先把黑色字体画出来，然后通过红色字体覆盖实现，另外一种是两把一块画布裁剪成两块，左边画黑色字体，右边画红色字体实现。两种方式大同小异。只是实现思路不同而已。

2、确定自定义属性，编写attrs.xml

1、我们使用到的无非就是两种颜色而已，一种是默认字体颜色，一种是滑动变色字体的颜色。

<declare-styleable name="SlideTextView">

        <attr name="originColor" format="color"/>
        <attr name="changeColor" format="color"/>

    </declare-styleable>

3、在布局中使用

这里只是一个简单的使用，我们后边为了通过性，会做一定的修改

<com.wn.view02.SlideTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:changeColor="#f00"
        app:originColor="#020202"/>

4、在自定义View中获取自定义属性

这里我们只需要继承自TextView即可，因为不用重写onMeasure()方法。但是onDrow方法是需要重新写的。因为默认的TextView只能是一种字体颜色。

private void initPaint(Context context, AttributeSet attrs) {
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.SlideTextView);
        int originColor = array.getColor(R.styleable.SlideTextView_originColor,getTextColors()
                .getDefaultColor());
        int changeColor = array.getColor(R.styleable.SlideTextView_changeColor,getTextColors()
                .getDefaultColor());

        originColorPaint = getPaintByColor(originColor);
        changeColorPaint = getPaintByColor(changeColor);

        array.recycle();

    }

5、onDrow画文字

分析：
1、拆分画布，画布的一般为红色，另一半为黑色。我们需要通过手指滑动的距离的百分比，来动态修改红色画布的的范围。
2、确定ViewPager移动的方向，通过方向来动态修改画布的范围。
3、并且需要把ViewPager滑动范围的百分比，传递给自定义控件

@Override
    protected void onDraw(Canvas canvas) {
//        super.onDraw(canvas);
        // 根据进度把中间值算出来
        int middle = (int) (mCurrentProgress * getWidth());
//
        if(mDirection == Direction.LEFT_TO_RIGHT){
            drawText(canvas ,changeColorPaint,0, middle);
            drawText(canvas ,originColorPaint,middle, getWidth());
        }else{
            // 右边是红色左边是黑色
            drawText(canvas, changeColorPaint, getWidth()-middle, getWidth());
            // 绘制变色
            drawText(canvas, originColorPaint, 0, getWidth()-middle);
        }

    }

    private void drawText(Canvas canvas,Paint paint,int start,int end) {
//        裁剪画布
        canvas.save();
        Rect rect = new Rect(start,0,end,getHeight());
        canvas.clipRect(rect);

        Rect bounds = new Rect();
        String text = getText().toString();
        paint.getTextBounds(text, 0, text.length(), bounds);
        int x = getWidth()/2 - bounds.width()/2;
        canvas.drawText(getText().toString(),x,getBaseline(),paint);
        canvas.restore();

    }


    private Paint getPaintByColor(int color) {
        Paint paint = new Paint();
        // 设置抗锯齿
        paint.setAntiAlias(true);
        // 防抖动
        paint.setDither(true);
        paint.setColor(color);
        paint.setTextSize(getTextSize());

        return paint;
    }

6、其他

动态设置滑动方向以及滑动范围的百分比

public void setDirection(Direction direction){
        this.mDirection = direction;
    }

    public void setCurrentProgress(float currentProgress){
        this.mCurrentProgress = currentProgress;
        invalidate();
    }

    public void setChangeColor(int changeColor) {
        this.changeColorPaint.setColor(changeColor);
    }

    public void setOriginColor(int originColor) {
        this.originColorPaint.setColor(originColor);
    }

终极使用

1、 初始化ViewPager，动态设置滑动距离以及百分比

mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                Log.e("TAG","position -> "+position +"  positionOffset -> "+positionOffset);
                // position 代表当前的位置
                // positionOffset 代表滚动的 0 - 1 百分比

                // 1.左边  位置 position
                ColorTrackTextView left = mIndicators.get(position);
                left.setDirection(ColorTrackTextView.Direction.RIGHT_TO_LEFT);
                left.setCurrentProgress(1-positionOffset);

                try {
                    ColorTrackTextView right = mIndicators.get(position + 1);
                    right.setDirection(ColorTrackTextView.Direction.LEFT_TO_RIGHT);
                    right.setCurrentProgress(positionOffset);
                }catch (Exception e){

                }
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

2、为了使用更加灵活，这里也动态添加了Tab的个数

private void initIndicator() {
        for (int i = 0; i < items.length; i++) {
            // 动态添加颜色跟踪的TextView
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);
            params.weight = 1;
            ColorTrackTextView colorTrackTextView = new ColorTrackTextView(this);
            // 设置颜色
            colorTrackTextView.setTextSize(20);
            colorTrackTextView.setChangeColor(Color.RED);
            colorTrackTextView.setText(items[i]);
            colorTrackTextView.setLayoutParams(params);
            // 把新的加入LinearLayout容器
            mIndicatorContainer.addView(colorTrackTextView);
            // 加入集合
            mIndicators.add(colorTrackTextView);
        }
    }

源码下载