一、概述
本文讲述如何自定义 TextView，使得 TextView 能切换两种颜色。最终实现效果如下图所示。
变色.jpg
二、实现步骤分析
- 继承自 TextView，做好初始化工作
- 实现一个文字两种颜色
- 实现不同朝向（左到右、右到左）
- 提供一些调用方法
- 结合 ViewPager 使用
三、具体实现
- 继承自 TextView，做好初始化工作
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ColorTrackTextView">
<attr name="originColor" format="color"/>
<attr name="changeColor" format="color"/>
</declare-styleable>
</resources>
// 1. 实现一个文字两种颜色 - 绘制不变色字体的画笔
private Paint mOriginPaint;
// 1. 实现一个文字两种颜色 - 绘制变色字体的画笔
private Paint mChangePaint;
// 1. 实现一个文字两种颜色 - 当前的进度
private float mCurrentProgress = 0.0f;
// 2.实现不同朝向
private Direction mDirection = Direction.LEFT_TO_RIGHT;
public enum Direction{
LEFT_TO_RIGHT,RIGHT_TO_LEFT
}
public ColorTrackTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initPaint(context, attrs);
}
/**
* 1.1 初始化画笔
*/
private void initPaint(Context context, AttributeSet attrs) {
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.ColorTrackTextView);
int originColor = array.getColor(R.styleable.ColorTrackTextView_originColor, getTextColors().getDefaultColor());
int changeColor = array.getColor(R.styleable.ColorTrackTextView_changeColor, getTextColors().getDefaultColor());
mOriginPaint = getPaintByColor(originColor);
mChangePaint = getPaintByColor(changeColor);
// 回收
array.recycle();
}
/**
* 1.根据颜色获取画笔
*/
private Paint getPaintByColor(int color) {
Paint paint = new Paint();
// 设置颜色
paint.setColor(color);
// 设置抗锯齿
paint.setAntiAlias(true);
// 防抖动
paint.setDither(true);
// 设置字体的大小 就是TextView的字体大小
paint.setTextSize(getTextSize());
return paint;
}
- 实现一个文字两种颜色；
- 实现不同朝向（左到右、右到左）
// 利用clipRect的API 可以裁剪 左边用一个画笔去画 右边用另一个画笔去画 不断的改变中间值
@Override
protected void onDraw(Canvas canvas) {
// 根据进度把中间值算出来
int middle = (int) (mCurrentProgress * getWidth());
// 从左变到右
if(mDirection == Direction.LEFT_TO_RIGHT) { // 左边是红色右边是黑色
// 绘制变色
drawText(canvas, mChangePaint , 0, middle);
drawText(canvas, mOriginPaint, middle, getWidth());
}else{
// 右边是红色左边是黑色
drawText(canvas, mChangePaint, getWidth()-middle, getWidth());
// 绘制变色
drawText(canvas, mOriginPaint, 0, getWidth()-middle);
}
}
/**
* 绘制Text
* @param canvas
* @param paint
* @param start
* @param end
*/
private void drawText(Canvas canvas, Paint paint, int start, int end) {
canvas.save();
// 绘制不变色
Rect rect = new Rect(start, 0, end, getHeight());
canvas.clipRect(rect);
// 我们自己来画
String text = getText().toString();
Rect bounds = new Rect();
paint.getTextBounds(text, 0, text.length(), bounds);
// 获取字体的宽度
int x = getWidth() / 2 - bounds.width() / 2;
// 基线baseLine
Paint.FontMetricsInt fontMetrics = paint.getFontMetricsInt();
int dy = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
int baseLine = getHeight() / 2 + dy;
canvas.drawText(text, x, baseLine, paint);// 这么画其实还是只有一种颜色
canvas.restore();
}
- 提供一些调用方法
public void setDirection(Direction direction){
this.mDirection = direction;
}
public void setCurrentProgress(float currentProgress){
this.mCurrentProgress = currentProgress;
invalidate();
}
public void setChangeColor(int changeColor) {
this.mChangePaint.setColor(changeColor);
}
public void setOriginColor(int originColor) {
this.mOriginPaint.setColor(originColor);
}
- 结合 ViewPager 使用
public class ViewPagerActivity extends AppCompatActivity {
private String[] items = {"首页", "推荐", "视频", "排行", "国内", "国外"};
private LinearLayout mIndicatorContainer;// 变成通用的
private List<ColorTrackTextView> mIndicators;
private ViewPager mViewPager;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_pager);
mIndicators = new ArrayList<>();
mIndicatorContainer = (LinearLayout) findViewById(R.id.indicator_view);
mViewPager = (ViewPager) findViewById(R.id.view_pager);
initIndicator();
initViewPager();
}
/**
* 初始化ViewPager
*/
private void initViewPager() {
mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return ItemFragment.newInstance(items[position]);
}
@Override
public int getCount() {
return items.length;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
}
});
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){
// 最后一个抛异常
e.printStackTrace();
}
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
/**
* 初始化可变色的指示器
*/
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);
}
}
}
public class ItemFragment extends Fragment {
public static ItemFragment newInstance(String item) {
ItemFragment itemFragment = new ItemFragment();
Bundle bundle = new Bundle();
bundle.putString("title", item);
itemFragment.setArguments(bundle);
return itemFragment;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_item, null);
TextView tv = (TextView) view.findViewById(R.id.text);
Bundle bundle = getArguments();
tv.setText(bundle.getString("title"));
return view;
}
}
四、总结
在自定义改 View 的时候，要注意 drawText() 方法中 canvas.save(); 和 canvas.restore(); 。利用 clipRect 的 API 可以裁剪，左边用一个画笔去画，右边用另一个画笔去画，不断的改变中间值，已达到变色的效果。本例中先裁剪再画，其实也可以先画后再裁剪，这需要读者自行实践。
