Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器
2024-05-01 10:07:46
转载请标明出处： http://blog.csdn.net/lmj623565791/article/details/44098729，本文出自： 【张鸿洋的博客】
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
<?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的构造方法中进行获取这些个渣渣属性：
/*** * @author zhy**/
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~~~
该View的完整代码：ColorTrackView
主要的方法介绍完毕，我们就该测试了。
5、测试
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.ColorTrackViewandroid: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" /><LinearLayoutandroid: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以下兼容包，有需要自己导入。
效果图，见上效果图1。
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" ><LinearLayoutandroid: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.ViewPagerandroid: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;}}
效果图见上效果图2。
源码地址：ColorTrackView，欢迎star or fork。
群号：429757068
微信公众号请扫描（第一时间通知博客、视频等通知）：
Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器相关推荐
- Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 转载请标 ...
- Android MagicIndicator系列之一 —— 使用MagicIndicator打造千变万化的ViewPager指示器...
说到 ViewPager 指示器,想必大家都不陌生,绝大部分应用中都有这个.使用频率非常之高.但系统对它的支持并不好,自带的 PagerTabStrip 和 PagerTitleStrip 太弱,很难 ...
- Android MagicIndicator系列之一 —— 使用MagicIndicator打造千变万化的ViewPager指示器
说到 ViewPager 指示器,想必大家都不陌生,绝大部分应用中都有这个.使用频率非常之高.但系统对它的支持并不好,自带的 PagerTabStrip 和 PagerTitleStrip 太弱,很难 ...
- android 打造炫酷导航栏（仿UC头条）
年后开始上班甚是清闲,所以想捣鼓一些东西.在翻阅大神杰作Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI 的时候看到下面有一条评论说,如果导航栏能滑动就更好了. ...
- 打造炫酷通用的ViewPager指示器 Adapter模式适配所有 1
###1.概述 上一期我们已经写了一篇 打造炫酷通用的ViewPager指示器 - 玩转字体变色 可是这种效果虽然绚烂可以装装A和C之间,但是在实际的大多数效果中并不常见,只是在内涵段子中有这个效果而 ...
- c++语言表白超炫图形_教你用C语言加图形库打造炫酷表白连连看
图1 今天小编用简单的C语言知识写一个连连看的游戏,但是是有含义的哈,游戏玩完之后又是属于一个表白程序,也感觉不错的哦. 下面小编把全部的代码发出来一下,以及效果图发一下,最终的话把涉及的知识点也讲解 ...
- 用devc++表白_教你用C语言加图形库打造炫酷表白连连看
图1 今天小编用简单的C语言知识写一个连连看的游戏,但是是有含义的哈,游戏玩完之后又是属于一个表白程序,也感觉不错的哦. 下面小编把全部的代码发出来一下,以及效果图发一下,最终的话把涉及的知识点也讲解 ...
- 打造炫酷的Proxmox VE 监控界面
打造炫酷的Proxmox VE 监控界面 今天终于把Proxmox VE(简称PVE)从6.1版本升级到PVE 6.4版本,在Web管理后台对比PVE 6.4与 PVE 6.1,看新增哪些功能?在数据 ...
- 怎样用C语言打造炫酷的图形编程
原文地址: 怎样打造炫酷的图形编程 https://www.toutiao.com/i6400951971158688258/ 怎样打造炫酷的图形编程 C语言小白入门到大神 2017-03-24 1 ...
最新文章
- 如何在 Linux 中查看目录大小？
- C# 操作 Database(Access SQL)
- EditText显示明文与密码
- 被程序员忽视的位运算
- Converting KVM VirtualHost To VMware vSphere VirtualHost
- Spring Cloud Alibaba Nacos Confifig是什么
- .NET Core 出得云端入得本地，微软让跨平台应用勇敢表达
- Nt/2000/xp平台下的存储控制模型（Access Control Model）
- jQuery中的end()
- Web的新图像格式WebP
- linux启动服务日志,linux 服务启动日志
- 单数据库，多数据库，单实例，多实例不同情况下的数据访问效率测试
- 收集45个实用的免费LOGO在线制作网站
- LInux上返回到切换目录前的目录
- Qt编写可视化大屏电子看板系统24-模块2当月计划
- Android 优惠券背景
- 真实感受一下县比省大不包邮，省市区乡镇多级数据重装上阵
- 七星聚会！我在中国大学MOOC获得的荣誉证书！（截至2017年8月12日）
- 给查询出来的数据添加一个标记从1自增序号
- 最火的三亚自助游攻略