zoukankan      html  css  js  c++  java

  • 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

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
     
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <resources>  
    3.   
    4.     <attr name="text" format="string" />  
    5.     <attr name="text_size" format="dimension" />  
    6.     <attr name="text_origin_color" format="color|reference" />  
    7.     <attr name="text_change_color" format="color|reference" />  
    8.     <attr name="progress" format="float" />  
    9.     <attr name="direction">  
    10.         <enum name="left" value="0" />  
    11.         <enum name="right" value="1" />  
    12.     </attr>  
    13.   
    14.     <declare-styleable name="ColorTrackView">  
    15.         <attr name="text" />  
    16.         <attr name="text_size" />  
    17.         <attr name="text_origin_color" />  
    18.         <attr name="text_change_color" />  
    19.         <attr name="progress" />  
    20.         <attr name="direction" />  
    21.     </declare-styleable>  
    22.   
    23. </resources>  


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

    [java] view plaincopy在CODE上查看代码片派生到我的代码片
     
    1. /** 
    2.  *  
    3.  * @author zhy 
    4.  * 
    5.  */  
    6. public class ColorTrackView extends View  
    7. {  
    8.   
    9.     private int mTextStartX;  
    10.       
    11.     public enum Direction  
    12.     {  
    13.         LEFT , RIGHT ;  
    14.     }  
    15.   
    16.     private int mDirection = DIRECTION_LEFT;   
    17.       
    18.     private static final int  DIRECTION_LEFT = 0 ;   
    19.     private static final int  DIRECTION_RIGHT= 1 ;  
    20.       
    21.     public void setDirection(int direction)  
    22.     {  
    23.         mDirection = direction;  
    24.     }  
    25.       
    26.     private String mText = "张鸿洋";  
    27.     private Paint mPaint;  
    28.     private int mTextSize = sp2px(30);  
    29.   
    30.     private int mTextOriginColor = 0xff000000;  
    31.     private int mTextChangeColor = 0xffff0000;  
    32.   
    33.     private Rect mTextBound = new Rect();  
    34.     private int mTextWidth;  
    35.   
    36.     private int mRealWidth;  
    37.   
    38.     private float mProgress;  
    39.   
    40.     public ColorTrackView(Context context)  
    41.     {  
    42.         super(context, null);  
    43.     }  
    44.   
    45.     public ColorTrackView(Context context, AttributeSet attrs)  
    46.     {  
    47.         super(context, attrs);  
    48.   
    49.         mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  
    50.   
    51.         TypedArray ta = context.obtainStyledAttributes(attrs,  
    52.                 R.styleable.ColorTrackView);  
    53.         mText = ta.getString(R.styleable.ColorTrackView_text);  
    54.         mTextSize = ta.getDimensionPixelSize(  
    55.                 R.styleable.ColorTrackView_text_size, mTextSize);  
    56.         mTextOriginColor = ta.getColor(  
    57.                 R.styleable.ColorTrackView_text_origin_color,  
    58.                 mTextOriginColor);  
    59.         mTextChangeColor = ta.getColor(  
    60.                 R.styleable.ColorTrackView_text_change_color,  
    61.                 mTextChangeColor);  
    62.         mProgress = ta.getFloat(R.styleable.ColorTrackView_progress, 0);  
    63.           
    64.         mDirection = ta.getInt(R.styleable.ColorTrackView_direction, mDirection);  
    65.           
    66.         ta.recycle();  
    67.   
    68.         mPaint.setTextSize(mTextSize);  
    69.         measureText();  
    70.   
    71.     }  
    [java] view plaincopy在CODE上查看代码片派生到我的代码片
     
    1. private void measureText()  
    2.     {  
    3.         mTextWidth = (int) mPaint.measureText(mText);  
    4.         mPaint.getTextBounds(mText, 0, mText.length(), mTextBound);  
    5.     }  
    6.       

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

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

    2、onMeasure

    [java] view plaincopy在CODE上查看代码片派生到我的代码片
     
    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.   
    8.         mRealWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();  
    9.         mTextStartX = mRealWidth / 2 - mTextWidth / 2;  
    10.   
    11.     }  
    12.   
    13.     private int measureHeight(int measureSpec)  
    14.     {  
    15.         int mode = MeasureSpec.getMode(measureSpec);  
    16.         int val = MeasureSpec.getSize(measureSpec);  
    17.         int result = 0;  
    18.         switch (mode)  
    19.         {  
    20.         case MeasureSpec.EXACTLY:  
    21.             result = val;  
    22.             break;  
    23.         case MeasureSpec.AT_MOST:  
    24.         case MeasureSpec.UNSPECIFIED:  
    25.             result = mTextBound.height();  
    26.             break;  
    27.         }  
    28.         result = mode == MeasureSpec.AT_MOST ? Math.min(result, val) : result;  
    29.         return result + getPaddingTop() + getPaddingBottom();  
    30.     }  
    31.   
    32.     private int measureWidth(int measureSpec)  
    33.     {  
    34.         int mode = MeasureSpec.getMode(measureSpec);  
    35.         int val = MeasureSpec.getSize(measureSpec);  
    36.         int result = 0;  
    37.         switch (mode)  
    38.         {  
    39.         case MeasureSpec.EXACTLY:  
    40.             result = val;  
    41.             break;  
    42.         case MeasureSpec.AT_MOST:  
    43.         case MeasureSpec.UNSPECIFIED:  
    44.             // result = mTextBound.width();  
    45.             result = mTextWidth;  
    46.             break;  
    47.         }  
    48.         result = mode == MeasureSpec.AT_MOST ? Math.min(result, val) : result;  
    49.         return result + getPaddingLeft() + getPaddingRight();  
    50.     }  


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

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

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

    3、onDraw

    [java] view plaincopy在CODE上查看代码片派生到我的代码片
     
    1. @Override  
    2.     protected void onDraw(Canvas canvas)  
    3.     {  
    4.         super.onDraw(canvas);  
    5.         int r = (int) (mProgress* mTextWidth +mTextStartX );  
    6.           
    7.         if(mDirection == DIRECTION_LEFT)  
    8.         {  
    9.             drawChangeLeft(canvas, r);  
    10.             drawOriginLeft(canvas, r);  
    11.         }else  
    12.         {  
    13.              drawOriginRight(canvas, r);  
    14.              drawChangeRight(canvas, r);  
    15.         }  
    16.   
    17.     }  
    18.       
    19.     private void drawChangeRight(Canvas canvas, int r)  
    20.     {  
    21.         drawText(canvas, mTextChangeColor, (int) (mTextStartX +(1-mProgress)*mTextWidth), mTextStartX+mTextWidth );  
    22.     }  
    23.     private void drawOriginRight(Canvas canvas, int r)  
    24.     {  
    25.         drawText(canvas, mTextOriginColor, mTextStartX, (int) (mTextStartX +(1-mProgress)*mTextWidth) );  
    26.     }  
    27.   
    28.     private void drawChangeLeft(Canvas canvas, int r)  
    29.     {  
    30.         drawText(canvas, mTextChangeColor, mTextStartX, (int) (mTextStartX + mProgress * mTextWidth) );  
    31.     }  
    32.   
    33.     private void drawOriginLeft(Canvas canvas, int r)  
    34.     {  
    35.         drawText(canvas, mTextOriginColor, (int) (mTextStartX + mProgress * mTextWidth), mTextStartX +mTextWidth );  
    36.     }  
    37.       
    38.     private void drawText(Canvas canvas , int color , int startX , int endX)  
    39.     {  
    40.         mPaint.setColor(color);  
    41.         canvas.save(Canvas.CLIP_SAVE_FLAG);  
    42.         canvas.clipRect(startX, 0, endX, getMeasuredHeight());  
    43.         canvas.drawText(mText, mTextStartX, getMeasuredHeight() / 2  
    44.                 + mTextBound.height() / 2, mPaint);  
    45.         canvas.restore();  
    46.     }  


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

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

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

    5、测试

     

    1、简单测试

    布局文件

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
     
    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.   
    7.     <com.zhy.view.ColorTrackView  
    8.         android:id="@+id/id_changeTextColorView"  
    9.         android:layout_width="match_parent"  
    10.         android:layout_height="wrap_content"  
    11.         android:layout_centerInParent="true"  
    12.         android:background="#44ff0000"  
    13.         android:padding="10dp"  
    14.         zhy:progress="0"  
    15.         zhy:text="张鸿洋"  
    16.         zhy:text_change_color="#ffff0000"  
    17.         zhy:text_origin_color="#ff000000"  
    18.         zhy:text_size="60sp" />  
    19.   
    20.     <LinearLayout  
    21.         android:layout_width="match_parent"  
    22.         android:layout_height="wrap_content"  
    23.         android:layout_alignParentBottom="true"  
    24.         android:gravity="center"  
    25.         android:orientation="horizontal" >  
    26.   
    27.         <Button  
    28.             android:id="@+id/id_left"  
    29.             android:layout_width="wrap_content"  
    30.             android:layout_height="wrap_content"  
    31.             android:onClick="startLeftChange"  
    32.             android:text="StartLeft" />  
    33.   
    34.         <Button  
    35.             android:layout_width="wrap_content"  
    36.             android:layout_height="wrap_content"  
    37.             android:layout_toRightOf="@id/id_left"  
    38.             android:onClick="startRightChange"  
    39.             android:text="StartRight" />  
    40.     </LinearLayout>  
    41.   
    42. </RelativeLayout>  


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

    SimpleUseActivity:

    [java] view plaincopy在CODE上查看代码片派生到我的代码片
     
    1. package com.zhy.viewpagerIndicator;  
    2.   
    3. import android.animation.ObjectAnimator;  
    4. import android.annotation.SuppressLint;  
    5. import android.app.Activity;  
    6. import android.os.Bundle;  
    7. import android.view.View;  
    8.   
    9. import com.zhy.view.ColorTrackView;  
    10.   
    11. public class SimpleUseActivity extends Activity  
    12. {  
    13.   
    14.     ColorTrackView mView;  
    15.   
    16.     @Override  
    17.     protected void onCreate(Bundle savedInstanceState)  
    18.     {  
    19.         super.onCreate(savedInstanceState);  
    20.         setContentView(R.layout.activity_simple_main);  
    21.         mView = (ColorTrackView) findViewById(R.id.id_changeTextColorView);  
    22.           
    23.   
    24.     }  
    25.   
    26.     @SuppressLint("NewApi")  
    27.     public void startLeftChange(View view)  
    28.     {  
    29.         mView.setDirection(0);  
    30.         ObjectAnimator.ofFloat(mView, "progress", 0, 1).setDuration(2000)  
    31.                 .start();  
    32.     }  
    33.   
    34.     @SuppressLint("NewApi")  
    35.     public void startRightChange(View view)  
    36.     {  
    37.         mView.setDirection(1);  
    38.         ObjectAnimator.ofFloat(mView, "progress", 0, 1).setDuration(2000)  
    39.                 .start();  
    40.     }  
    41.   
    42. }  


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

    效果图，见上效果图1。

    2、结合ViewPager

    布局文件：

    [java] view plaincopy在CODE上查看代码片派生到我的代码片
     
    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.   
    8.     <LinearLayout  
    9.         android:layout_width="match_parent"  
    10.         android:layout_height="50dp"  
    11.         android:orientation="horizontal" >  
    12.   
    13.         <com.zhy.view.ColorTrackView  
    14.             android:id="@+id/id_tab_01"  
    15.             android:layout_width="0dp"  
    16.             android:layout_height="match_parent"  
    17.             android:layout_weight="1"  
    18.             zhy:progress="1"  
    19.             zhy:text="简介"  
    20.             zhy:text_change_color="#ffff0000"  
    21.             zhy:text_origin_color="#ff000000"  
    22.             zhy:text_size="18sp" />  
    23.   
    24.         <com.zhy.view.ColorTrackView  
    25.             android:id="@+id/id_tab_02"  
    26.             android:layout_width="0dp"  
    27.             android:layout_height="match_parent"  
    28.             android:layout_weight="1"  
    29.             zhy:text="评价"  
    30.             zhy:text_change_color="#ffff0000"  
    31.             zhy:text_origin_color="#ff000000"  
    32.             zhy:text_size="18sp" />  
    33.   
    34.         <com.zhy.view.ColorTrackView  
    35.             android:id="@+id/id_tab_03"  
    36.             android:layout_width="0dp"  
    37.             android:layout_height="match_parent"  
    38.             android:layout_weight="1"  
    39.             zhy:text="相关"  
    40.             zhy:text_change_color="#ffff0000"  
    41.             zhy:text_origin_color="#ff000000"  
    42.             zhy:text_size="18sp" />  
    43.   
    44.           
    45.     </LinearLayout>  
    46.   
    47.     <android.support.v4.view.ViewPager  
    48.         android:id="@+id/id_viewpager"  
    49.         android:layout_width="match_parent"  
    50.         android:layout_height="0dp"  
    51.         android:layout_weight="1" >  
    52.     </android.support.v4.view.ViewPager>  
    53.   
    54. </LinearLayout>  


    3个ColorTrackView代表Tab,下面是ViewPager

    ViewPagerUseActivity:

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


    TabFragment

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


    效果图见上效果图2。

    源码下载地址:http://download.csdn.net/detail/hongheqq/8515129 
  • 相关阅读:
    Dedecms sql命令批量修改内容
    dede 获取文章链接地址
    Sublime3 快捷键
    DEDE一些实用标签及自定义标签方法
    dedecms 制作模板中使用的全局标记介绍
    JS性能优化
    织梦channel标签currentstyle样式无效不起作用
    Dede 标签调用汇总
    dede标签:arclist标签使用大全
    CSS字体属性
  • 原文地址：https://www.cnblogs.com/dongweiq/p/4350497.html
Copyright © 2011-2022 走看看