高级UI汇总
SeniorUI04_Paint高级渲染Shader使用
###1 Effect Picture
###2 Demo
MyGradientView
###3 RequireMent
- 霓虹灯文字效果
- 文字内容部分高亮显示
- 文字从左往右,文字逐渐高亮,到达右侧后,反向动态显示
###4 Theory
- 自定义View
- Shader中的LinearGradient实现高亮(不同颜色线性渐变)
- Matrix + postInvalidateDelayed+ LinearGradient.setLocalMatrix实现动态效果
##5 API
####LinearGradient构造1:
LinearGradient(
float x0,
float y0,
float x1,
@ColorInt int color0,
@ColorInt int color1,
@NonNull TileMode tile)
- x0 渐变色开始x坐标
- y0 渐变色开始y坐标
- x1 渐变色结束x坐标
- y1 渐变色结束y坐标
- color0 开始颜色
- color1 结束颜色
- TileMode平铺模式
####LinearGradient构造2:
LinearGradient(
float x0,
float y0,
float x1,
float y1,
@NonNull @ColorInt int colors[],
@Nullable float positions[],
@NonNull TileMode tile) { - x0 渐变色开始x坐标
- y0 渐变色开始y坐标
- colors 渐变色数组
- positions 渐变色间隔
- TileMode平铺模式
##6 Core Code
public class LinearGradientTextView extends TextView{
private TextPaint mPaint;
private LinearGradient mLinearGradient ;
private Matrix mMatrix;
private float mTranslate;
private float DELTAX = 20;
public LinearGradientTextView(Context context) {
super(context);
}
public LinearGradientTextView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
// 拿到TextView的画笔
mPaint = getPaint();
String text = getText().toString();
float textWith = mPaint.measureText(text);
// 3个文字的宽度
int gradientSize = (int) (textWith / text.length() * 3);
// 从左边-gradientSize开始,即左边距离文字gradientSize开始渐变
mLinearGradient = new LinearGradient(-gradientSize,0,0,0,new int[]{
0x22ffffff, 0xffffffff, 0x22ffffff},null, Shader.TileMode.CLAMP
);
mPaint.setShader(mLinearGradient);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mTranslate += DELTAX;
float textWidth = getPaint().measureText(getText().toString());
if(mTranslate > textWidth + 1 || mTranslate < 1){
DELTAX = - DELTAX;
}
mMatrix = new Matrix();
mMatrix.setTranslate(mTranslate, 0);
mLinearGradient.setLocalMatrix(mMatrix);
postInvalidateDelayed(50);
}
}