记得我的第一个项目是把师兄做好的一个原生app进行“加工”,所谓的加工其实就是去网上找一下别人做好的定义控件,然后找来搬到界面上去,当时对这些花里胡哨的View完全没有概念,单纯就是觉得“哇,这效果好叼!”,知其然,而不失其所以然。不过还好,现在终于开始了解自定义View到底是为何物。
所谓的自定义View,其实就是开发者不想千篇一律地使用android系统自带的控件而利用android的绘图API来绘制自己想要的效果,创造出属于自己的个性化控件,它带来的好处自然不用多说,最重要的是它是我认为android开发最吸引我的地方之一。
通常情况,有以下三种方法来实现自定义控件:
1.对现有控件进行拓展
2.通过组合来实现新的控件
3.重写View来实现新的控件
对现有控件进行拓展是一个非常重要的自定义方法,同时也是最基础的方法,它可以在原生控件的基础上进行拓展,增加新功能、显示新的UI等等,简而言之,就是站在巨人的肩膀上对进行小修小补,而既然是拓展,那必然要“画”出新的东西,所以一般是在onDraw()方法中对原生控件进行拓展。
自定义View我是跟着《Android群英传》学的,刚刚接触这本书的时候其实不是非常适应,因为书里面的代码很多都是不全的,需要结合网上的一些资料结合起来学习(进阶书可不是白叫的),比如说View类的四个构造方法就没提,如下图:
public Zidingyi(Context context) {
this(context, null);
}
public Zidingyi(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public Zidingyi(Context context, AttributeSet attrs, int defStyleAttr) {
this(context, attrs, defStyleAttr, 0);
}
public Zidingyi(Context context, AttributeSet attrs,
int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
这四个构造方法确保了自定义View能够被大多数开发者使用。
原生的TextView使用onDraw()来绘制显示的文字,代码如下:
@Override
protected void onDraw(Canvas canvas){
super.onDraw(canvas);
所以我们可以认为在程序调用了super.onDraw(canvas)之后,绘制显示就完成了,那么如果要进行自定义View,只能在super.onDraw(canvas)之前进行(否则自定义内容可能会被显示的文字重叠覆盖)。
下面正式开始自定义View。
1.在构造方法中完成初始化
mPaint1=new Paint();
mPaint1.setColor(Color.RED);
mPaint1.setStyle(Paint.Style.FILL);
mPaint2=new Paint();
mPaint2.setColor(Color.YELLOW);
mPaint2.setStyle(Paint.Style.FILL);
这里的mPaint1和mPaint2是两个全局变量,简单地理解成两支属性不同的画笔️,我们定义了这两支画笔的颜色的填充的方式。
2.重写onDraw()方法
@Override
protected void onDraw(Canvas canvas){
//绘制外层
canvas.drawRect(0,0,getMeasuredWidth(),getMeasuredHeight(),mPaint1);
//绘制内层
canvas.drawRect(10,10,getMeasuredWidth()-10,getMeasuredHeight()-10,mPaint2);
canvas.save();
//绘制前平移10px
canvas.translate(50,0);
//绘制文本
super.onDraw(canvas);
canvas.restore();
这边解释一下为什么要在canvas.translate(50,0)之前进行canvas.save(),因为canvas.translate()其实是对画布进行操作,这样能确保绘制完成的内外层方框不受画布移动的影响(经过实验,事实上不加这句话也不会有影响,规范起见还是加上),这样相当于让之后绘制的文字向前平移了50个像素。
第一次发现文字始终显示不出来弄了半天发现是一开始错误继承了View类,导致这不是一个TextView。
3.布局文件
<com.example.view.TextViewBack
android:layout_width="300px"
android:layout_height="300px"
android:text="JRs"
android:gravity="center" />
这样基本的过程就结束了,下面是效果图:
接下来会继续对其他自定义View的方法和动画进行学习,谢谢关注!