高仿今日头条字体渐变指示器，滑动+点击切换，如丝顺滑

引言：今日头条的指示器很炫酷，随着你的滑动字体颜色可以逐渐的变化，实现方法主要是使用自定义控件结合ViewPager。

一、ViewPager onPageChangeListener研究

OnPageChangeListener分析：ViewPager在处理滑动事件的时候要用到OnPageChangeListener，OnPageChangeListener这个接口需要实现三个方法：（onPageScrollStateChanged、onPageScrolled 、onPageSelected）

实现代码如下，在每个函数中都加入了Log：

public class SelectOnPageChangeListener implements OnPageChangeListener {private boolean  checkIfScroll = false; public void onPageScrollStateChanged(int arg0) {if (DEBUG) {Log.d(TAG, "onPageScrollStateChanged:arg0=" + arg0);}if(arg0 == 1){checkIfScroll = true;} else if (arg0 == 0){checkIfScroll = false;}}@Overridepublic void onPageScrolled(int position, float positionOffset,int positionOffsetPixels) {if(checkIfScroll){if (positionOffset > 0) {ColorTrackView left = colorTrackViews.get(position);ColorTrackView right = colorTrackViews.get(position + 1);left.setDirection(1);right.setDirection(0);if (DEBUG) {Log.d(TAG, "onPageScrolled:positionOffset="+ positionOffset + "|" + "position=" + position);}left.setProgress(1 - positionOffset);right.setProgress(positionOffset);}}}public void onPageSelected(int arg0) {if (DEBUG) {Log.d(TAG, "onPageSelected:arg0=" + arg0);}}}

操作步骤为从第一个页面滑动到第二个页面，运行Demo得到如下Log信息：

04-26 05:36:55.448: D/LearnActivity(1180): fragments size=504-26 05:36:55.580: W/EGL_genymotion(1180): eglSurfaceAttrib not implemented<strong>04-26 05:37:02.396: D/LearnActivity(1180): onPageScrollStateChanged:arg0=1</strong>04-26 05:37:02.412: D/LearnActivity(1180): onPageScrolled:positionOffset=0.009722223|position=004-26 05:37:02.432: D/LearnActivity(1180): onPageScrolled:positionOffset=0.027777778|position=004-26 05:37:02.452: D/LearnActivity(1180): onPageScrolled:positionOffset=0.044444446|position=0......(省略一部分Log)04-26 05:37:05.364: D/LearnActivity(1180): onPageScrolled:positionOffset=0.73888886|position=0<strong>04-26 05:37:05.364: D/LearnActivity(1180): onPageScrollStateChanged:arg0=204-26 05:37:05.364: D/LearnActivity(1180): onPageSelected:arg0=1</strong>04-26 05:37:05.380: D/LearnActivity(1180): onPageScrolled:positionOffset=0.76666665|position=004-26 05:37:05.396: D/LearnActivity(1180): onPageScrolled:positionOffset=0.79583335|position=004-26 05:37:05.412: D/LearnActivity(1180): onPageScrolled:positionOffset=0.825|position=0......(省略一部分Log)04-26 05:37:05.728: D/LearnActivity(1180): onPageScrolled:positionOffset=0.99722224|position=004-26 05:37:05.748: D/LearnActivity(1180): onPageScrolled:positionOffset=0.9986111|position=0<strong>04-26 05:37:06.012: D/LearnActivity(1180): onPageScrollStateChanged:arg0=0</strong>

1.onPageScrollStateChanged(int arg0)  

此方法是在状态改变的时候调用，其中arg0这个参数有三种状态（0、1、2），由上面的Log可以知道当你滑动页面的时候，调用顺序为1，2，0。

0表示滑动完毕，1表示按下状态， 2表示手指抬起状态。当按下ViewPager的页面时onPageScrollStateChanged:arg0=1，这有助于我们区别你是滑动页面还是点击上部文字头标切换，从而修复ColorTrackView点击头标切换文字绘制变乱的bug。

2.onPageSelected(int arg0)

此方法当你抬起手指 onPageScrollStateChanged:arg0=2后马上触发onPageSelected:arg0=1，其中的参数arg0代表选中的页面。

3.onPageScrolled(int position, float positionOffset, int positionOffsetPixels) 

当页面被按下这个方法就开始执行，直到页面滑动结束onPageScrollStateChanged:arg0=0，期间都会调用。

其中三个参数的含义分别为：

position：当前可见页面的第一个页面，也可以理解为当前滑动页面的前一个页面position。我们从第一个页面滑动到第二个页面，这也是我们上面Log打印出来的信息为什么position=0的缘故，而不是我们想当然的觉得position为1。

positionOffset：页面偏移的百分比（取值0到1之间）

positionOffsetPixels：页面偏移的像素位置

二、使用ColorTrackView打造文字渐变指示器

首先感谢张鸿洋，这个自定义控件是他写的，具体地址在这里：http://blog.csdn.net/lmj623565791/article/details/44098729，我把他的这个控件代码稍微优化了一下，去除了一些没用的代码，并添加了一些注释，这个控件主要是使用了自定义View中的两步，测量和绘制也就是onMeasure和onDraw。

我们来看一下文字的绘制起点，这里用高度表示，宽度道理是一样的。这两行代码计算后正好是我们的文字绘制起点，图中的大红点。代码如下：

mTextStartX = mRealWidth / 2 - mTextWidth / 2;

canvas.drawText((String) mText, mTextStartX, getMeasuredHeight() / 2 + mTextBound.height() / 2, mPaint);

下面是各部分代码。完整的DEMO可下载。附上效果图：

点此下载

1.values下面的文件

attrs.xml

<?xml version="1.0" encoding="utf-8"?><resources>       <declare-styleable name="ColorTrackView">        <attr name="text" format="string" />        <attr name="textSize" format="dimension" />        <attr name="textOriginColor" format="color|reference" />        <attr name="textChangeColor" format="color|reference" />        <attr name="progress" format="float" />        <attr name="direction">            <enum name="left" value="0" />            <enum name="right" value="1" />        </attr>    </declare-styleable></resources>

colors.xml

<?xml version="1.0" encoding="utf-8"?><resources><color name="MyWhite">#FFFFF0F5</color><color name="MyDarkRed">#FF961F21</color><color name="MyActiveColor">#F26C4F</color> <color name="MyGray">#50696969</color><!-- 纳瓦白/土著白 -->    <color name="navajo_white">#FFDEAD</color>     <color name="black">#000000</color>     <color name="gray">#696969</color></resources>

dimens.xml

<resources>    <dimen name="activity_horizontal_margin">6dp</dimen>    <dimen name="activity_vertical_margin">6dp</dimen><dimen name="font_size_title">20sp</dimen><dimen name="font_size_normal">18sp</dimen><dimen name="font_size_big">40sp</dimen><dimen name="font_size_biger">60sp</dimen><dimen name="font_size_center">16sp</dimen><dimen name="font_size_small">13sp</dimen><dimen name="font_size_cursor">12sp</dimen></resources>

strings.xml

<?xml version="1.0" encoding="utf-8"?><resources>    <string name="app_name">CompleteTrackColorViewDemo</string>    <string name="hello_world">Hello world!</string>    <string name="action_settings">Settings</string></resources>

2.AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.example.completetrackcolorviewdemo"    android:versionCode="1"    android:versionName="1.0" >    <uses-sdk        android:minSdkVersion="14"        android:targetSdkVersion="21" />    <application        android:allowBackup="true"        android:icon="@drawable/ic_launcher"        android:label="@string/app_name"        android:theme="@android:style/Theme.NoTitleBar" >        <activity            android:name=".LearnActivity"            android:label="@string/app_name" >            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application></manifest>

3.layout下的文件

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:lhw="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:background="@color/MyWhite" >    <include layout="@layout/top_bar" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="30dp"        android:background="@color/MyGray"        android:gravity="center_vertical"        android:orientation="horizontal"        android:weightSum="5.0" >        <com.example.completetrackcolorviewdemo.ColorTrackView            android:id="@+id/ctv_1"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_weight="1.0"            lhw:text="DEMO"            lhw:textSize="@dimen/font_size_center"            lhw:textChangeColor="@color/MyDarkRed"            lhw:textOriginColor="@color/black"            lhw:progress="1.0" />                <com.example.completetrackcolorviewdemo.ColorTrackView            android:id="@+id/ctv_2"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_weight="1.0"            lhw:text="DEMO"            lhw:textSize="@dimen/font_size_center"            lhw:textChangeColor="@color/MyDarkRed"            lhw:textOriginColor="@color/black" />               <com.example.completetrackcolorviewdemo.ColorTrackView            android:id="@+id/ctv_3"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_weight="1.0"            lhw:text="DEMO"            lhw:textSize="@dimen/font_size_center"            lhw:textChangeColor="@color/MyDarkRed"            lhw:textOriginColor="@color/black" />                <com.example.completetrackcolorviewdemo.ColorTrackView            android:id="@+id/ctv_4"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_weight="1.0"            lhw:text="DEMO"            lhw:textSize="@dimen/font_size_center"            lhw:textChangeColor="@color/MyDarkRed"            lhw:textOriginColor="@color/black" />                <com.example.completetrackcolorviewdemo.ColorTrackView            android:id="@+id/ctv_5"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_weight="1.0"            lhw:text="DEMO"            lhw:textSize="@dimen/font_size_center"            lhw:textChangeColor="@color/MyDarkRed"            lhw:textOriginColor="@color/black" />           </LinearLayout>    <android.support.v4.view.ViewPager        android:id="@+id/vp_activity_main"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="center"        android:flipInterval="30"        android:persistentDrawingCache="animation" />    </LinearLayout>

fragment.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/gray"    android:gravity="center"    android:orientation="vertical" >    <TextView        android:id="@+id/tv_fragment"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:textColor="@color/MyActiveColor"        android:textSize="@dimen/font_size_center" /></LinearLayout>

top_bar.xml

<?xml version="1.0" encoding="utf-8"?><merge xmlns:android="http://schemas.android.com/apk/res/android" >    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="48dp"        android:background="@color/MyDarkRed" >        <TextView            android:id="@+id/tv_title_back"            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:clickable="true"            android:gravity="center"            android:text="loading"            android:layout_marginLeft="@dimen/activity_horizontal_margin"            android:textColor="@color/black"            android:textSize="@dimen/font_size_title" />    </RelativeLayout></merge>

4.src下的代码片段

ColorTrackView.java

package com.example.completetrackcolorviewdemo;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.Rect;import android.util.AttributeSet;import android.view.View;public class ColorTrackView extends View {private static final int DIRECTION_LEFT = 0;private static final int DIRECTION_RIGHT = 1;//以下定义一些默认的变量private int mDirection = DIRECTION_LEFT;private int mTextStartX;private Paint mPaint;private int mTextOriginColor = 0xffffff;//字体改变前的颜色private int mTextChangeColor = 0xff0000;//字体改变中的颜色private String mText = "xx"; private int mTextSize = DisplayUtil.dip2px(getContext(), 30); //字体大小private int mTextWidth; private int mRealWidth;private float mProgress; // 进度，从0到1之间取值private Rect mTextBound = new Rect();public ColorTrackView(Context context) {super(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_textSize, mTextSize); mTextOriginColor = ta.getColor(R.styleable.ColorTrackView_textOriginColor,mTextOriginColor);mTextChangeColor = ta.getColor(R.styleable.ColorTrackView_textChangeColor,mTextChangeColor);mProgress = ta.getFloat(R.styleable.ColorTrackView_progress, 0);mDirection = ta.getInt(R.styleable.ColorTrackView_direction,mDirection);ta.recycle();mPaint.setTextSize(mTextSize); }private void measureText() {mTextWidth = (int) mPaint.measureText(mText);//这个函数可以获取最小的包裹文字矩形，赋值到mTextBoundmPaint.getTextBounds(mText, 0,mText.length(), mTextBound);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int width = measureWidth(widthMeasureSpec);int height = measureHeight(heightMeasureSpec);setMeasuredDimension(width, height);measureText();mRealWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();mTextStartX = mRealWidth / 2 - mTextWidth / 2;}private int measureHeight(int measureSpec) {int mode = MeasureSpec.getMode(measureSpec);int val = MeasureSpec.getSize(measureSpec);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 measureSpec) {int mode = MeasureSpec.getMode(measureSpec);int val = MeasureSpec.getSize(measureSpec);int result = 0;switch (mode) {case MeasureSpec.EXACTLY:result = val;break;case MeasureSpec.AT_MOST:case MeasureSpec.UNSPECIFIED:result = mTextBound.width();break;}result = mode == MeasureSpec.AT_MOST ? Math.min(result, val) : result;return result + getPaddingLeft() + getPaddingRight();}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);if (mDirection == DIRECTION_LEFT) {drawChangeLeft(canvas);drawOriginLeft(canvas);} else if (mDirection == DIRECTION_RIGHT) {drawOriginRight(canvas);drawChangeRight(canvas);} else {System.out.println("ColorTrackView direction error");}}private void drawChangeRight(Canvas canvas) {drawText(canvas, mTextChangeColor, (int) (mTextStartX + (1 - mProgress)* mTextWidth), mTextStartX + mTextWidth);}private void drawOriginRight(Canvas canvas) {drawText(canvas, mTextOriginColor, mTextStartX,(int) (mTextStartX + (1 - mProgress) * mTextWidth));}private void drawChangeLeft(Canvas canvas) {drawText(canvas, mTextChangeColor, mTextStartX,(int) (mTextStartX + mProgress * mTextWidth));}private void drawOriginLeft(Canvas canvas) {drawText(canvas, mTextOriginColor, (int) (mTextStartX + mProgress* mTextWidth), mTextStartX + mTextWidth);}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((String) mText, mTextStartX, getMeasuredHeight()/ 2 + mTextBound.height() / 2, mPaint);canvas.restore();}public int getDirection() {return mDirection;}public void setDirection(int mDirection) {this.mDirection = mDirection;invalidate(); //重新改变方向，需要重绘}public int getTextOriginColor() {return mTextOriginColor;}public void setTextOriginColor(int mTextOriginColor) {this.mTextOriginColor = mTextOriginColor;invalidate(); //改变原始颜色，需要重绘}public int getTextChangeColor() {return mTextChangeColor;}public void setTextChangeColor(int mTextChangeColor) {this.mTextChangeColor = mTextChangeColor;invalidate();//改变变化中的颜色，需要重绘}public String getText() {return mText;}public void setText(String mText) {this.mText = mText;}public int getTextSize() {return mTextSize;}public void setTextSize(int mTextSize) {this.mTextSize = mTextSize;requestLayout();//改变字体大小，重新布局invalidate();//改变字体大小，需要重绘}public float getProgress() {return mProgress;}public void setProgress(float mProgress) {this.mProgress = mProgress;invalidate();//改变进度，需要重绘，实现字体渐变的效果}}

工具类DisplayUtil.java

package com.example.completetrackcolorviewdemo;import android.content.Context;public class DisplayUtil {/** * 根据手机的分辨率从 dp 的单位 转成为 px(像素) */public static int dip2px(Context context, float dpValue) {final float scale = context.getResources().getDisplayMetrics().density;return (int) (dpValue * scale + 0.5f);}/** * 根据手机的分辨率从 px(像素) 的单位 转成为 dp */public static int px2dip(Context context, float pxValue) {final float scale = context.getResources().getDisplayMetrics().density;return (int) (pxValue / scale + 0.5f);}}

LearnActivity.java

package com.example.completetrackcolorviewdemo;import java.util.ArrayList;import java.util.List;//import android.content.Context;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.Log;import android.view.View;import android.view.View.OnClickListener;import android.widget.TextView;public class LearnActivity extends FragmentActivity {private String TAG = "LearnActivity";private boolean DEBUG = true;private TextView tv_back_learn_activity;private ColorTrackView ctv_1, ctv_3, ctv_2,ctv_4, ctv_5;private ViewPager vp_learn_activity;private List<Fragment> fragments;// Tab页面列表private List<ColorTrackView> colorTrackViews; // Tab页面头标列表// private Context context;// 上下文@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);// context = LearnActivity.this;initView();setListener();}private void initView() {tv_back_learn_activity = (TextView) findViewById(R.id.tv_title_back);ctv_1 = (ColorTrackView) findViewById(R.id.ctv_1);ctv_2 = (ColorTrackView) findViewById(R.id.ctv_2);ctv_3 = (ColorTrackView) findViewById(R.id.ctv_3);ctv_4 = (ColorTrackView) findViewById(R.id.ctv_4);ctv_5 = (ColorTrackView) findViewById(R.id.ctv_5);tv_back_learn_activity.setText("学习DEMO");colorTrackViews = new ArrayList<ColorTrackView>();colorTrackViews.add(ctv_1);colorTrackViews.add(ctv_2);colorTrackViews.add(ctv_3);colorTrackViews.add(ctv_4);colorTrackViews.add(ctv_5);InitViewPager();}private void InitViewPager() {vp_learn_activity = (ViewPager) findViewById(R.id.vp_activity_main);fragments = new ArrayList<Fragment>();// 后面用对应的数据去填充MyFragement，这里仅仅作为一个测试循环添加for (int i = 0; i < 5; i++) {MyFragment fragment = new MyFragment(i);fragments.add(fragment);}if (DEBUG) {Log.d(TAG, "fragments size=" + fragments.size());}vp_learn_activity.setAdapter(new SelectFragmentPagerAdapter(getSupportFragmentManager(), fragments));vp_learn_activity.setCurrentItem(0);vp_learn_activity.setOnPageChangeListener(new SelectOnPageChangeListener());}/** * 头标点击监听 */private class SelectOnClickListener implements OnClickListener {private int index = 0;public SelectOnClickListener(int i) {index = i;}public void onClick(View v) {vp_learn_activity.setCurrentItem(index);changeColorTrackViewColor(index);}}private void setListener() {tv_back_learn_activity.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {LearnActivity.this.finish();}});ctv_1.setOnClickListener(new SelectOnClickListener(0));ctv_2.setOnClickListener(new SelectOnClickListener(1));ctv_3.setOnClickListener(new SelectOnClickListener(2));ctv_4.setOnClickListener(new SelectOnClickListener(3));ctv_5.setOnClickListener(new SelectOnClickListener(4));}/** * 改变选中ColorTrackView的文字颜色 *  * @param index *            表示选中的是那个标签（0、1、2、3） */private void changeColorTrackViewColor(int index) {ctv_1.setDirection(0);ctv_1.setProgress(((index == 0) ? 1.0f : 0));ctv_2.setDirection(0);ctv_2.setProgress(((index == 1) ? 1.0f : 0));ctv_3.setDirection(0);ctv_3.setProgress(((index == 2) ? 1.0f : 0));ctv_4.setDirection(0);ctv_4.setProgress(((index == 3) ? 1.0f : 0));ctv_5.setDirection(0);ctv_5.setProgress(((index == 4) ? 1.0f : 0));}@Overrideprotected void onPause() {super.onPause();}@Overrideprotected void onDestroy() {super.onDestroy();}public class SelectOnPageChangeListener implements OnPageChangeListener {private boolean  checkIfScroll = false; public void onPageScrollStateChanged(int arg0) {if (DEBUG) {Log.d(TAG, "onPageScrollStateChanged:arg0=" + arg0);}if(arg0 == 1){checkIfScroll = true;} else if (arg0 == 0){checkIfScroll = false;}}@Overridepublic void onPageScrolled(int position, float positionOffset,int positionOffsetPixels) {if(checkIfScroll){if (positionOffset > 0) {ColorTrackView left = colorTrackViews.get(position);ColorTrackView right = colorTrackViews.get(position + 1);left.setDirection(1);right.setDirection(0);if (DEBUG) {Log.d(TAG, "onPageScrolled:positionOffset="+ positionOffset + "|" + "position=" + position);}left.setProgress(1 - positionOffset);right.setProgress(positionOffset);}}}public void onPageSelected(int arg0) {if (DEBUG) {Log.d(TAG, "onPageSelected:arg0=" + arg0);}}}}

MyFragment.java

package com.example.completetrackcolorviewdemo;import android.os.Bundle;import android.view.LayoutInflater;import android.support.v4.app.Fragment;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;public class MyFragment extends Fragment {private View layout;private TextView tv;int i;public MyFragment(int i) {super();this.i = i;}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {layout = inflater.inflate(R.layout.fragment,container, false);tv = (TextView)layout.findViewById(R.id.tv_fragment);tv.setText("第"+i+"页");return layout;}}

SelectFragmentPagerAdapter.java

package com.example.completetrackcolorviewdemo;import java.util.List;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;public class SelectFragmentPagerAdapter extends FragmentPagerAdapter {private List<Fragment> list;public SelectFragmentPagerAdapter(FragmentManager fm, List<Fragment> list) {super(fm);this.list = list;}@Overridepublic int getCount() {return list.size();}@Overridepublic Fragment getItem(int arg0) {return list.get(arg0);}}

完结！