Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器

1、概述

本篇博客的产生呢，是因为，群里的哥们暖暖给我发了个效果图，然后问我该如何实现顶部ViewPager指示器的字体变色，该效果图是这样的：

大概是今天头条的app，神奇的地方就在于，切换ViewPager页面的时候，顶部指示器改成了字体颜色的变化，个人觉得还是不错的。

那么核心的地方就是做一个支持字体这样逐渐染色就可以了，我大概想了32s，扫描了一些可能实现的方案，最终定位了一个靠谱的，下面我就带大家开始实现的征程。

实现之前贴一下我们的效果图：

2、效果图

1、简单使用

效果如上图了，关于颜失色的改变我添加了两个方向，一个是左方向，一个是有方向。

单纯的使用，可能觉得没什么意思，下面看结合ViewPager使用的一个例子。

2、结合ViewPager使用

可以看到我们切换页面的时候，上面的指示器的效果，棒棒哒~~~

当然了，学会了原理，你可以扩展，可以做个性的进度条，可以将字体变色改为背景色变色，可以把方向改为上下，太多了，自己去抠脚想把。

3、原理

看完效果图，有木有什么思路~~~花几分钟想想，因为原理很简单~~

我大致想了下，目测绘制半个字估计不行，那么就在绘制范围上下功夫，你可以全部绘制，但是我控制显示的范围，所以上述效果：

其实是绘制了两遍字体，但是呢，分别控制了绘制的显示范围，实现了逐渐变色的效果，那么对于范围的控制，有什么方便的API么，显然是有的

canvas有个clipRect的方法~~~ok，原理分析完毕~~

4、实现

说到实现，那第一步肯定又是自定义属性，我们这里的属性，需要text,textSize,textOriginColor,textChangeColor,progress，大致看一下，应该都能看出来作用吧，看不出来没事，结合下面的代码。tip:我们的View叫做ColorTrackView，感谢小七的命名。

1、自定义属性和获取

attr.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <resources>
3. <attr name="text" format="string" />
4. <attr name="text_size" format="dimension" />
5. <attr name="text_origin_color" format="color|reference" />
6. <attr name="text_change_color" format="color|reference" />
7. <attr name="progress" format="float" />
8. <attr name="direction">
9. <enum name="left" value="0" />
10. <enum name="right" value="1" />
11. </attr>
12. <declare-styleable name="ColorTrackView">
13. <attr name="text" />
14. <attr name="text_size" />
15. <attr name="text_origin_color" />
16. <attr name="text_change_color" />
17. <attr name="progress" />
18. <attr name="direction" />
19. </declare-styleable>
20. </resources>

然后在我们的ColorTrackView的构造方法中进行获取这些个渣渣属性：

1. /**
2. *
3. * @author zhy
4. *
5. */
6. public class ColorTrackView extends View
7. {
8. private int mTextStartX;
9. public enum Direction
10. {
11. LEFT , RIGHT ;
12. }
13. private int mDirection = DIRECTION_LEFT;
14. private static final int  DIRECTION_LEFT = 0 ;
15. private static final int  DIRECTION_RIGHT= 1 ;
16. public void setDirection(int direction)
17. {
18. mDirection = direction;
19. }
20. private String mText = "张鸿洋";
21. private Paint mPaint;
22. private int mTextSize = sp2px(30);
23. private int mTextOriginColor = 0xff000000;
24. private int mTextChangeColor = 0xffff0000;
25. private Rect mTextBound = new Rect();
26. private int mTextWidth;
27. private int mRealWidth;
28. private float mProgress;
29. public ColorTrackView(Context context)
30. {
31. super(context, null);
32. }
33. public ColorTrackView(Context context, AttributeSet attrs)
34. {
35. super(context, attrs);
36. mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
37. TypedArray ta = context.obtainStyledAttributes(attrs,
38. R.styleable.ColorTrackView);
39. mText = ta.getString(R.styleable.ColorTrackView_text);
40. mTextSize = ta.getDimensionPixelSize(
41. R.styleable.ColorTrackView_text_size, mTextSize);
42. mTextOriginColor = ta.getColor(
43. R.styleable.ColorTrackView_text_origin_color,
44. mTextOriginColor);
45. mTextChangeColor = ta.getColor(
46. R.styleable.ColorTrackView_text_change_color,
47. mTextChangeColor);
48. mProgress = ta.getFloat(R.styleable.ColorTrackView_progress, 0);
49. mDirection = ta.getInt(R.styleable.ColorTrackView_direction, mDirection);
50. ta.recycle();
51. mPaint.setTextSize(mTextSize);
52. measureText();
53. }

1. private void measureText()
2. {
3. mTextWidth = (int) mPaint.measureText(mText);
4. mPaint.getTextBounds(mText, 0, mText.length(), mTextBound);
5. }

可以看到我同时贴出了成员变量，大家简单看下就行了，都比较简单。

获取了属性，初始化完成一些成员变量以后，那么应该走向我们的measure之旅了~~

2、onMeasure

1. @Override
2. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
3. {
4. int width = measureWidth(widthMeasureSpec);
5. int height = measureHeight(heightMeasureSpec);
6. setMeasuredDimension(width, height);
7. mRealWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
8. mTextStartX = mRealWidth / 2 - mTextWidth / 2;
9. }
10. private int measureHeight(int measureSpec)
11. {
12. int mode = MeasureSpec.getMode(measureSpec);
13. int val = MeasureSpec.getSize(measureSpec);
14. int result = 0;
15. switch (mode)
16. {
17. case MeasureSpec.EXACTLY:
18. result = val;
19. break;
20. case MeasureSpec.AT_MOST:
21. case MeasureSpec.UNSPECIFIED:
22. result = mTextBound.height();
23. break;
24. }
25. result = mode == MeasureSpec.AT_MOST ? Math.min(result, val) : result;
26. return result + getPaddingTop() + getPaddingBottom();
27. }
28. private int measureWidth(int measureSpec)
29. {
30. int mode = MeasureSpec.getMode(measureSpec);
31. int val = MeasureSpec.getSize(measureSpec);
32. int result = 0;
33. switch (mode)
34. {
35. case MeasureSpec.EXACTLY:
36. result = val;
37. break;
38. case MeasureSpec.AT_MOST:
39. case MeasureSpec.UNSPECIFIED:
40. // result = mTextBound.width();
41. result = mTextWidth;
42. break;
43. }
44. result = mode == MeasureSpec.AT_MOST ? Math.min(result, val) : result;
45. return result + getPaddingLeft() + getPaddingRight();
46. }

关于测量，也是比较传统的写法，根据传入的widthMeasureSpec、heightMeasureSpec，利用MeasureSpec分别获取模式和值，如何是EXACTLY万事大吉，如果是AT_MOST、UNSPECIFIED那么就进行自己测量需要的空间，当然了，最好注意如果是AT_MOST不应该大于父类传入的值。

这里提一下，如果偷懒的话，可以选择继承TextView，然后测量就不需要写了，TextView默认帮你实现了，还能利用TextView的一些属性，不过咱们这个例子比较简单，我最终还是选择了继承View，继承View有种everything under control 的感觉。

测量完成以后，不用说都是绘制了。

3、onDraw

1. @Override
2. protected void onDraw(Canvas canvas)
3. {
4. super.onDraw(canvas);
5. int r = (int) (mProgress* mTextWidth +mTextStartX );
6. if(mDirection == DIRECTION_LEFT)
7. {
8. drawChangeLeft(canvas, r);
9. drawOriginLeft(canvas, r);
10. }else
11. {
12. drawOriginRight(canvas, r);
13. drawChangeRight(canvas, r);
14. }
15. }
16. private void drawChangeRight(Canvas canvas, int r)
17. {
18. drawText(canvas, mTextChangeColor, (int) (mTextStartX +(1-mProgress)*mTextWidth), mTextStartX+mTextWidth );
19. }
20. private void drawOriginRight(Canvas canvas, int r)
21. {
22. drawText(canvas, mTextOriginColor, mTextStartX, (int) (mTextStartX +(1-mProgress)*mTextWidth) );
23. }
24. private void drawChangeLeft(Canvas canvas, int r)
25. {
26. drawText(canvas, mTextChangeColor, mTextStartX, (int) (mTextStartX + mProgress * mTextWidth) );
27. }
28. private void drawOriginLeft(Canvas canvas, int r)
29. {
30. drawText(canvas, mTextOriginColor, (int) (mTextStartX + mProgress * mTextWidth), mTextStartX +mTextWidth );
31. }
32. private void drawText(Canvas canvas , int color , int startX , int endX)
33. {
34. mPaint.setColor(color);
35. canvas.save(Canvas.CLIP_SAVE_FLAG);
36. canvas.clipRect(startX, 0, endX, getMeasuredHeight());
37. canvas.drawText(mText, mTextStartX, getMeasuredHeight() / 2
38. + mTextBound.height() / 2, mPaint);
39. canvas.restore();
40. }

绘制的核心就在于利用mProgress和方向去计算应该clip的范围，具体的参考代码，没什么难点。有了范围以后，无非就是drawText~~~

该View的完整代码：http://download.csdn.net/detail/hongheqq/8515129

主要的方法介绍完毕，我们就该测试了。

5、测试

 

1、简单测试

布局文件

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. xmlns:zhy="http://schemas.android.com/apk/res-auto"
4. android:layout_width="match_parent"
5. android:layout_height="match_parent" >
6. <com.zhy.view.ColorTrackView
7. android:id="@+id/id_changeTextColorView"
8. android:layout_width="match_parent"
9. android:layout_height="wrap_content"
10. android:layout_centerInParent="true"
11. android:background="#44ff0000"
12. android:padding="10dp"
13. zhy:progress="0"
14. zhy:text="张鸿洋"
15. zhy:text_change_color="#ffff0000"
16. zhy:text_origin_color="#ff000000"
17. zhy:text_size="60sp" />
18. <LinearLayout
19. android:layout_width="match_parent"
20. android:layout_height="wrap_content"
21. android:layout_alignParentBottom="true"
22. android:gravity="center"
23. android:orientation="horizontal" >
24. <Button
25. android:id="@+id/id_left"
26. android:layout_width="wrap_content"
27. android:layout_height="wrap_content"
28. android:onClick="startLeftChange"
29. android:text="StartLeft" />
30. <Button
31. android:layout_width="wrap_content"
32. android:layout_height="wrap_content"
33. android:layout_toRightOf="@id/id_left"
34. android:onClick="startRightChange"
35. android:text="StartRight" />
36. </LinearLayout>
37. </RelativeLayout>

注意我们的自定义属性的命名空间，该布局就一个ColorTrackView，然后两个按钮来控制进度。

SimpleUseActivity:

1. package com.zhy.viewpagerIndicator;
2. import android.animation.ObjectAnimator;
3. import android.annotation.SuppressLint;
4. import android.app.Activity;
5. import android.os.Bundle;
6. import android.view.View;
7. import com.zhy.view.ColorTrackView;
8. public class SimpleUseActivity extends Activity
9. {
10. ColorTrackView mView;
11. @Override
12. protected void onCreate(Bundle savedInstanceState)
13. {
14. super.onCreate(savedInstanceState);
15. setContentView(R.layout.activity_simple_main);
16. mView = (ColorTrackView) findViewById(R.id.id_changeTextColorView);
17. }
18. @SuppressLint("NewApi")
19. public void startLeftChange(View view)
20. {
21. mView.setDirection(0);
22. ObjectAnimator.ofFloat(mView, "progress", 0, 1).setDuration(2000)
23. .start();
24. }
25. @SuppressLint("NewApi")
26. public void startRightChange(View view)
27. {
28. mView.setDirection(1);
29. ObjectAnimator.ofFloat(mView, "progress", 0, 1).setDuration(2000)
30. .start();
31. }
32. }

这里拿属性动画进行的测试，没有导入3.0以下兼容包，有需要自己导入。

效果图，见上效果图1。

2、结合ViewPager

布局文件：

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:zhy="http://schemas.android.com/apk/res-auto"
3. xmlns:tools="http://schemas.android.com/tools"
4. android:layout_width="match_parent"
5. android:layout_height="match_parent"
6. android:orientation="vertical" >
7. <LinearLayout
8. android:layout_width="match_parent"
9. android:layout_height="50dp"
10. android:orientation="horizontal" >
11. <com.zhy.view.ColorTrackView
12. android:id="@+id/id_tab_01"
13. android:layout_width="0dp"
14. android:layout_height="match_parent"
15. android:layout_weight="1"
16. zhy:progress="1"
17. zhy:text="简介"
18. zhy:text_change_color="#ffff0000"
19. zhy:text_origin_color="#ff000000"
20. zhy:text_size="18sp" />
21. <com.zhy.view.ColorTrackView
22. android:id="@+id/id_tab_02"
23. android:layout_width="0dp"
24. android:layout_height="match_parent"
25. android:layout_weight="1"
26. zhy:text="评价"
27. zhy:text_change_color="#ffff0000"
28. zhy:text_origin_color="#ff000000"
29. zhy:text_size="18sp" />
30. <com.zhy.view.ColorTrackView
31. android:id="@+id/id_tab_03"
32. android:layout_width="0dp"
33. android:layout_height="match_parent"
34. android:layout_weight="1"
35. zhy:text="相关"
36. zhy:text_change_color="#ffff0000"
37. zhy:text_origin_color="#ff000000"
38. zhy:text_size="18sp" />
39. </LinearLayout>
40. <android.support.v4.view.ViewPager
41. android:id="@+id/id_viewpager"
42. android:layout_width="match_parent"
43. android:layout_height="0dp"
44. android:layout_weight="1" >
45. </android.support.v4.view.ViewPager>
46. </LinearLayout>

3个ColorTrackView代表Tab,下面是ViewPager

ViewPagerUseActivity:

1. package com.zhy.viewpagerIndicator;
2. import java.util.ArrayList;
3. import java.util.List;
4. import android.os.Bundle;
5. import android.support.v4.app.Fragment;
6. import android.support.v4.app.FragmentActivity;
7. import android.support.v4.app.FragmentPagerAdapter;
8. import android.support.v4.view.ViewPager;
9. import android.support.v4.view.ViewPager.OnPageChangeListener;
10. import android.util.Log;
11. import com.zhy.view.ColorTrackView;
12. public class ViewPagerUseActivity extends FragmentActivity
13. {
14. private String[] mTitles = new String[] { "简介", "评价", "相关" };
15. private ViewPager mViewPager;
16. private FragmentPagerAdapter mAdapter;
17. private TabFragment[] mFragments = new TabFragment[mTitles.length];
18. private List<ColorTrackView> mTabs = new ArrayList<ColorTrackView>();
19. @Override
20. protected void onCreate(Bundle savedInstanceState)
21. {
22. super.onCreate(savedInstanceState);
23. setContentView(R.layout.activity_vp_main);
24. initViews();
25. initDatas();
26. initEvents();
27. }
28. private void initEvents()
29. {
30. mViewPager.setOnPageChangeListener(new OnPageChangeListener()
31. {
32. @Override
33. public void onPageSelected(int position)
34. {
35. }
36. @Override
37. public void onPageScrolled(int position, float positionOffset,
38. int positionOffsetPixels)
39. {
40. if (positionOffset > 0)
41. {
42. ColorTrackView left = mTabs.get(position);
43. ColorTrackView right = mTabs.get(position + 1);
44. left.setDirection(1);
45. right.setDirection(0);
46. Log.e("TAG", positionOffset+"");
47. left.setProgress( 1-positionOffset);
48. right.setProgress(positionOffset);
49. }
50. }
51. @Override
52. public void onPageScrollStateChanged(int state)
53. {
54. }
55. });
56. }
57. private void initDatas()
58. {
59. for (int i = 0; i < mTitles.length; i++)
60. {
61. mFragments[i] = (TabFragment) TabFragment.newInstance(mTitles[i]);
62. }
63. mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())
64. {
65. @Override
66. public int getCount()
67. {
68. return mTitles.length;
69. }
70. @Override
71. public Fragment getItem(int position)
72. {
73. return mFragments[position];
74. }
75. };
76. mViewPager.setAdapter(mAdapter);
77. mViewPager.setCurrentItem(0);
78. }
79. private void initViews()
80. {
81. mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
82. mTabs.add((ColorTrackView) findViewById(R.id.id_tab_01));
83. mTabs.add((ColorTrackView) findViewById(R.id.id_tab_02));
84. mTabs.add((ColorTrackView) findViewById(R.id.id_tab_03));
85. }
86. }

TabFragment

1. package com.zhy.viewpagerIndicator;
2. import java.util.Random;
3. import android.graphics.Color;
4. import android.os.Bundle;
5. import android.support.v4.app.Fragment;
6. import android.view.Gravity;
7. import android.view.LayoutInflater;
8. import android.view.View;
9. import android.view.ViewGroup;
10. import android.widget.TextView;
11. public class TabFragment extends Fragment
12. {
13. public static final String TITLE = "title";
14. private String mTitle = "Defaut Value";
15. @Override
16. public void onCreate(Bundle savedInstanceState)
17. {
18. super.onCreate(savedInstanceState);
19. if (getArguments() != null)
20. {
21. mTitle = getArguments().getString(TITLE);
22. }
23. }
24. @Override
25. public View onCreateView(LayoutInflater inflater, ViewGroup container,
26. Bundle savedInstanceState)
27. {
28. TextView tv = new TextView(getActivity());
29. tv.setTextSize(60);
30. Random r = new Random();
31. tv.setBackgroundColor(Color.argb(r.nextInt(120), r.nextInt(255),
32. r.nextInt(255), r.nextInt(255)));
33. tv.setText(mTitle);
34. tv.setGravity(Gravity.CENTER);
35. return tv;
36. }
37. public static TabFragment newInstance(String title)
38. {
39. TabFragment tabFragment = new TabFragment();
40. Bundle bundle = new Bundle();
41. bundle.putString(TITLE, title);
42. tabFragment.setArguments(bundle);
43. return tabFragment;
44. }
45. }

效果图见上效果图2。

源码下载地址:http://download.csdn.net/detail/hongheqq/8515129