Android自定义View是工程开发中必不可少的一项技能,项目中通过自定义View的方式造好各种内部需要的View,将会带来极大的使用方便。
一、自定义View的几种使用方式
- 自绘控件:使用canvas画出控件的样子
- 组合一些Android的控件:通过继承容器,将一些现有的组件组合起来成为一个固定的View
- 继承并扩展Android的控件:对原有的Android View进行扩展,在原有功能上添加新的功能。
相对来说,组合和继承比较容易,自绘控件要稍微复杂一点。本次将主要讲解自绘控件的方式,并通过一个具体的例子,展示怎么画出一个控件、怎么自定义属性来控制控件的样式、并为控件添加一些行为特征。
二、使用自定义View
一般需重写以下4个方法,但不是必须都重写,根据需要选择性重写即可。
onMeasure():测量控件本身的大小
onLayout():测量控件在父控件中的位置
onDraw():构建了自定义View的外观形象
onTouchEvent():重载视图的行为
三、示范制作一个自定View
本例子将制作一个自定义View,样式为一张小火箭图片,xml中可以通过自定义属性控制其样式,点击小火箭将开始一个翻转动画。好了,开始上代码。
1. 设计自定义属性
首先在res/values/ 下建立一个attrs.xml , 在里面定义我们的属性和声明我们的整个样式。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="MyTouchBall">
<attr name="imgSampleSize" format="integer" />
<attr name="duration" format="integer" />
</declare-styleable>
</resources>
2. 在布局文件中使用自定义View
新建一个类MyTouchBall,继承View(代码见下文),布局文件中像用Android自带控件一样使用自定义View,注意引入命名控件(代码第4行),通过命名空间方便使用自定义属性
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:mytouchball="http://schemas.android.com/apk/res-auto](http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.administrator.myapplication.MainActivity"
>
<com.example.administrator.myapplication.MyTouchBall
android:layout_width="500dp"
android:layout_height="wrap_content"
mytouchball:duration="1000"
mytouchball:imgSampleSize="1"
>
</com.example.administrator.myapplication.MyTouchBall>
</RelativeLayout>
3. 自定义View
这里会有三个默认的构造方法,android开发者网站上有相关的说明文档:
public View (Context context)是在java代码创建视图的时候被调用,如从xml填充的视图,就不会调用这个 。
public View (Context context, AttributeSet attrs)这个是在xml创建但是没有指定style的时候被调用
public View (Context context, AttributeSet attrs, int defStyle)给View提供一个基本的style
我们在两个参数的构造方法中,添加逻辑,接受xml布局中的自定义属性。
public class MyTouchBall extends View {
private int mImgSampleSize = 10; //火箭缩放比例
private int mDuration = 500; //火箭动画的时间
private Bitmap mBitmap;
private int mImgHeight; //缩放后,图片的实际高度
private int mImgWidth; //缩放后,图片的实际宽度
private Paint mPaint; //画笔
public MyTouchBall(Context context) {
super(context);
}
//在这里获取自定义属性,并赋值给成员变量
public MyTouchBall(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyTouchBall);
int count = typedArray.getIndexCount();
for (int i = 0; i < count; i++) {
int attr = typedArray.getIndex(i);
switch (attr) {
case R.styleable.MyTouchBall_duration:
mDuration = typedArray.getInteger(attr, 500);
break;
case R.styleable.MyTouchBall_imgSampleSize:
mImgSampleSize = typedArray.getInteger(attr, 30);
break;
default:
break;
}
}
setBackgroundColor(getResources().getColor(R.color.sandybrown));//设置背景颜色为浅黄色,方便识别onMeasure计算的对不对
typedArray.recycle(); //将typedArray清空,循环给下一个调用者使用
//根据属性计算火箭图片的宽高
mBitmap = decodeSampledBitmap(getResources(), R.mipmap.roket, mImgSampleSize);
mImgWidth = mBitmap.getWidth();
mImgHeight = mBitmap.getHeight();
}
public MyTouchBall(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
} }
decodeSampledBitmap方法是根据缩放比例,压缩或放大图片,下面是它的代码。
//加载图片,按比例缩放
private static Bitmap decodeSampledBitmap(Resources res, int resId, int sampleSize) {
final BitmapFactory.Options options = new BitmapFactory.Options();
options.inJustDecodeBounds = false;
options.inSampleSize = sampleSize;
// 使用获取到的inSampleSize值解析图片
return BitmapFactory.decodeResource(res, resId, options);
}
4. 重写onMeasure方法,根据xml属性来决定控件的宽高。
如下问代码所示,一般自定义控件都会重写View的onMeasure方法,因为该方法指定该控件在屏幕上的大小。
onMeasure(int widthMeasureSpec, int heightMeasureSpec)传入的两个参数是由上一层控件传入的大小,有多种情况,重写该方法时需要对计算控件的实际大小,然后调用setMeasuredDimension(int, int)设置实际大小。
onMeasure传入的widthMeasureSpec和heightMeasureSpec不是一般的尺寸数值,而是将模式和尺寸组合在一起的数值。
通过int mode = MeasureSpec.getMode(widthMeasureSpec)得到模式,用int size =?MeasureSpec.getSize(widthMeasureSpec)得到尺寸。其中,mode共有三种情况,取值分别为MeasureSpec.UNSPECIFIED, MeasureSpec.EXACTLY, MeasureSpec.AT_MOST。
MeasureSpec.EXACTLY是精确尺寸,当我们将自定义View的layout_width或layout_height指定为具体数值时如andorid:layout_width="50dip",或者match_parent就会是这个模式。(match_parent也相当于指定了具体尺寸)
MeasureSpec.AT_MOST是最大尺寸,当控件的layout_width或layout_height指定为WRAP_CONTENT时,控件大小一般随着控件的子空间或内容进行变化,此时控件尺寸只要不超过父控件允许的最大尺寸即可。因此,此时的mode是AT_MOST,size给出了父控件允许的最大尺寸。
-
MeasureSpec.UNSPECIFIED是未指定尺寸,这种情况不多.
简单总结,映射关系是:
wrap_parent -> MeasureSpec.AT_MOST
具体数值或者match_parent -> MeasureSpec.EXACTLY
下面正式重写onMeasure方法
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int width, height;
if (widthMode == MeasureSpec.EXACTLY) { //使用者在布局文件里指定了具体的宽度
width = widthSize;
} else { //没有指定,或者设置成了wrap_content
//这时候要计算具体的数值,宽度取图片的宽度
width = mImgWidth;
}
if (heightMode == MeasureSpec.EXACTLY) { //使用者在布局文件里指定了具体的高度
height = heightSize;
} else { //没有指定,或者设置成了wrap_content
//宽度取图片的高度
height = mImgHeight;
}
setMeasuredDimension(width, height);
}
5. 重写onDraw方法,画出具体的界面,这里就是将一张图片画到界面上(当然,你可以根据需要画各种形状)。
protected void onDraw(Canvas canvas) {
mPaint = new Paint();
canvas.drawBitmap(mBitmap, 0, 0, mPaint);//在画布上画出图片
}
6. 重写onTouchEvent方法,为控件添加一些独特的行为,默认返回值用false,以便事件能回传到上层,不影响原有功能。具体原因请看我的另一篇博客Android事件传递机制详解(嵌套自定义View示例)
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
startAnimation();
}
return false;
}
7. 一个简单的旋转动画效果
public void startAnimation() { //开始动画
ObjectAnimator.ofFloat(this, "rotationX", 0.0f, 360.0f).setDuration(mDuration).start();
}
三、结果
好了,大功告成,通过结果来看看效果吧。从之前的布局文件可以看到,因为宽度设置了500dp,整个控件的大小是500dp(通过背景色可以看出来);而高度设置的是wrap_content,所以控件的高度就是图片的高度。这表明onMeasure的效果已经达到了。
如果觉得我的文章对你有用,请留言鼓励一下吧!