Android-LinearGradient實現TextView字型漸變的效果
阿新 • • 發佈:2019-02-02
可以看出,這個類提供了兩個構造方法:
引數說明:
引數x0:表示漸變的起始點x座標;
引數y0:表示漸變的起始點y座標;
引數x1:表示漸變的終點x座標;
引數y1:表示漸變的終點y座標;
引數colors:表示漸變的顏色陣列;
引數positions:用來指定顏色陣列的相對位置;
引數color0:表示漸變開始顏色; 引數color1:表示漸變結束顏色; 引數tile:表示平鋪方式
首先,在onSizeChanged()裡面,測量child iew在parent view中佔的寬度。 並且給LinearGradient設定漸變的顏色值,位置,以及初始漸變的位置。 這個漸變的初始位置是在手機螢幕的外面x=(-mViewWidth,0)就是螢幕外面,這個不難理解。
在onDraw()方法當中通過不斷的繪製介面達到我們看到的動畫效果, mTranslate += mViewWidth / 10:表示每一次運動的遞增值
if (mTranslate > 2 * mViewWidth) { mTranslate = -mViewWidth;
}
這就是結束條件語句:當遞增值大於兩倍child
view寬度時候,及回到螢幕的左邊。
至此,整個就完成了我們開始在文章開頭的效果了,你只需要在XML檔案當中引用這個類即可。
引數color0:表示漸變開始顏色; 引數color1:表示漸變結束顏色; 引數tile:表示平鋪方式
Shader.TileMode有3種引數可供選擇,分別為CLAMP、REPEAT和MIRROR:
CLAMP的作用:是如果渲染器超出原始邊界範圍,則會複製邊緣顏色對超出範圍的區域進行著色
REPEAT的作用是:在橫向和縱向上以平鋪的形式重複渲染點陣圖
MIRROR的作用是:在橫向和縱向上以映象的方式重複渲染點陣圖
注意:通常,引數positions設為null,表示顏色陣列以斜坡線的形式均勻分佈。
下面是原始碼:public class GradientTextView extends TextView { private LinearGradient mLinearGradient; private Matrix mGradientMatrix; private Paint mPaint; private int mViewWidth = 0; private int mTranslate = 0; private boolean mAnimating = true; public GradientTextView(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); if (mViewWidth == 0) { //getWidth得到是某個view的實際尺寸. //getMeasuredWidth是得到某view想要在parent view裡面佔的大小. mViewWidth = getMeasuredWidth(); if (mViewWidth > 0) { mPaint = getPaint(); //線性漸變 mLinearGradient = new LinearGradient(-mViewWidth, 0, 0, 0, new int[] { 0x33ffffff, 0xffffffff, 0x33ffffff }, new float[] { 0, 0.5f, 1 }, Shader.TileMode.CLAMP); mPaint.setShader(mLinearGradient); mGradientMatrix = new Matrix(); } } } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (mAnimating && mGradientMatrix != null) { mTranslate += mViewWidth / 10; if (mTranslate > 2 * mViewWidth) { mTranslate = -mViewWidth; } mGradientMatrix.setTranslate(mTranslate, 0); mLinearGradient.setLocalMatrix(mGradientMatrix); //50ms重新整理一次 postInvalidateDelayed(50); } } }
首先,在onSizeChanged()裡面,測量child iew在parent view中佔的寬度。 並且給LinearGradient設定漸變的顏色值,位置,以及初始漸變的位置。 這個漸變的初始位置是在手機螢幕的外面x=(-mViewWidth,0)就是螢幕外面,這個不難理解。
在onDraw()方法當中通過不斷的繪製介面達到我們看到的動畫效果, mTranslate += mViewWidth / 10:表示每一次運動的遞增值
if (mTranslate > 2 * mViewWidth) { mTranslate = -mViewWidth;