自定义 View 是一个综合的技术体系,涉及到 View 的层次结构,事件分发机制和 View 的工作原理等技术细节。
一、自定义 View 的分类
大致可以分为如下四种:
1、 继承 View 重写 onDraw 方法
这种情况主要是实现一些复杂的效果,这些效果不方便通过布局的组合来实现,往往需要静态或者动态的显示一些不规则的图形。要实现这种效果就要自己继承 View 并重写onDraw 方法,这种方式往往要自己支持 wrap_content,并且 padding 等需要自己处理。
2、继承 ViewGroup 派生特殊的 Layout
这种方法主要是用于实现自定义布局,也就是除了 LinearLayout、RealativeLayout 和 FrameLayout 等这些系统布局之外,我们需要自己定义一种新的布局,这个布局看起来像几种 View 的组合。这种方法稍微复杂一点,需要合适的处理 ViewGroup 的测量、布局这两个过程,并要同时处理子元素的测量和布局过程。
3、继承特定的 View(比如 TextView)
这种方式比较常见,主要是扩展某个已知 View 的功能,比如 TextView。这种方法比较容易实现,主要是要自己支持 wrap_content 和 padding。
4、继承特定的 ViewGroup (比如 LineayLayout)
这种方法也比较常见,看起来就像是几种 View 组合在一起,这种方法不需要自己去处理 ViewGroup 的测量和布局这两个过程。
二、自定义 View 的注意事项
1、自定义 View 需要支持 wrap_content
自定义 View 如果继承 View 或者 ViewGroup ,如果不在 onMeansure 中对 wrap_content 做特殊处理,那么在布局中使用 wrap_content 时,无法达到预期的效果。
2、如果有必要,自定义 View 需要支持 padding
如果直接继承 View 控件,如果不在 draw 方法中处理 padding,那么padding 属性将无法起作用。另外如果直接继承 ViewGroup,那么要考虑 onMeasure 和 onLayout 中的 padding 和子元素的 margin 对这个 View 的影响,不然将导致 padding 和子元素的 margin 失效。
3、尽量不要在自定义 View 中使用 Handler
因为 View 内部本身提供了 post 方法可以代替 Handler,除非是要明确必须用 Handler 发送消息。
4、View 中如果有线程或者动画,需要及时停止,参考 View#onDetachedFromWindow
当有线程或者动画需要停止时,那么 onDetachedFromWindow 是一个好时机,包含此 View 的 Activity 退出或者当前 View 被 remove 时,View 的 onDetachedFromWindow 会被调用,和此方法对用的是 onAttachedToWindow,当包含此 View 的 Activiyt 启动时,这个方法会被调用。需要注意的是,我们要及时处理线程和动画,否则会造成内存泄漏。
5、View 需要嵌套滑动时,需要处理好滑动冲突。
滑动冲突主要是发生在嵌套 View 中,而不止一个 View 需要对滑动做处理,此时要考虑滑动冲突的解决。
三、 自定义 View 示例
1、继承 View 重写 onDraw 方法
本实例实现一个自定义绘制圆形,比较简单,但是需要考虑 wrap_content 和 padding,同时对外提供自定义属性。
画一个简单的圆:
public class CircleView extends View {
private int mColor = Color.RED;
private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
public CircleView(Context context) {
super(context);
init();
}
public CircleView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public CircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int mColor) {
super(context, attrs, defStyleAttr);
init();
}
private void init(){
mPaint.setColor(mColor);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = getWidth();
int height = getHeight();
int radius = Math.min(width,height)/2;
canvas.drawCircle(width/2,height/2,radius,mPaint);
}
}
效果如下:
circle.png
上面实现的效果只是初级的实现,并不是一个规范的自定义 View 。下面考虑设置布局参数。
布局如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ffffff"
tools:context="com.hcworld.customview.MainActivity">
<com.hcworld.customview.CircleView
android:id="@+id/circleView1"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#000000"
/>
</LinearLayout>
再次运行,效果如下:
circle2.png
再次调整布局参数,设置 20dp 的 margin,布局如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ffffff"
tools:context="com.hcworld.customview.MainActivity">
<com.hcworld.customview.CircleView
android:id="@+id/circleView1"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_margin="20dp"
android:background="#000000"
/>
</LinearLayout>
效果如下:
circle3.png
如上效果,说明 margin 属性是生效的,这是因为 margin 属性是由父容器控制的,因此不需要在自定义 View 中做特殊处理,下面考虑设置 20dp 的padding。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ffffff"
tools:context="com.hcworld.customview.MainActivity">
<com.hcworld.customview.CircleView
android:id="@+id/circleView1"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_margin="20dp"
android:padding="20dp"
android:background="#000000"
/>
</LinearLayout>
再次运行,效果如下:
circle4.png
可以看到,padding 属性没有生效,如上面说的注意事项,如果自定义 View 继承自 View 或者 ViewGroup,padding 属性是无法生效的,需要自己处理。再次调整布局参数,修改宽度为 wrap_content,布局如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ffffff"
tools:context="com.hcworld.customview.MainActivity">
<com.hcworld.customview.CircleView
android:id="@+id/circleView1"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_margin="20dp"
android:padding="20dp"
android:background="#000000"
/>
</LinearLayout>
效果如下:
circle4.png
也就是,wrap_content 也是没有生效的,其实这里的 wrap_content 和 match_parent 的效果是一样的。也就是,对于自定义 View,如果不对 wrap_content 做特殊处理,那么说使用 wrap_content 的效果和 match_parnet 是一样的。
为了解决上面出现的问题,使 padding 和 wrap_content 生效,我们需要做如下处理:
对于 wrap_content,我们需要重写onMeasure,为 wrap_content 指定一个默认值,这里选择 200px。
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 获取宽-测量规则的模式和大小
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
// 获取高-测量规则的模式和大小
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
// 设置wrap_content的默认宽 / 高值
// 默认宽/高的设定并无固定依据,根据需要灵活设置
int mWidth = 200;
int mHeight = 200;
// 当布局参数设置为wrap_content时,设置默认值
if (getLayoutParams().width == ViewGroup.LayoutParams.WRAP_CONTENT && getLayoutParams().height == ViewGroup.LayoutParams.WRAP_CONTENT) {
setMeasuredDimension(mWidth, mHeight);
// 宽 / 高任意一个布局参数为= wrap_content时,都设置默认值
} else if (getLayoutParams().width == ViewGroup.LayoutParams.WRAP_CONTENT) {
setMeasuredDimension(mWidth, heightSize);
} else if (getLayoutParams().height == ViewGroup.LayoutParams.WRAP_CONTENT) {
setMeasuredDimension(widthSize, mHeight);
}
}
对于 padding,我们需要在 onDraw 中做处理:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//使 padding 生效
final int paddingLeft = getPaddingLeft();
final int paddingRight = getPaddingRight();
final int paddingTop = getPaddingTop();
final int paddintBottom = getPaddingBottom();
int width = getWidth() - paddingLeft - paddingRight;
int height = getHeight() - paddingTop - paddintBottom;
int radius = Math.min(width,height)/2;
canvas.drawCircle(paddingLeft+width/2,paddingTop+ height/2,radius,mPaint);
}
布局如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ffffff"
tools:context="com.hcworld.customview.MainActivity">
<com.hcworld.customview.CircleView
android:id="@+id/circleView1"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_margin="20dp"
android:padding="20dp"
android:background="#000000"
/>
</LinearLayout>
效果如下:
circle5.png
也就是 wrap_content 和 padding 都生效了。
最后,我们还要为我们的自定义 View 添加自定义属性。像 android:layout_width 和 android:padding 等,这些 android 开头的是系统自带属性,而要实现自定义属性,一般步骤如下:
1、创建自定义属性 XML 文件,如 attrs.xml
内容如下:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CircleView">
<attr name="circle_color" format="color"/>
</declare-styleable>
</resources>
上面只是声明了一个自定义属性集合 "CircleView",在这个集合里,只有一个属性 circle_color,其类型为 color 代表 颜色。基本类型还有:
refercece:资源 id
dimension: 尺寸大小
还有就是一下基本类型如 string,boolea,float 等。可以根据需要自己实现,如:
<atrr name = "circle_radius" format = "float"/>
2、在自定义 View 的构造方法中,解析自定义属性的值,这里示例只有一个值,其他情况类似
public CircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// 获取用到的这个属性组
TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.CircleView);
// 获取布局中设置的值,默认值为 Red
mColor = a.getColor(R.styleable.CircleView_circle_color,Color.RED);
// 用完 recycle
a.recycle();
init();
}
3、在布局文件中使用属性
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ffffff"
tools:context="com.hcworld.customview.MainActivity">
<com.hcworld.customview.CircleView
android:id="@+id/circleView1"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_margin="20dp"
android:padding="20dp"
android:background="#000000"
app:circle_color="@color/colorPrimary"
/>
</LinearLayout>
在使用自定义属性的时候,需要注意,这里必须在布局文件中添加 schemas 声明:
xmlns:app="http://schemas.android.com/apk/res-auto"
也就是,只有声明了这个 schemas,才能找到我们自定义的属性字段。
至此,自定义属性步骤就完成了,运行程序,效果如下:
circle6.png
完整的自定义 View 代码:
public class CircleView extends View {
private int mColor = Color.RED;
private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
public CircleView(Context context) {
super(context);
init();
}
public CircleView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
init();
}
public CircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// 获取用到的这个属性组
TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.CircleView);
// 获取布局中设置的值,默认值为 Red
mColor = a.getColor(R.styleable.CircleView_circle_color,Color.RED);
// 用完 recycle
a.recycle();
init();
}
private void init(){
mPaint.setColor(mColor);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 获取宽-测量规则的模式和大小
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
// 获取高-测量规则的模式和大小
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
// 设置wrap_content的默认宽 / 高值
// 默认宽/高的设定并无固定依据,根据需要灵活设置
int mWidth = 200;
int mHeight = 200;
// 当布局参数设置为wrap_content时,设置默认值
if (getLayoutParams().width == ViewGroup.LayoutParams.WRAP_CONTENT && getLayoutParams().height == ViewGroup.LayoutParams.WRAP_CONTENT) {
setMeasuredDimension(mWidth, mHeight);
// 宽 / 高任意一个布局参数为= wrap_content时,都设置默认值
} else if (getLayoutParams().width == ViewGroup.LayoutParams.WRAP_CONTENT) {
setMeasuredDimension(mWidth, heightSize);
} else if (getLayoutParams().height == ViewGroup.LayoutParams.WRAP_CONTENT) {
setMeasuredDimension(widthSize, mHeight);
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//使 padding 生效
final int paddingLeft = getPaddingLeft();
final int paddingRight = getPaddingRight();
final int paddingTop = getPaddingTop();
final int paddintBottom = getPaddingBottom();
int width = getWidth() - paddingLeft - paddingRight;
int height = getHeight() - paddingTop - paddintBottom;
int radius = Math.min(width,height)/2;
canvas.drawCircle(paddingLeft+width/2,paddingTop+ height/2,radius,mPaint);
}
}
2、继承 ViewGroup 派生特殊的 Layout
这种方法主要实现自定义的布局,采用这种方式稍微复杂一点,需要合适的处理 ViewGroup 的测量、布局这两个过程,并同时处理子元素的测量和布局过程。在 Android View 事件体系 的滑动冲突的实例介绍中,自定义了一个 ViewGroup 控件 HorizontalScrollViewEx ,其代码如下:
public class HorizontalScrollViewEx extends ViewGroup {
public HorizontalScrollViewEx(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int measureWidth = 0;
int measuredHeight = 0;
final int childCount = getChildCount();
measureChildren(widthMeasureSpec, heightMeasureSpec);
int widthSpaceSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSpaceSize = MeasureSpec.getSize(heightMeasureSpec);
int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
if (childCount == 0) {
setMeasuredDimension(getLayoutParams().width, getLayoutParams().height);
} else if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST) {
View childView = getChildAt(0);
measureWidth = childView.getMeasuredWidth() * childCount;
measuredHeight = childView.getMeasuredHeight();
setMeasuredDimension(measureWidth, measuredHeight);
} else if (heightSpecMode == MeasureSpec.AT_MOST) {
View childView = getChildAt(0);
measureWidth = widthSpaceSize;
measuredHeight = childView.getMeasuredHeight();
setMeasuredDimension(measureWidth, measuredHeight);
} else if (widthSpecMode == MeasureSpec.AT_MOST) {
View childView = getChildAt(0);
measureWidth = childView.getMeasuredWidth() * childCount;
measuredHeight = heightSpaceSize;
setMeasuredDimension(measureWidth, measuredHeight);
}
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int childLeft = 0;
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
View childView = getChildAt(i);
if (childView.getVisibility() != View.GONE) {
int childWidth = childView.getMeasuredWidth();
childView.layout(childLeft, 0, childLeft + childWidth, childView.getMeasuredHeight());
childLeft += childWidth;
}
}
}
}
现在主要分析一下其 measure 和 layout 的过程。首先我们需要知道的是,对于继承 ViewGroup 来实现自定义 View 是很复杂的,这里只是未来演示而只有 onMeasure 和 onLayout 两个方法。在这个示例中,HorizontalScrollViewEx 要实现的是一个类似 ViewPager 的控件,其内部元素可以水平滑动,并且子元素可以垂直滑动,这里不介绍滑动冲突如何解决,现在考虑自定义控件的实现。
首先假设所有子元素的宽高都是一样的,代码如上所示。现在分析一下上面代码的逻辑。在 onMeasure 方法中,首先会判断是否有子元素,如果没有子元素就直接把自己的宽高设置为0,然后就是判断宽高是不是采用了 wrap_content,如果宽采用了 wrap_content,那么 HorizontalScrollViewEx 的宽度是所有子元素宽度之和,如果高度采用了 wrap_content,那么 HorizontalScrollViewEx 的高度是第一个子元素的高度。
上面代码实现的自定义 View 有两个不规范的地方,首先没有子元素的时候不应该直接把宽高设置为 0,而是应该根据 LayoutParams 中的宽高来做相应的处理。第二个就是在测量 HorizontalScrollViewEx 的宽高时没有考虑它的 padding 和子元素的 margin,但是它的 padding 和 子元素的 margin 还有影响到它的宽高。
接着分析一下 onLayout 方法,这个方法主要是完成子元素的定位。首先,会遍历所有子元素,如果子元素不是处于 GONE 这个状态,那么通过 layotu 这个方法将其放置到合适的位置,由代码可知,放置的顺序,由左向右。这个方法同样不规范的地方在于没有考虑 margin 和 padding ,这也是不对的,在自定义 View 中需要根据实际情况考虑这两个因素。
3、继承 特定的 View 和 继承特定的 ViewGroup
继承特定的 View 和继承特定的 ViewGroup (如 LinearLayout)这两个方式比较简单,就不在举例说明,在 Android View 事件体系 的滑动冲突的实例介绍中,有一个 StickyLayout 布局就是这个类型的,这里不在介绍。
4、总结
自定义 View 是一个综合的技术体系,这里可能设计到 View 的弹性滑动,滑动冲突以及绘制原理等,但是这些都是最基础的知识,只有把这些基础掌握了,才能根据需求设计出高水平的自定义 View。
网友评论