大家好,今天我们来温故一个 TextView 实例的demo
这个文字闪亮的demo,相信大家都看过。
那我们就来分析一下它,回顾一下它。
文字着色变化文字动画着色
其实他就这么简单，那我们就来了解这2个知识点。
第一： 文字着色
Android 为我们提供了着色器 (shader类),Shader下并为我们提供了5个子类分别是:
今天我们用 LinearGradient–线性渐变着色 为我们的TextView 着色。
LinearGradient类有2个构造方法
public LinearGradient(float x0, float y0, float x1, float y1, int colors[], float positions[],TileMode tile) public LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1,TileMode tile)
这2种构造方法大体一样,只是上面的着色是一个数组,表现的也可以更丰富一些.让我们就使用第一种构造方法.
首先我们定义一个 LinearGradientTextView extends TextView 然后构造我们的着色器,如下
(int w, int h, int oldw, int oldh) {if(mLinearGradient==null){ mLinearGradient = new LinearGradient(0, // X00, // Y0getWidth(), [] { getCurrentTextColor(), //color 1Color.WHITE, //color 2getCurrentTextColor()}, [] { 0, 0.5f, 1 },//和上面数组的个数要对应,值在[0-1]Shader.TileMode.CLAMP//模式有三种,CLAMP,MIRROR,REPEAT);mMatrix = new Matrix(); // new 一个Matrix类 }}
因为我们要获取当前TextView 的宽度,这里我把代码放在 onSizeChanged() 方法中,保证准确的获取宽度 然后在onDraw()方法中,设置我们的着色器就可以了。
(Canvas canvas) {// TODO Auto-generated method stubsuper.onDraw(canvas);mPaint.setShader(mLinearGradient);mLinearGradient.setLocalMatrix(mMatrix);}
效果如下
这里我们的文字已经可以着色了,完成了第一步。
第二： 文字着色动起来
动画我比较喜欢用属性动画, ObjectAnimator为我们才用的类。
{(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_object_animator);TextView mTextView = (TextView) findViewById(R.id.text1);ObjectAnimator animator = ObjectAnimator.ofFloat(mTextView, “alpha”, 1f, 0f, 1f);animator.setDuration(5000);animator.setRepeatCount(ObjectAnimator.INFINITE);animator.start();}}
这样简单的设置一下我们就可以为TextView–的alpha设置一个动画了。效果图就不上了，太简单了。 ObjectAnimator 最常用的ofFloat()和ofInt()这两个方法了。 ObjectAnimator 是为Object 设置的,并不单单设置动画而已,就是为什么第二个参数可以设置任意值的原因，那我们就来更新一下任意值为何？
当我第一次看到这个类的时候,也在思考为什么可以为任意值? 为什么叫属性动画?
其实这个问题,在第一个参数 为Object 类，就已经解答了。为何呢？ 我们知道，当一个类的成员变量被我们称之为属性的时候，正常情况下都会为它添加 setXXX/getXXX 这2个方法，所谓的属性动画就是设置属性的值来驱动变化。（是不是动画就不重要了）
根据这个结论，我们就来试一试是否正确，这里我们就设置一个属性，使我们的TextView和计算器一样100豪秒+1(只是为了更好看效果)
{private int count;private TextView mTextView;(int count) {this.count = count;mTextView.setText(“”+count);}(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_object_animator);mTextView = (TextView) findViewById(R.id.text1);ObjectAnimator animator = ObjectAnimator.ofInt(this, “count”, 0, 100);animator.setDuration(100000); //10000/100–>100毫秒设置+1 animator.setInterpolator(new LinearInterpolator()); // 线性累加animator.setRepeatCount(ObjectAnimator.INFINITE);animator.start();}}
效果如下
充分的说明，ObjectAnimator 设置思想就是这样的。至于我们设置,alpha,rotation,scaleY等等之类的是因为传入的对象有其方法,在用反射进行设置而已。
好，这样2个问题我们都解决了,我们把2者结合起来,代码如下:{private LinearGradient mLinearGradient;private Paint mPaint;private Matrix mMatrix;ObjectAnimator mAnimator;public GlowTextView(Context context) {super(context);}public GlowTextView(Context context, AttributeSet attrs) {super(context, attrs);}(float glow) {this.glow = glow;invalidate();}() {mLinearGradient = new LinearGradient(0, // X00, // Y0getWidth(), [] { getCurrentTextColor(), //color 1Color.WHITE, //color 2getCurrentTextColor()}, [] { 0, 0.5f, 1 },Shader.TileMode.REPEAT //模式);mMatrix = new Matrix();mPaint = getPaint();// TODO Auto-generated method stubmAnimator = ObjectAnimator.ofFloat(this, “glow”, 0, getWidth());mAnimator.setRepeatCount(ValueAnimator.INFINITE);mAnimator.setDuration(1000);mAnimator.setStartDelay(0);mAnimator.start();}(int w, int h, int oldw, int oldh) {// TODO Auto-generated method stubsuper.onSizeChanged(w, h, oldw, oldh);init();}(Canvas canvas) {// TODO Auto-generated method stubsuper.onDraw(canvas);mPaint.setShader(mLinearGradient);mMatrix.setTranslate(glow, 0); //改变的区域mLinearGradient.setLocalMatrix(mMatrix);}}
上面2个知识点结合一下,只需要添加一行 mMatrix.setTranslate(glow, 0); //改变的区域 就实现了我们需要的效果了。
到此我们就温故了一个DEMO，最后附上源码，补上可以控制一下发光。
源码下载在使用 LinearGradient 的过程中,发现通过对坐标的控制还能着色角度
因为X0,Y0,X1,Y2是可以任意设置的，，角度的概念如图：
好了,小伙伴们可以更改上面的实例 LinearGradient 的坐标值,看一看其效果。
一个人，一条路，人在途中，心随景动，
