前段时间看见了今日头条的tablayout,感觉相当新鲜,也比较感兴趣,效果就是下边这个

gif5新文件.gif

像这种效果应该是需要自定义的View来实现的，可以看到在滑动过程中,两个相邻的tab是有局部颜色的变换的,前一个tab部分恢复成黑色,后一个tab会部分变为红色,这取决于滑动的距离.

首先每一个tab应该都是自定义的View,因为这涉及到了局部文字变色,所以应该先定制一个能够局部文字变色的View,普通的View当然不支持啦~

先来说下思路~主要用的方法是canvas的clipRect方法,先来看下这个方法啥子意思哟..

/**
     * Intersect the current clip with the specified rectangle, which is
     * expressed in local coordinates.
     *
     * @param left   The left side of the rectangle to intersect with the
     *               current clip
     * @param top    The top of the rectangle to intersect with the current clip
     * @param right  The right side of the rectangle to intersect with the
     *               current clip
     * @param bottom The bottom of the rectangle to intersect with the current
     *               clip
     * @return       true if the resulting clip is non-empty
     */
    public boolean clipRect(int left, int top, int right, int bottom) {
        return nClipRect(mNativeCanvasWrapper, left, top, right, bottom,
                Region.Op.INTERSECT.nativeInt);
    }

解释一下，里边的四个参数裁剪范围的左上右下的位置,比较好理解,需要注意的是,使用完这个方法后需要及时的恢复绘制范围，所以完整代码如下

canvas.save();  
canvas.clipRect(left, top, right, bottom);  
//再做绘制操作例如本片要用到的drawText()
canvas.restore(); 

知道了这个方法,那么就想想怎么绘制出两种颜色的文本了,先上个图

图中的1部分为黑色,2部分为红色,那么再绘制过程中我们只需要利用clipRect这个方法,分别裁剪出1部分的范围以及2部分的范围,分别使用不同颜色绘制就OK啦~但是总体的绘制起点以及文本都是一样的,这样就看起来是一个文本两种颜色,其实我们是绘制了两边,还是比较好理解的

话不多说,直接上代码

public class ColorClipView extends View {

    private Paint paint;//画笔
    private String text = "我是不哦车网";//绘制的文本
    private int textSize = sp2px(18);//文本字体大小

    private int textWidth;//文本的宽度
    private int textHeight;//文本的高度

    private int textUnselectColor = R.color.colorPrimary;//文本未选中字体颜色
    private int textSelectedColor = R.color.colorAccent;//文本选中颜色

    private static final int DIRECTION_LEFT = 0;
    private static final int DIRECTION_RIGHT = 1;
    private static final int DIRECTION_TOP = 2;
    private static final int DIRECTION_BOTTOM = 3;

    private int mDirection = DIRECTION_LEFT;

    private Rect textRect = new Rect();//文本显示区域

    private int startX;//X轴开始绘制的坐标

    private int startY;//y轴开始绘制的坐标

    private int baseLineY;//基线的位置

    private float progress;


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

    public ColorClipView(Context context, AttributeSet attrs) {
        super(context, attrs);

        //初始化各个属性包括画笔

        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        TypedArray ta = context.obtainStyledAttributes(attrs,
                R.styleable.ColorClipView);
        text = ta.getString(R.styleable.ColorClipView_text);
        textSize = ta.getDimensionPixelSize(R.styleable.ColorClipView_text_size, textSize);
//        textUnselectColor = ta.getColor(R.styleable.ColorClipView_text_unselected_color, textUnselectColor);
//        textSelectedColor = ta.getColor(R.styleable.ColorClipView_text_selected_color, textSelectedColor);
        mDirection = ta.getInt(R.styleable.ColorClipView_direction, mDirection);
        progress = ta.getFloat(R.styleable.ColorClipView_progress, 0);
        ta.recycle();//用完就得收！
        paint.setTextSize(textSize);
    }

    private int sp2px(float dpVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
                dpVal, getResources().getDisplayMetrics());
    }

    public void setProgress(float progress) {
        this.progress = progress;
        invalidate();
    }

    public void setTextSize(int mTextSize) {
        this.textHeight = mTextSize;
        paint.setTextSize(mTextSize);
        requestLayout();
        invalidate();
    }

    public void setText(String text) {
        this.text = text;
        requestLayout();
        invalidate();
    }

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

    public void setTextUnselectColor(int unselectColor) {
        this.textUnselectColor = unselectColor;
        invalidate();
    }

    public void setTextSelectedColor(int selectedColor) {
        this.textSelectedColor = selectedColor;
        invalidate();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        measureText();//测量文本的长宽

        int width = measureWidth(widthMeasureSpec);//通过模式的不同来测量出实际的宽度
        int height = measureHeight(heightMeasureSpec);//通过模式的不同来测量出实际的高度
        setMeasuredDimension(width, height);
        startX = (getMeasuredWidth() - getPaddingRight() - getPaddingLeft()) / 2 - textWidth / 2;
        startY = (textHeight - getPaddingBottom() - getPaddingTop());
    }

    private int measureHeight(int heightMeasureSpec) {
        int mode = MeasureSpec.getMode(heightMeasureSpec);
        int size = MeasureSpec.getSize(heightMeasureSpec);
        int realSize = 0;
        switch (mode) {
            case MeasureSpec.EXACTLY:
                realSize = size;
                break;
            case MeasureSpec.AT_MOST:
            case MeasureSpec.UNSPECIFIED:
                realSize = textHeight;
                realSize += getPaddingTop() + getPaddingBottom();
                break;
        }
        realSize = mode == MeasureSpec.AT_MOST ? Math.min(realSize, size) : realSize;
        return realSize;
    }

    private int measureWidth(int widthMeasureSpec) {
        int mode = MeasureSpec.getMode(widthMeasureSpec);//通过widthMeasureSpec拿到Mode
        int size = MeasureSpec.getSize(widthMeasureSpec);//同理
        int realSize = 0;//最后返回的值
        switch (mode) {
            case MeasureSpec.EXACTLY://精确模式下直接用给出的宽度
                realSize = size;
                break;
            case MeasureSpec.AT_MOST://最大模式
            case MeasureSpec.UNSPECIFIED://未指定模式
                //这两种情况下,用测量出的宽度加上左右padding
                realSize = textWidth;
                realSize = realSize + getPaddingLeft() + getPaddingRight();
                break;
        }
        //如果mode为最大模式,不应该大于父类传入的值,所以取最小
        realSize = mode == MeasureSpec.AT_MOST ? Math.min(realSize, size) : realSize;
        return realSize;
    }

    private void measureText() {
        textWidth = (int) paint.measureText(text);//测量文本宽度
        Log.d("tag", "measureText=" + paint.measureText(text));


        //直接通过获得文本显示范围,再获得高度
        //参数里，text 是要测量的文字
        //start 和 end 分别是文字的起始和结束位置，textRect 是存储文字显示范围的对象，方法在测算完成之后会把结果写进 textRect。
        paint.getTextBounds(text, 0, text.length(), textRect);
        textHeight = textRect.height();

        //通过文本的descent线与top线的距离来测量文本高度,这是其中一种测量方法
        Paint.FontMetrics fm = paint.getFontMetrics();
        textHeight = (int) Math.ceil(fm.descent - fm.top);

        baseLineY = (int) (textHeight / 2 - (fm.bottom - fm.top) / 2 - fm.top);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //OK~开始绘制咯~
        //首先先判断方向是左还是右呢?  是上还是下呢? 真期待....
        Log.e("tag", "OnDraw");
        if (mDirection == DIRECTION_LEFT) {
            //绘制朝左的选中文字
            drawHorizontalText(canvas, textSelectedColor, startX,
                    (int) (startX + progress * textWidth));
            //绘制朝左的未选中文字
            drawHorizontalText(canvas, textUnselectColor, (int) (startX + progress
                    * textWidth), startX + textWidth);
        } else if (mDirection == DIRECTION_RIGHT) {
            //绘制朝右的选中文字
            drawHorizontalText(canvas, textSelectedColor,
                    (int) (startX + (1 - progress) * textWidth), startX
                            + textWidth);
            //绘制朝右的未选中文字
            drawHorizontalText(canvas, textUnselectColor, startX,
                    (int) (startX + (1 - progress) * textWidth));
        } else if (mDirection == DIRECTION_TOP) {
            //绘制朝上的选中文字
            drawVerticalText(canvas, textSelectedColor, startY,
                    (int) (startY + progress * textHeight));
            //绘制朝上的未选中文字
            drawVerticalText(canvas, textUnselectColor, (int) (startY + progress
                    * textHeight), startY + textHeight);
        } else {
            //绘制朝下的选中文字
            drawVerticalText(canvas, textSelectedColor,
                    (int) (startY + (1 - progress) * textHeight),
                    startY + textHeight);
            //绘制朝下的未选中文字
            drawVerticalText(canvas, textUnselectColor, startY,
                    (int) (startY + (1 - progress) * textHeight));
        }

    }

    private void drawHorizontalText(Canvas canvas, int color, int startX, int endX) {
        paint.setColor(color);
        canvas.save();
        Log.e("tag", "getMeasuredHeight" + getMeasuredHeight());
        canvas.clipRect(startX, 0, endX, getMeasuredHeight());
        canvas.drawText(text, this.startX, baseLineY, paint);
        canvas.restore();
    }

    private void drawVerticalText(Canvas canvas, int color, int startY, int endY) {
        paint.setColor(color);
        canvas.save();
        canvas.clipRect(0, startY, getMeasuredWidth(), endY);
        canvas.drawText(text, this.startX,
                this.startY, paint);
        canvas.restore();
    }
}

上边代码我自己重写了onMeasure方法,自己测量了高度与宽度,其实我么你可以直接继承TextView,这样可以不用重写onMeasure方法,直接交给TextView去测量...

还有关于绘制文字这一点,也就是drawText这个方法需要说一下

/**
     * Draw the text, with origin at (x,y), using the specified paint. The origin is interpreted
     * based on the Align setting in the paint.
     *
     * @param text The text to be drawn
     * @param x The x-coordinate of the origin of the text being drawn
     * @param y The y-coordinate of the baseline of the text being drawn
     * @param paint The paint used for the text (e.g. color, size, style)
     */
    public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint) {
        super.drawText(text, x, y, paint);
    }

上边的四个参数意思分别是,绘制文本,绘制起点X坐标,绘制起点Y坐标,用来绘制的画笔
这里的需要上一张图

如图所示,在绘制文本的时候绘制起点在左下角而不是左上角,这个需要特殊说明一下...
然后再上一张图来看下效果,这里我加了手势操作来改变文本颜色

xixi.gif

然后每个tab我们制作完了,需要把tab放到tablayout中,并且会随着滑动距离而改变相邻两个的tab的不分颜色,OK~我们有需要自定义一个继承于tablayout的View,重写addtab方法,将我们刚才的自定义View加入进去,并且加入滑动监听,从而改变颜色,直接上代码

public class ColorClipTabLayout extends TabLayout {

    private int tabTextSize;//每个tab字体大小
    private int tabSelectedTextColor;//每个tab选中字体颜色
    private int tabTextColor;//每个tab未选中颜色
    private static final int INVALID_TAB_POS = -1;

    //最后的选中位置
    private int lastSelectedTabPosition = INVALID_TAB_POS;

    private ViewPager viewPager;//所绑定的viewpager

    private ColorClipTabLayoutOnPageChangeListener colorClipTabLayoutOnPageChangeListener;


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

    public ColorClipTabLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ColorClipTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        if (attrs != null) {
            // Text colors/sizes come from the text appearance first
            final TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ColorClipTabLayout);
            //Tab字体大小
            tabTextSize = ta.getDimensionPixelSize(R.styleable.ColorClipTabLayout_text_size, 72);
            //Tab文字颜色
            tabTextColor = ta.getColor(R.styleable.ColorClipTabLayout_text_unselected_color, Color.parseColor("#000000"));
            tabSelectedTextColor = ta.getColor(R.styleable.ColorClipTabLayout_text_selected_color, Color.parseColor("#cc0000"));
            ta.recycle();
        }
    }

    @Override
    public void addTab(@NonNull Tab tab, int position, boolean setSelected) {
        //通过addTab的方式将colorClipView作为customView传入tab
        ColorClipView colorClipView = new ColorClipView(getContext());
        colorClipView.setProgress(setSelected ? 1 : 0);
        colorClipView.setText(tab.getText() + "");
        colorClipView.setTextSize(tabTextSize);
        colorClipView.setTag(position);
        colorClipView.setTextSelectedColor(tabSelectedTextColor);
        colorClipView.setTextUnselectColor(tabTextColor);
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        colorClipView.setLayoutParams(layoutParams);
        tab.setCustomView(colorClipView);
        super.addTab(tab, position, setSelected);
        int selectedTabPosition = getSelectedTabPosition();
        if ((selectedTabPosition == INVALID_TAB_POS && position == 0) || (selectedTabPosition == position)) {
            setSelectedView(position);
        }

        setTabWidth(position, colorClipView);
    }

    @Override
    public void setupWithViewPager(@Nullable ViewPager viewPager, boolean autoRefresh) {
        super.setupWithViewPager(viewPager, autoRefresh);
        try {
            if (viewPager != null)
                this.viewPager = viewPager;
            colorClipTabLayoutOnPageChangeListener = new ColorClipTabLayoutOnPageChangeListener(this);
            colorClipTabLayoutOnPageChangeListener.reset();
            viewPager.addOnPageChangeListener(colorClipTabLayoutOnPageChangeListener);
//            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    @Override
    public void removeAllTabs() {
        lastSelectedTabPosition = getSelectedTabPosition();
        super.removeAllTabs();
    }

    @Override
    public int getSelectedTabPosition() {
        final int selectedTabPositionAtParent = super.getSelectedTabPosition();
        return selectedTabPositionAtParent == INVALID_TAB_POS ?
                lastSelectedTabPosition : selectedTabPositionAtParent;
    }

    public void setLastSelectedTabPosition(int lastSelectedTabPosition) {
        lastSelectedTabPosition = lastSelectedTabPosition;
    }

    public void setCurrentItem(int position) {
        if (viewPager != null)
            viewPager.setCurrentItem(position);
    }

    private void setTabWidth(int position, ColorClipView colorClipView) {
        ViewGroup slidingTabStrip = (ViewGroup) getChildAt(0);
        ViewGroup tabView = (ViewGroup) slidingTabStrip.getChildAt(position);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);

        int w = MeasureSpec.makeMeasureSpec(0,
                MeasureSpec.UNSPECIFIED);
        int h = MeasureSpec.makeMeasureSpec(0,
                MeasureSpec.UNSPECIFIED);
        //手动测量一下
        colorClipView.measure(w, h);
        params.width = colorClipView.getMeasuredWidth() + tabView.getPaddingLeft() + tabView.getPaddingRight();
        //设置tabView的宽度
        tabView.setLayoutParams(params);
    }

    private void setSelectedView(int position) {
        final int tabCount = getTabCount();
        if (position < tabCount) {
            for (int i = 0; i < tabCount; i++) {
                getColorClipView(i).setProgress(i == position ? 1 : 0);
            }
        }
    }

    public void tabScrolled(int position, float positionOffset) {

        if (positionOffset == 0.0F) {
            return;
        }
        ColorClipView currentTrackView = getColorClipView(position);
        ColorClipView nextTrackView = getColorClipView(position + 1);
        currentTrackView.setDirection(1);
        currentTrackView.setProgress(1.0F - positionOffset);
        nextTrackView.setDirection(0);
        nextTrackView.setProgress(positionOffset);
    }

    private ColorClipView getColorClipView(int position) {
        return (ColorClipView) getTabAt(position).getCustomView();
    }

    public static class ColorClipTabLayoutOnPageChangeListener extends TabLayoutOnPageChangeListener {

        private final WeakReference<ColorClipTabLayout> mTabLayoutRef;
        private int mPreviousScrollState;
        private int mScrollState;

        public ColorClipTabLayoutOnPageChangeListener(TabLayout tabLayout) {
            super(tabLayout);
            mTabLayoutRef = new WeakReference<>((ColorClipTabLayout) tabLayout);
        }

        @Override
        public void onPageScrollStateChanged(final int state) {
            mPreviousScrollState = mScrollState;
            mScrollState = state;
        }

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            super.onPageScrolled(position, positionOffset, positionOffsetPixels);
            ColorClipTabLayout tabLayout = mTabLayoutRef.get();
            if (tabLayout == null) return;
            final boolean updateText = mScrollState != SCROLL_STATE_SETTLING ||
                    mPreviousScrollState == SCROLL_STATE_DRAGGING;
            if (updateText) {
                Log.e("tag", "positionOffset" + positionOffset);
                tabLayout.tabScrolled(position, positionOffset);
            }
        }

        @Override
        public void onPageSelected(int position) {
            super.onPageSelected(position);
            ColorClipTabLayout tabLayout = mTabLayoutRef.get();
            mPreviousScrollState = SCROLL_STATE_SETTLING;
            tabLayout.setSelectedView(position);
        }

        void reset() {
            mPreviousScrollState = mScrollState = SCROLL_STATE_IDLE;
        }

    }
}

来,看下效果

xixi2.gif

OJBK，这就是我想要的效果,话不多说,代码已经上传到github,可以下下来看一看,喜欢的可以star一下
恩,你们都是最帅的最美的...

最后推荐一波扔物线的自定义View教程,真的很有帮助HenCoder

参考:
Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器
自适应Tab宽度可以滑动文字逐渐变色的TabLayout

github地址:ColorTabLayout

下一篇算是自我学习的文章:Android的线程池