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>

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

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) {

}

});
}

}

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

}