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);        }    }

源码下载