首页 / 移动开发 / Android / Android应用中仿今日头条App制作ViewPager指示器

一、概述
顶部ViewPager指示器的字体变色，该效果图是这样的：


大概是今天头条的app，神奇的地方就在于，切换ViewPager页面的时候，顶部指示器改成了字体颜色的变化，个人觉得还是不错的。
那么核心的地方就是做一个支持字体这样逐渐染色就可以了，我大概想了32s，扫描了一些可能实现的方案，最终定位了一个靠谱的，下面我就带大家开始实现的征程。
实现之前贴一下我们的效果图：
1、简单使用


效果如上图了，关于颜失色的改变我添加了两个方向，一个是左方向，一个是有方向。
单纯的使用，可能觉得没什么意思，下面看结合ViewPager使用的一个例子。
2、结合ViewPager使用


可以看到我们切换页面的时候，上面的指示器的效果，棒棒哒~~~
当然了，学会了原理，你可以扩展，可以做个性的进度条，可以将字体变色改为背景色变色，可以把方向改为上下，太多了，自己去抠脚想把。
二、原理
看完效果图，有木有什么思路~~~花几分钟想想，因为原理很简单~~
我大致想了下，目测绘制半个字估计不行，那么就在绘制范围上下功夫，你可以全部绘制，但是我控制显示的范围，所以上述效果：
其实是绘制了两遍字体，但是呢，分别控制了绘制的显示范围，实现了逐渐变色的效果，那么对于范围的控制，有什么方便的API么，显然是有的
canvas有个clipRect的方法~~~ok，原理分析完毕~~
三、实现
说到实现，那第一步肯定又是自定义属性，我们这里的属性，需要text,textSize,textOriginColor,textChangeColor,progress，大致看一下，应该都能看出来作用吧，看不出来没事，结合下面的代码。tip:我们的View叫做ColorTrackView，感谢小七的命名。
1、自定义属性和获取
attr.xml

<?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> 

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

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 = "张鸿洋";private Paint mPaint;private int mTextSize = sp2px（30）; 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）{ 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_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）;} 

     
可以看到我同时贴出了成员变量，大家简单看下就行了，都比较简单。
获取了属性，初始化完成一些成员变量以后，那么应该走向我们的measure之旅了~~
2、onMeasure

@Overrideprotected 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 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（）;result = mTextWidth;break; } result = mode == MeasureSpec.AT_MOST ? Math.min（result, val） : result; return result + getPaddingLeft（） + getPaddingRight（）;} 

关于测量，也是比较传统的写法，根据传入的widthMeasureSpec、heightMeasureSpec，利用MeasureSpec分别获取模式和值，如何是EXACTLY万事大吉，如果是AT_MOST、UNSPECIFIED那么就进行自己测量需要的空间，当然了，最好注意如果是AT_MOST不应该大于父类传入的值。
这里提一下，如果偷懒的话，可以选择继承TextView，然后测量就不需要写了，TextView默认帮你实现了，还能利用TextView的一些属性，不过咱们这个例子比较简单，我最终还是选择了继承View，继承View有种everything under control 的感觉。
测量完成以后，不用说都是绘制了。
3、onDraw

@Overrideprotected void onDraw（Canvas canvas）{ super.onDraw（canvas）; int r = （int） （mProgress* mTextWidth +mTextStartX ）;if（mDirection == DIRECTION_LEFT） {drawChangeLeft（canvas, r）;drawOriginLeft（canvas, r）; }else { drawOriginRight（canvas, r）; drawChangeRight（canvas, 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 drawChangeLeft（Canvas canvas, int r）{ drawText（canvas, mTextChangeColor, mTextStartX, （int） （mTextStartX + mProgress * mTextWidth） ）;} private void drawOriginLeft（Canvas canvas, int r）{ 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（mText, mTextStartX, getMeasuredHeight（） / 2 + mTextBound.height（） / 2, mPaint）; canvas.restore（）;} 

绘制的核心就在于利用mProgress和方向去计算应该clip的范围，具体的参考代码，没什么难点。有了范围以后，无非就是drawText~~~这里只讲主要代码。
主要的方法介绍完毕，我们就该测试了。
四、测试
1、简单测试
布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"xmlns:zhy="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent" > <com.zhy.view.ColorTrackView android:id="@+id/id_changeTextColorView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:background="#44ff0000" android:padding="10dp" zhy:progress="0" zhy:text="张鸿洋" zhy:text_change_color="#ffff0000" zhy:text_origin_color="#ff000000" zhy:text_size="60sp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:gravity="center" android:orientation="horizontal" ><Buttonandroid:id="@+id/id_left"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="startLeftChange"android:text="StartLeft" /><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_toRightOf="@id/id_left"android:onClick="startRightChange"android:text="StartRight" /></LinearLayout></RelativeLayout> 

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

package com.zhy.viewpagerIndicator;import android.animation.ObjectAnimator; import android.annotation.SuppressLint; import android.app.Activity; import android.os.Bundle; import android.view.View;import com.zhy.view.ColorTrackView;public class SimpleUseActivity extends Activity { ColorTrackView mView; @Overrideprotected void onCreate（Bundle savedInstanceState）{ super.onCreate（savedInstanceState）; setContentView（R.layout.activity_simple_main）; mView = （ColorTrackView） findViewById（R.id.id_changeTextColorView）;} @SuppressLint（"NewApi"）public void startLeftChange（View view）{ mView.setDirection（0）; ObjectAnimator.ofFloat（mView, "progress", 0, 1）.setDuration（2000） .start（）;} @SuppressLint（"NewApi"）public void startRightChange（View view）{ mView.setDirection（1）; ObjectAnimator.ofFloat（mView, "progress", 0, 1）.setDuration（2000） .start（）;}} 

这里拿属性动画进行的测试，没有导入3.0以下兼容包，有需要自己导入。
效果图就是上面张鸿洋那张。
2、结合ViewPager
布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:zhy="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="50dp" android:orientation="horizontal" ><com.zhy.view.ColorTrackViewandroid:id="@+id/id_tab_01"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"zhy:progress="1"zhy:text="简介"zhy:text_change_color="#ffff0000"zhy:text_origin_color="#ff000000"zhy:text_size="18sp" /><com.zhy.view.ColorTrackViewandroid:id="@+id/id_tab_02"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"zhy:text="评价"zhy:text_change_color="#ffff0000"zhy:text_origin_color="#ff000000"zhy:text_size="18sp" /><com.zhy.view.ColorTrackViewandroid:id="@+id/id_tab_03"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"zhy:text="相关"zhy:text_change_color="#ffff0000"zhy:text_origin_color="#ff000000"zhy:text_size="18sp" /></LinearLayout> <android.support.v4.view.ViewPager android:id="@+id/id_viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" ></android.support.v4.view.ViewPager></LinearLayout> 

3个ColorTrackView代表Tab,下面是ViewPager
ViewPagerUseActivity:

package com.zhy.viewpagerIndicator;import java.util.ArrayList; import java.util.List;import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.util.Log;import com.zhy.view.ColorTrackView;public class ViewPagerUseActivity 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>（）; @Overrideprotected void onCreate（Bundle savedInstanceState）{ super.onCreate（savedInstanceState）; setContentView（R.layout.activity_vp_main）;initViews（）; initDatas（）; initEvents（）;} private void initEvents（）{ mViewPager.setOnPageChangeListener（new OnPageChangeListener（） {@Overridepublic void onPageSelected（int position）{} @Overridepublic void onPageScrolled（int position, float positionOffset,int positionOffsetPixels）{ if （positionOffset > 0） {ColorTrackView left = mTabs.get（position）;ColorTrackView right = mTabs.get（position + 1）;left.setDirection（1）;right.setDirection（0）;Log.e（"TAG", positionOffset+""）;left.setProgress（ 1-positionOffset）;right.setProgress（positionOffset）; }} @Overridepublic void onPageScrollStateChanged（int state）{ } }）; } private void initDatas（）{for （int i = 0; i < mTitles.length; i++） {mFragments[i] = （TabFragment） TabFragment.newInstance（mTitles[i]）; }mAdapter = new FragmentPagerAdapter（getSupportFragmentManager（）） {@Overridepublic int getCount（）{ return mTitles.length;} @Overridepublic Fragment getItem（int position）{ return mFragments[position];}};mViewPager.setAdapter（mAdapter）; mViewPager.setCurrentItem（0）;} 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））;}} 

TabFragment

package com.zhy.viewpagerIndicator;import java.util.Random;import android.graphics.Color; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView;public class TabFragment extends Fragment {public static final String TITLE = "title";private String mTitle = "Defaut Value"; @Overridepublic void onCreate（Bundle savedInstanceState）{ super.onCreate（savedInstanceState）; if （getArguments（） ！= null） {mTitle = getArguments（）.getString（TITLE）; }} @Overridepublic View onCreateView（LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState）{ 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;}} 

效果图就是上面“结合ViewPager使用”的那张。