自己本身android不咋地,没事就这里看看,哪里看看,把自己认为不错的写写,上网查点代码,理解理解,这不,今天就写自定义TextView,类似跑马灯效果
要写出带跑马灯效果的TextView,我们的先去了解一下知识:
android shader类 matrix类
shader类专门用来渲染图像以及一些几何图形,shader包含几个直接之类
BitmapShader 渲染图像
LinearGradient 线性渲染
RadialGradient 环形渲染
SweepGradient 梯度渲染
ComposeShader 混合渲染,可以和上面的组合使用
shader类的使用,都需要选构造shader对象,然后通过paint的setshader方法设置渲染对象
这里我们使用LinearGradient
matrix类用来处理图片,matrix是一个3x3的矩阵,有以下类
Translate 平移
Scale 缩放
Rotate 旋转
Skew 错切
这里我们使用Translate
因为我们是自定义TextView,所以我们新建一个CustomTextView,并继承TextView
public class CustomTextView extends TextView { public CustomTextView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public CustomTextView(Context context, AttributeSet attrs) { super(context, attrs); } public CustomTextView(Context context) { super(context); } }
@Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); }接着重写onDraw()方法,效果都在这里实现
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); }
Paint mPaint;//画笔 int mViewWidth = 0;//当前TextView的宽 LinearGradient mLinearGradient; Matrix matrix; int mTranslate = 0;//每次平移距离初始化我们定义的组件
@Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); if (mViewWidth == 0) { mViewWidth = getMeasuredWidth();//获取当前TextView的宽 if (mViewWidth > 0) { mPaint = getPaint();//获取当前TextView的Paint对象 mLinearGradient = new LinearGradient( 0,//开始x位置 0,//开始y位置 mViewWidth,//结束x位置,因为我们的textview是横向的,所以只需要设置X就可以 0, //结束y位置 new int[]{Color.BLUE,0xffffffff,Color.RED},//渐变的颜色,头颜色,中间色,尾颜色 null,//颜色分布比例 Shader.TileMode.MIRROR//渲染方式:CLAMP 渲染器超出原始边界,则复制范围内颜色 MIRROR 以平铺的方式重复渲染 REPEAT 以镜像方式重复渲染 ); mPaint.setShader(mLinearGradient);//给paint设置渲染属性 matrix = new Matrix();//实例化matrix } } }在onDraw中绘制
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (matrix != null) { mTranslate += mViewWidth/5;//每次平移的距离 if (mTranslate > 2*mViewWidth) { mTranslate =-mViewWidth; } matrix.setTranslate(mTranslate, 0);//设置平移属性 mLinearGradient.setLocalMatrix(matrix);//给渲染增加平移动作 postInvalidateDelayed(100);//每0.1秒更新一次界面 } }
<lliwei.android.hero.CustomTextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" android:textSize="30sp" />效果如下:
完整的代码我贴出来
import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.LinearGradient; import android.graphics.Matrix; import android.graphics.Paint; import android.graphics.RadialGradient; import android.graphics.Shader; import android.util.AttributeSet; import android.widget.TextView; public class CustomTextView extends TextView { Paint mPaint;//画笔 int mViewWidth = 0;//当前TextView的宽 LinearGradient mLinearGradient; RadialGradient mGradient; Matrix matrix; int mTranslate = 0;//每次平移距离 public CustomTextView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public CustomTextView(Context context, AttributeSet attrs) { super(context, attrs); } public CustomTextView(Context context) { super(context); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (matrix != null) { mTranslate += mViewWidth/5;//每次平移的距离 if (mTranslate > 2*mViewWidth) { mTranslate =-mViewWidth; } matrix.setTranslate(mTranslate, 0);//设置平移属性 mLinearGradient.setLocalMatrix(matrix);//给渲染增加平移动作 postInvalidateDelayed(100);//每0.1秒更新一次界面 } } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); if (mViewWidth == 0) { mViewWidth = getMeasuredWidth();//获取当前TextView的宽 if (mViewWidth > 0) { mPaint = getPaint();//获取当前TextView的Paint对象 mLinearGradient = new LinearGradient( 0,//开始x位置 0,//开始y位置 mViewWidth,//结束x位置,因为我们的textview是横向的,所以只需要设置X就可以 0, //结束y位置 new int[]{Color.BLUE,0xffffffff,Color.RED},//渐变的颜色,头颜色,中间色,尾颜色 null,//颜色分布比例 Shader.TileMode.MIRROR//渲染方式:CLAMP 渲染器超出原始边界,则复制范围内颜色 MIRROR 以平铺的方式重复渲染 REPEAT 以镜像方式重复渲染 ); mPaint.setShader(mLinearGradient);//给paint设置渲染属性 matrix = new Matrix();//实例化matrix } } } }matrix的讲解: http://www.360doc.com/content/11/1215/11/7635_172396706.shtml
shader的讲解:http://byandby.iteye.com/blog/831011