ColorTrackView

原文 http://blog.csdn.net/lmj623565791/article/details/44098729

这个还加了文本高度的动态特效:
https://github.com/hongyangAndroid/ColorTrackView/blob/master/library_ColorTrackView/src/com/zhy/view/ColorTrackView.java
https://github.com/hongyangAndroid/ColorTrackView

//自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="text" format="string" />
    <attr name="text_size" format="dimension" />
    <attr name="text_origin_color" format="color|reference" />
    <attr name="text_change_color" format="color|reference" />
    <attr name="progress" format="float" />
    <attr name="direction">
        <enum name="left" value="0" />
        <enum name="right" value="1" />
    </attr>

    <declare-styleable name="ColorTrackView">
        <attr name="text" />
        <attr name="text_size" />
        <attr name="text_origin_color" />
        <attr name="text_change_color" />
        <attr name="progress" />
        <attr name="direction" />
    </declare-styleable>

</resources>

//自定义的Tab类

public class ColorTrackView extends View {

    private int mTextStartX;

    public enum Direction {
        LEFT, RIGHT;
    }

    private int mDirection = DIRECTION_LEFT;

    private static final int DIRECTION_LEFT = 0;
    private static final int DIRECTION_RIGHT = 1;

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

    private String mText = "default String";
    private Paint mPaint;
    // private int mTextSize = sp2px(30);
    private int mTextSize = (int) TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_SP, 30, getResources().getDisplayMetrics());

    private int mTextOriginColor = 0xff000000;
    private int mTextChangeColor = 0xffff0000;

    private Rect mTextBound = new Rect();
    private int mTextWidth;

    private int mRealWidth;

    private float mProgress;

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

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

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

        TypedArray ta = context.obtainStyledAttributes(attrs,
                R.styleable.ColorTrackView);
        mText = ta.getString(R.styleable.ColorTrackView_text);
        mTextSize = ta.getDimensionPixelSize(
                R.styleable.ColorTrackView_text_size, mTextSize);
        mTextOriginColor = ta.getColor(
                R.styleable.ColorTrackView_text_origin_color, mTextOriginColor);
        mTextChangeColor = ta.getColor(
                R.styleable.ColorTrackView_text_change_color, mTextChangeColor);
        mProgress = ta.getFloat(R.styleable.ColorTrackView_progress, 0);

        mDirection = ta
                .getInt(R.styleable.ColorTrackView_direction, mDirection);

        ta.recycle();

        mPaint.setTextSize(mTextSize);
        measureText();
    }

    private void measureText() {
        mTextWidth = (int) mPaint.measureText(mText);
        mPaint.getTextBounds(mText, 0, mText.length(), mTextBound); // 初始化mTextBound
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = measureWidth(widthMeasureSpec);
        int height = measureHeight(heightMeasureSpec);

        setMeasuredDimension(width, height);

        mRealWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight(); // 控件的宽度
        mTextStartX = mRealWidth / 2 - mTextWidth / 2;  //自定义 文字开始的位置, 让文字居中 

    }

    private int measureHeight(int heightMeasureSpec) {
        int mode = MeasureSpec.getMode(heightMeasureSpec);
        int val = MeasureSpec.getSize(heightMeasureSpec);
        int result = 0;
        switch (mode) {
        case MeasureSpec.EXACTLY:
            result = val;
            break;

        case MeasureSpec.AT_MOST:
        case MeasureSpec.UNSPECIFIED:
            result = mTextBound.height();
            break;
        }
        result = mode == MeasureSpec.AT_MOST ? Math.min(result, val) : result;
        return result + getPaddingTop() + getPaddingBottom();
    }

    private int measureWidth(int widthMeasureSpec) {
        int mode = MeasureSpec.getMode(widthMeasureSpec);
        int val = MeasureSpec.getSize(widthMeasureSpec);
        int result = 0;
        switch (mode) {
        case MeasureSpec.EXACTLY:
            result = val;
            break;
        case MeasureSpec.AT_MOST:
        case MeasureSpec.UNSPECIFIED:
            result = mTextWidth;
            break;
        }
        result = mode == MeasureSpec.AT_MOST ? Math.min(result, val) : result;
        return result + getPaddingLeft() + getPaddingRight();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.e("TAG","mTextStartX"+ mTextStartX);

        // mTextStartX 是文本开始的位置, 通过mProgress * mTextWidth 来计算偏移量
        // 原本的位置mTextStartX + 偏移量得到新的位置, 这个新的位置就是变换颜色的起始位置 , 也就是r 
        // 比如, 第一页切换到第二页 , 计算出起始位置r , 方向是向右, mProgress 不断变化, 
        // 不断调用drawOriginRight(canvas, r); drawChangeRight(canvas, r); 
        // 但这个r 没有用到... 后面在实际调用的时候, 每次都重新计算了这个值


        int r = (int) (mProgress * mTextWidth + mTextStartX);

        Log.e("TAG","mProgress * mTextWidth + mTextStartX"+ r);


        //默认情况下布局文件中没有设置属性的话mDirection为left
        if (mDirection == DIRECTION_LEFT) {
            drawChangeLeft(canvas, r);
            drawOriginLeft(canvas, r);
        } else { 

            //方向向右的话, 控件变换的颜色越来越少, 本色越来越多
            drawOriginRight(canvas, r);
            drawChangeRight(canvas, r);
        }
    }


    //这里的save, restore 是为了保存原色显示??
    //不太理解这段

    private void drawText(Canvas canvas, int color, int startX, int endX) {
        mPaint.setColor(color);
        canvas.save(Canvas.CLIP_SAVE_FLAG);
        canvas.clipRect(startX, 0, endX, getMeasuredHeight()); // 指定剪切此区域 填充颜色
        canvas.drawText(mText, mTextStartX, getMeasuredHeight() / 2
                + mTextBound.height() / 2, mPaint);
        canvas.restore();
    }

    /** * 第三个参数就是上面计算出来的r , 根据progress计算出不断变化的一个值, 指示变色的起始位置 * 第四个参数变色填充的结束位置mTextStartX + mTextWidth , 就是起始位置 + 字符的宽 * @param canvas * @param r */
    private void drawChangeRight(Canvas canvas, int r) {
        drawText(canvas, mTextChangeColor, (int) (mTextStartX + (1 - mProgress)
                * mTextWidth), mTextStartX + mTextWidth);
    }

    private void drawOriginRight(Canvas canvas, int r) {
        drawText(canvas, mTextOriginColor, mTextStartX,
                (int) (mTextStartX + (1 - mProgress) * mTextWidth));
    }

    private void drawOriginLeft(Canvas canvas, int r) {
        drawText(canvas, mTextOriginColor, (int) (mTextStartX + mProgress
                * mTextWidth), mTextStartX + mTextWidth);
    }

    //初始时mProgress都是0 , 于是填充的都是原色
    //而一开始第一页是选中的, 因此需要在布局文件中把progress属性设置为1, 让第一个为变换色
    //随着pager的切换, progress 变化范围就是 0- 1 或 1-0
    private void drawChangeLeft(Canvas canvas, int r) {
        drawText(canvas, mTextChangeColor, mTextStartX,
                (int) (mTextStartX + mProgress * mTextWidth));

    }

    //设置progress 且重绘
    public void setProgress(float progress) {
        this.mProgress = progress;
        invalidate();
    }

    private static final String KEY_STATE_PROGRESS = "key_progress";
    private static final String KEY_DEFAULT_STATE = "key_default_state";

    @Override
    protected Parcelable onSaveInstanceState() {
        Bundle bundle = new Bundle();
        bundle.putFloat(KEY_STATE_PROGRESS, mProgress);
        bundle.putParcelable(KEY_DEFAULT_STATE, super.onSaveInstanceState());
        return bundle;
    }

    @Override
    protected void onRestoreInstanceState(Parcelable state) {

        if (state instanceof Bundle) {
            Bundle bundle = (Bundle) state;
            mProgress = bundle.getFloat(KEY_STATE_PROGRESS);
            super.onRestoreInstanceState(bundle
                    .getParcelable(KEY_DEFAULT_STATE));
            return;
        }
        super.onRestoreInstanceState(state);
    }
}

//Activity 测试

public class MainActivity extends FragmentActivity {
    private String[] mTitles = new String[] { "简介", "评价", "相关" };
    private ViewPager mViewPager;
    private FragmentPagerAdapter mAdapter;
    private TabFragment[] mFragments = new TabFragment[mTitles.length];
    private List<ColorTrackView> mTabs = new ArrayList<ColorTrackView>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initViews();
        initDatas();
        initEvents();
    }

    private void initViews() {
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
        mTabs.add((ColorTrackView) findViewById(R.id.id_tab_01));
        mTabs.add((ColorTrackView) findViewById(R.id.id_tab_02));
        mTabs.add((ColorTrackView) findViewById(R.id.id_tab_03));
    }

    private void initDatas() {
        for (int i = 0; i < mTitles.length; i++) {
            mFragments[i] = TabFragment.newInstance(mTitles[i]);
        }

        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

            @Override
            public int getCount() {
                return mTitles.length;
            }

            @Override
            public Fragment getItem(int position) {
                return mFragments[position];
            }
        };

        mViewPager.setAdapter(mAdapter);
        mViewPager.setCurrentItem(0);
    }

    private void initEvents() {
        mViewPager.addOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }

            @Override
            public void onPageScrolled(int position, float positionOffset,
                    int positionOffsetPixels) {
                /** * 这里必须判断positionOffset > 0 , 否则, 当滑动刚完成, 比如滑动到最后一页的时候 * position改变同时positionOffset变成0 , 此时mTabs.get(position + 1) 就会下标越界, 异常退出 * 如果通过postion去判断是否是最后一页这个不现实, * 只能判断positionOffset必须大于0, 表示正在切换又符合逻辑又不会发生越界异常 */

                if (positionOffset > 0)  {
                    ColorTrackView left = mTabs.get(position);
                    ColorTrackView right = mTabs.get(position + 1);

                    left.setDirection(1);
                    right.setDirection(0);
                    Log.e("TAG",position +"---"+ positionOffset + "");

                    /*** * 页卡从左到右滑 positionOffset 0-1 * 从右到左滑 positionOffset 1-0 */

                    left.setProgress(1 - positionOffset);    //左->右 progress 1-0 , 表示有变色的部分越来越少
                    right.setProgress(positionOffset);   //左->右 progress 0-1 , 表示变色的部分越来越多 
                }

            }

            @Override
            public void onPageSelected(int arg0) {

            }

        });
    }

}

//组成ViewPager的Fragment

public class TabFragment extends Fragment {
    public static final String TITLE = "title";
    private String mTitle = "Default Title";


    /** * 获取Activity传递过来的参数 */
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if(getArguments() != null){
            mTitle = getArguments().getString(TITLE);
        }
    }

    /** * Fragment 必须复写的方法, 返回需要显示的view */

    @Override
    @Nullable
    public View onCreateView(LayoutInflater inflater,
            @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        //返回一个TextView , 背景随机, 文本居中
        TextView tv = new TextView(getActivity());
        tv.setTextSize(60);
        Random r = new Random();
        tv.setBackgroundColor(Color.argb(r.nextInt(120), r.nextInt(255), r.nextInt(255), r.nextInt(255)));
        tv.setText(mTitle);
        tv.setGravity(Gravity.CENTER);
        return tv;
    }


    public static TabFragment newInstance(String title) {
        TabFragment tabFragment = new TabFragment();
        Bundle bundle = new Bundle();
        bundle.putString(TITLE, title);
        tabFragment.setArguments(bundle);
        return tabFragment;
    }

}