微信公众号

Android CustomView

View工作流程

View工作流程主要指measure、layout、draw这三个流程,即测量、布局和绘制,其中measure确定View的测量的宽/高,layout确定View的最终宽/高和四个顶点的位置,draw将View绘制到屏幕上。

measure

为了更好理解measure过程,先了解MeasureSpec,MeasureSpec代表一个32位int值,高2位代表SpecMode,低30位代表SpecSize(这句话不知道几个意思)。SpecMode指的测量模式,SpecSize指在某种测量模式下规格大小。

SpecMode有三种:

  • EXACTLY
    精确值模式,父容器已经检测出View所需要的精确大小,这时候View的最终大小就是SpecSize所指定的值。它对应代码LayoutParams(控件layout_width属性和layout_height属性)中match_parent和具体数值。
  • AT_MOST
    最大值模式,父容器指定了一个可用大小值,只要不超过父容器允许最大尺寸即可。它对应代码LayoutParams(控件layout_width属性和layout_height属性)中wrap_content。

  • UNSPECIFIED
    父容器不对View有任何限制,要多大给多大,如ListView。

自定义控件不重写onMeasure(),View类默认只支持EXACTLY模式,如果让View支持wrap_content属性,必须重写onMeasure()来指定wrap_content大小。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
private int mWidth = 500, mHeight = 450;
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
int finalWidth = mWidth > widthSpecSize ? mWidth : widthSpecSize;
int finalheight = mHeight > heightSpecSize ? mHeight : heightSpecSize;
//view支持wrap_content
if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST) {
setMeasuredDimension(finalWidth, finalheight);
} else if (widthSpecMode == MeasureSpec.AT_MOST) {
setMeasuredDimension(finalWidth, heightSpecSize);
} else if (heightSpecMode == MeasureSpec.AT_MOST) {
setMeasuredDimension(widthSpecSize, finalheight);
}
}

setMeasuredDimension方法会设置View宽/高的测量值

layout

layout的作用是ViewGroup用来确定子元素的位置,当ViewGroup的位置被确定后,他在onLayout会遍历所有子元素并调用其layout方法。
layout方法大致流程:首先通过setFrame设定View四个顶点位置,View四个顶点一旦确定,那么它在父容器中位置也就确定了。

draw

重写onDraw()方法,并在Canvas对象上绘制所需要的图形,简而言之,有画笔和画布就可:
Android 画笔Paint
Android 画布Canvas
Android之画笔Paint和画布Canvas及实例练习圆角、刮刮卡、圆形头像、倒影效果

自定义attrs属性

attrs.xml

values目录下创建attrs.xml

1
2
3
4
5
6
7
8
9
<resources>
<!--<declare-styleable>声明自定义属性-->
<declare-styleable name="EmptyView">
<!--<attr>声明具体自定义属性-->
<attr name="empty_text" format="string"/>
<attr name="empty_text_color" format="color"/>
<attr name="empty_image" format="reference"/>
</declare-styleable>
</resources>

这里format的color指的颜色。
其他:reference指资源ID;
dimension指尺寸;
string、integer、boolean指基本数据类型。
也可以用“|”来分隔不同的属性。

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
public class EmptyView extends View {
private int mWidth = 500, mHeight = 450;
private Paint mPaint;
private String emptyText;
private Drawable emptyImage;
private Bitmap bitmap;
private Rect textRect;
private Context context;
public EmptyView(Context context) {
super(context);
this.context = context;
initView();
}
public EmptyView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public EmptyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context = context;
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.EmptyView);
emptyImage = typedArray.getDrawable(R.styleable.EmptyView_empty_image);
emptyText = typedArray.getString(R.styleable.EmptyView_empty_text);
typedArray.recycle();
initView();
}
private void initView() {
BitmapDrawable bitmapDrawable = (BitmapDrawable) emptyImage;
bitmap = bitmapDrawable.getBitmap();
mPaint = new Paint();
mPaint.setColor(Color.GRAY);
mPaint.setTextSize(40f);
mPaint.setAntiAlias(true);
textRect = new Rect();
mPaint.getTextBounds(emptyText, 0, emptyText.length(), textRect);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
int finalWidth = mWidth > widthSpecSize ? mWidth : widthSpecSize;
int finalheight = mHeight > heightSpecSize ? mHeight : heightSpecSize;
//view支持wrap_content
if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST) {
setMeasuredDimension(finalWidth, finalheight);
} else if (widthSpecMode == MeasureSpec.AT_MOST) {
setMeasuredDimension(finalWidth, heightSpecSize);
} else if (heightSpecMode == MeasureSpec.AT_MOST) {
setMeasuredDimension(widthSpecSize, finalheight);
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//支持padding,不然padding属性无效
int paddingLeft = getPaddingLeft();
int paddingTop = getPaddingTop();
int paddingRight = getPaddingRight();
int paddingBottom = getPaddingBottom();
LogUtil.d("paddingLeft=" + paddingLeft + ",paddingTop=" + paddingTop + ",paddingRight=" + paddingRight + ",paddingBottom=" + paddingBottom);
int width = getWidth() - paddingLeft - paddingRight;
int height = getHeight() - paddingTop - paddingBottom;
canvas.drawText(emptyText, (float) ((width - textRect.width()) * 0.5), (float) (height * 0.5), mPaint);
canvas.drawBitmap(bitmap, (float) ((width - bitmap.getWidth()) * 0.5), (float) (height * 0.5 - bitmap.getHeight() - 100), mPaint);
}
public void setEmptyImage(int id) {
emptyImage = ContextCompat.getDrawable(context, id);
BitmapDrawable bitmapDrawable = (BitmapDrawable) emptyImage;
bitmap = bitmapDrawable.getBitmap();
//requestLayout();
invalidate();
}
public void setEmptyText(String text) {
emptyText = text;
mPaint.getTextBounds(emptyText, 0, emptyText.length(), textRect);
invalidate();
}
}

xml引用

1
2
3
4
5
6
7
8
9
<com.wuxiaolong.androidsamples.customview.EmptyVie
android:id="@+id/emptyView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_margin="10dp"
android:padding="10dp"
app:empty_image="@mipmap/empty_image01"
app:empty_text="空信息提示语!"/>

布局文件添加schemas声明: xmlns:circle=”http://schemas.android.com/apk/res-auto“ ,这里circle是自定义前缀,名字随便取。但与下面CustomView中自定义属性circle:circle_color=””前缀一致。另外也可以声明 xmlns:circle=”http://schemas.android.com/apk/res/包名“ ,效果是一样的。

参考

《Android群英传》

《Android开发艺术探索》

更新日志

  • 2017.03.02 修改
  • 2016.01.01 撰写


联系我

1、我的知识星球:更多分享只对你公开,¥99/永久。
2、我的微信公众号:吴小龙同学,欢迎关注交流~
3、我的微信群,可以加我微信,拉你进群,加我时请备注真名
由于多说和网易云跟帖评论服务相继关闭,本博客决定不再折腾评论,大家可以前往我的公众号留言交流,抱歉了!其实有 Disqus ……