什么是自定义View
定义
在Android系统中,界面中所有能看到的元素都是View。默认情况下,Android系统为开发者提供了很多View,比如用于展示文本信息的TextView,用于展示图片的ImageView等等。但有时,这并不能满足开发者的需求,例如,开发者想要用一个饼状图来展示一组数据,这时如果用系统提供的View就不能实现了,只能通过自定义View来实现。那到底什么是自定义View呢?
自定义View就是通过继承View或者View的子类,并在新的类里面实现相应的处理逻辑(重写相应的方法),以达到自己想要的效果。
继承结构
Android中的所有UI元素都是View的子类:
PS:由于涉及的类太多,如果将所有涉及到的类全部加到类图里面,类图将十分大,所以此处只列出了View的直接子类。
视图体系用到的设计模式
Android View体系如下:
仔细观察,你会发现,Android View的体系结构和设计模式中的组合模式的结构如出一辙:
Android View体系结构中的ViewGroup对应于组合模式中抽象构件(Component和Composite),Android View体系结构中的View对应于组合模式中的叶子构件(Leaf):
为什么要自定义View
大多数情况下,开发者常常会因为下面四个原因去自定义View:
- 让界面有特定的显示风格、效果
- 让控件具有特殊的交互方式
- 优化布局
- 封装
让界面有特定的显示风格、效果
默认情况下,Android系统为开发者提供了很多控件,但有时,这并不能满足开发者的需求。例如,开发者想要用一个饼状图来展示一组数据,这时如果用系统提供的View就不能实现了,只能通过自定义View来实现。
让控件具有特殊的交互方式
默认情况下,Android系统为开发者提供的控件都有属于它们自己的特定的交互方式,但有时,控件的默认交互方式并不能满足开发者的需求。例如,开发者想要缩放ImageView中的图片内容,这时如果用系统提供的ImageView就不能实现了,只能通过自定义ImageView来实现。
优化布局
有时,有些布局如果用系统提供的控件实现起来相当复杂,需要各种嵌套,虽然最终也能实现了想要的效果,但性能极差,此时就可以通过自定义View来减少嵌套层级、优化布局。
封装
有些控件可能在多个地方使用,如大多数App里面的底部Tab,像这样的经常被用到的控件就可以通过自定义View将它们封装起来,以便在多个地方使用。
如何自定义View
在说「如何自定义View?」之前,我们需要知道「自定义View都包括哪些内容」?
自定义View包括三部分内容:
- 布局(Layout)
- 绘制(Drawing)
- 触摸反馈(Event Handling)
布局阶段:确定View的位置和尺寸。
绘制阶段:绘制View的内容。
触摸反馈:确定用户点击了哪里。
其中布局阶段包括测量(measure)和布局(layout)两个过程,另外,布局阶段是为绘制和触摸反馈阶段做支持的,它并没有什么直接作用。正是因为在布局阶段确定了 View 的尺寸和位置,绘制阶段才知道往哪里绘制,触摸反馈阶段才知道用户点的是哪里。
在自定义View和自定义ViewGroup中,布局和绘制流程虽然整体上都是一样的,但在细节方面,自定义View和自定义ViewGroup还是不一样的,所以,接下来分两类进行讨论:
- 自定义View布局、绘制流程
- 自定义ViewGroup布局、绘制流程
自定义View布局、绘制流程
「自定义 View 布局、绘制」主要包括三个阶段:
- 测量阶段(measure)
- 布局阶段(layout)
- 绘制阶段(draw)
自定义View测量阶段
在View的测量阶段会执行两个方法(在测量阶段,View的父View会通过调用 View 的measure()方法将父View对View尺寸要求传进来。紧接着View的measure()方法会做一些前置和优化工作,然后调用View的onMeasure()方法,并通过onMeasure()方法将父View对View的尺寸要求传入。在自定义View中,只有需要修改View的尺寸的时候才需要重写onMeasure()方法。在onMeasure()方法中根据业务需求进行相应的逻辑处理,并在最后通过调用setMeasuredDimension()方法告知父View自己的期望尺寸):
- measure()
- onMeasure()
measure():调度方法,主要做一些前置和优化工作,并最终会调用onMeasure()方法执行实际的测量工作;
onMeasure():实际执行测量任务的方法,主要用与测量View尺寸和位置。在自定义View的onMeasure()方法中,View根据自己的特性和父View对自己的尺寸要求算出自己的期望尺寸,并通过setMeasuredDimension()方法告知父View自己的期望尺寸。
onMeasure()计算View期望尺寸方法如下:
参考父View的对View的尺寸要求和实际业务需求计算出View的期望尺寸:
- 解析widthMeasureSpec
- 解析heightMeasureSpec
- 将「根据实际业务需求计算出View的尺寸」根据「父View的对View的尺寸要求」进行相应的修正得出View的期望尺寸(通过调用resolveSize()方法)
通过setMeasuredDimension()保存View的期望尺寸(实际上是通过setMeasuredDimension()告知父View自己的期望尺寸);
注意:
多数情况下,这里的期望尺寸就是View的最终尺寸。不过最终View的期望尺寸和实际尺寸是不是一样还要看它的父View会不会同意。View的父View最终会通过调用View的layout()方法告知View的实际尺寸,并且在layout()方法中View需要将这个实际尺寸保存下来,以便绘制阶段和触摸反馈阶段使用,这也是View需要在layout()方法中保存自己实际尺寸的原因——因为绘制阶段和触摸反馈阶段要使用啊!
自定义View布局阶段
在View的布局阶段会执行两个方法(在布局阶段,View的父View会通过调用View的layout()方法将View的实际尺寸(父View根据View的期望尺寸确定的View的实际尺寸)传给View,View需要在layout()方法中将自己的实际尺寸保存(通过调用View的setFrame()方法保存,在setFrame()方法中,又会通过调用onSizeChanged()方法告知开发者View的尺寸修改了)以便在绘制和触摸反馈阶段使用。保存View的实际尺寸之后,View的layout()方法又会调用View的onLayout()方法,不过View的onLayout()方法是一个空实现,因为它没有子View):
- layout()
- onLayout()
layout():保存View的实际尺寸。调用setFrame()方法保存View的实际尺寸,调用onSizeChanged()通知开发者View的尺寸更改了,并最终会调用onLayout()方法让子View布局(如果有子View的话。因为自定义View中没有子View,所以自定义View的onLayout()方法是一个空实现);
onLayout():空实现,什么也不做,因为它没有子View。如果是ViewGroup的话,在onLayout()方法中需要调用子View的layout()方法,将子View的实际尺寸传给它们,让子View保存自己的实际尺寸。因此,在自定义View中,不需重写此方法,在自定义ViewGroup中,需重写此方法。
注意:
layout()&onLayout()并不是「调度」与「实际做事」的关系,layout()和onLayout()均做事,只不过职责不同。
自定义View绘制阶段
在View的绘制阶段会执行一个方法——draw(),draw()是绘制阶段的总调度方法,在其中会调用绘制背景的方法drawBackground()、绘制主体的方法onDraw()、绘制子View的方法dispatchDraw()和绘制前景的方法onDrawForeground()。
draw():绘制阶段的总调度方法,在其中会调用绘制背景的方法drawBackground()、绘制主体的方法onDraw()、绘制子View的方法dispatchDraw()和绘制前景的方法onDrawForeground();
drawBackground():绘制背景的方法,不能重写,只能通过xml布局文件或者setBackground()来设置或修改背景;
onDraw():绘制View主体内容的方法,通常情况下,在自定义View的时候,只用实现该方法即可;
dispatchDraw():绘制子View的方法。同onLayout()方法一样,在自定义View中它是空实现,什么也不做。但在自定义ViewGroup中,它会调用ViewGroup.drawChild()方法,在ViewGroup.drawChild()方法中又会调用每一个子View的View.draw()让子View进行自我绘制;
onDrawForeground():绘制View前景的方法,也就是说,想要在主体内容之上绘制东西的时候就可以在该方法中实现。
注意:
Android里面的绘制都是按顺序的,先绘制的内容会被后绘制的盖住。如,你在重叠的位置「先画圆再画方」和「先画方再画圆」所呈现出来的结果是不同的,具体表现为下表:
自定义View布局、绘制流程时序图
自定义ViewGroup布局、绘制流程
「自定义ViewGroup布局、绘制」主要包括三个阶段:
- 测量阶段(measure)
- 布局阶段(layout)
- 绘制阶段(draw)
自定义ViewGroup测量阶段
同自定义View一样,在自定义ViewGroup的测量阶段会执行两个方法:
- measure()
- onMeasure()
measure():调度方法,主要做一些前置和优化工作,并最终会调用onMeasure()方法执行实际的测量工作;
onMeasure() :实际执行测量任务的方法,与自定义View不同,在自定义ViewGroup的 onMeasure() 方法中,ViewGroup会递归调用子View的measure()方法,并通过measure()将ViewGroup对子View的尺寸要求(ViewGroup会根据开发者对子View的尺寸要求、自己的父View(ViewGroup的父View) 对自己的尺寸要求和自己的可用空间计算出自己对子View的尺寸要求)传入,对子View进行测量,并把测量结果临时保存,以便在布局阶段使用。测量出子View的实际尺寸之后,ViewGroup会根据子View的实际尺寸计算出自己的期望尺寸,并通过setMeasuredDimension()方法告知父View(ViewGroup 的父 View)自己的期望尺寸。
具体流程如下:
- 运行前,开发者在xml中写入对ViewGroup和ViewGroup子View的尺寸要求layout_xxx
- ViewGroup在自己的onMeasure()方法中,根据开发者在xml中写的对ViewGroup子View的尺寸要求、自己的父View(ViewGroup的父View) 对自己的尺寸要求和自己的可用空间计算出自己对子View的尺寸要求,并调用每个子View的measure()将ViewGroup对子View的尺寸要求传入,测量子View尺寸
- ViewGroup在子View计算出期望尺寸之后(在ViewGroup的onMeasure()方法中,ViewGroup递归调用每个子View的measure()方法,子View在自己的onMeasure()方法中会通过调用setMeasuredDimension()方法告知父View(ViewGroup)自己的期望尺寸),得出子View的实际尺寸和位置,并暂时保存计算结果,以便布局阶段使用
- ViewGroup根据子View的尺寸和位置计算自己的期望尺寸,并通过setMeasuredDimension()方法告知父View自己的期望尺寸。如果想要做的更好,可以在「ViewGroup根据子View的尺寸和位置计算出自己的期望尺寸」之后,再结合ViewGroup的父View对ViewGroup的尺寸要求进行修正(通过resolveSize()方法),这样得出的ViewGroup的期望尺寸更符合ViewGroup的父View对ViewGroup的尺寸要求
自定义ViewGroup布局阶段
同自定义 View 一样,在自定义 ViewGroup 的布局阶段会执行两个方法:
- layout()
- onLayout()
layout():保存ViewGroup的实际尺寸。调用setFrame()方法保存ViewGroup的实际尺寸,调用onSizeChanged()通知开发者ViewGroup的尺寸更改了,并最终会调用onLayout()方法让子View布局;
onLayout():ViewGroup会递归调用每个子View的layout()方法,把测量阶段计算出的子View的实际尺寸和位置传给子View,让子View保存自己的实际尺寸和位置。
自定义ViewGroup绘制阶段
同自定义View一样,在自定义ViewGroup的绘制阶段会执行一个方法——draw()。draw()是绘制阶段的总调度方法,在其中会调用绘制背景的方法 drawBackground()、绘制主体的方法onDraw()、绘制子View的方法 dispatchDraw()和绘制前景的方法onDrawForeground():
draw():绘制阶段的总调度方法,在其中会调用绘制背景的方法drawBackground()、绘制主体的方法onDraw()、绘制子View的方法dispatchDraw()和绘制前景的方法onDrawForeground();
在ViewGroup中,你也可以重写绘制主体的方法onDraw()、绘制子View的方法dispatchDraw()和绘制前景的方法onDrawForeground()。但大多数情况下,自定义ViewGroup是不需要重写任何绘制方法的。因为通常情况下,ViewGroup的角色是容器,一个透明的容器,它只是用来盛放子View的。
自定义ViewGroup布局、绘制流程时序图
自定义View步骤
- 自定义属性的声明与获取
- 重写测量阶段相关方法(onMeasure())
- 重写布局阶段相关方法(onLayout()(仅ViewGroup需要重写))
- 重写绘制阶段相关方法(onDraw()绘制主体、dispatchDraw()绘制子View和onDrawForeground() 绘制前景)
- onTouchEvent()
- onInterceptTouchEvent()(仅ViewGroup有此方法)
实战演练
自定义View
自定义View的绘制内容
自定义View,它的内容是「三个半径不同、颜色不同的同心圆」,效果图如下:
自定义属性的声明与获取
1 | //在 xml 中自定义 View 属性 |
1 | //在 View 构造函数中获取自定义 View 属性 |
重写测量阶段相关方法(onMeasure())
由于不需要自定义View的尺寸,所以,不用重写该方法。
重写布局阶段相关方法(onLayout()(仅 ViewGroup 需要重写))
由于没有子View需要布局,所以,不用重写该方法。
重写绘制阶段相关方法(onDraw()绘制主体、dispatchDraw()绘制子View和onDrawForeground()绘制前景)
1 | //重写 onDraw() 方法,自定义 View 内容 |
onTouchEvent()
由于View不需要和用户交互,所以,不用重写该方法。
onInterceptTouchEvent()(仅ViewGroup有此方法)
ViewGroup的方法。
最终效果如下:
此时,即使你在xml中将CircleView的宽、高声明为「match_parent」,你会发现最终的显示效果都是一样的。
主要原因是:默认情况下,View的onMeasure()方法在通过setMeasuredDimension()告知父View自己的期望尺寸时,会调用getDefaultSize()方法。在getDefaultSize()方法中,又会调用getSuggestedMinimumWidth()和getSuggestedMinimumHeight()获取建议的最小宽度和最小高度,并根据最小尺寸和父View对自己的尺寸要求进行修正。
最主要的是,在getDefaultSize()方法中修正的时候,会将MeasureSpec.AT_MOST和MeasureSpec.EXACTLY一视同仁,直接返回父View对View的尺寸要求:
1 | //1. 默认 onMeasure 的处理 |
正是因为在getDefaultSize()方法中处理的时候,将MeasureSpec.AT_MOST和MeasureSpec.EXACTLY一视同仁,所以才有了上面「在xml中应用CircleView的时候,无论将CircleView的尺寸设置为match_parent还是wrap_content效果都一样」的现象。
具体分析如下:
注:
上表中,「View的父View对View的尺寸要求」是View的父View根据「开发者对子View的尺寸要求」、「自己的父View(View的父View的父View) 对自己的尺寸要求」和「自己的可用空间」计算出自己对子View的尺寸要求。
另外,由执行结果可知,上表中的specSize实际上等于View的尺寸:
1 | 2019-08-13 17:28:26.855 16024-16024/com.smart.a03_view_custom_view_example E/TAG: Width(getWidth()): 1080 Height(getHeight()): 1584 |
自定义View的尺寸和绘制内容
自定义View,它的内容是「三个半径不同、颜色不同的同心圆」,效果图如下:
自定义属性的声明与获取
1 | //在 xml 中自定义 View 属性 |
1 | //在 View 构造函数中获取自定义 View 属性 |
重写测量阶段相关方法(onMeasure())
1 | //onMeasure() |
重写布局阶段相关方法(onLayout()(仅ViewGroup需要重写))
由于没有子View需要布局,所以,不用重写该方法。
重写绘制阶段相关方法(onDraw()绘制主体、dispatchDraw()绘制子View和onDrawForeground()绘制前景)
1 | // 重写 onDraw() 方法,自定义 View 内容 |
onTouchEvent()
由于View不需要和用户交互,所以,不用重写该方法。
onInterceptTouchEvent()(仅 ViewGroup 有此方法)
ViewGroup的方法。
最终效果如下:
当在xml中将MeasuredCircleView的宽、高声明为「match_parent」时,显示效果跟CircleView显示效果一样。
但是,当在xml中将MeasuredCircleView的宽、高声明为「wrap_content」时,显示效果是下面这个样子:
其实,也很好理解:
自定义ViewGroup
自定义ViewGroup,标签布局,效果图如下:
无论是自定义View还是自定义ViewGroup,大致的流程都是一样的:
- 自定义属性的声明与获取
- 重写测量阶段相关方法(onMeasure())
- 重写布局阶段相关方法(onLayout()(仅 ViewGroup 需要重写))
- 重写绘制阶段相关方法(onDraw() 绘制主体、dispatchDraw() 绘制子 View 和 onDrawForeground() 绘制前景)
- onTouchEvent()
- onInterceptTouchEvent()(仅 ViewGroup 有此方法)
只不过,大多数情况下,ViewGroup不需要「自定义属性」和「重写绘制阶段相关方法」,但有些时候还是需要的,如,开发者想在ViewGroup的所有子View上方绘制一些内容,就可以通过重写ViewGroup的onDrawForeground()来实现。
自定义属性的声明与获取
在自定义ViewGroup中「自定义属性的声明与获取」的方法与在自定义View中「自定义属性的声明与获取」的方法一样,且因为大多数情况下,在自定义ViewGroup中是不需要自定义属性的,所以,在这里就不自定义属性了。
重写测量阶段相关方法(onMeasure())
1 | //2. 重写测量阶段相关方法(onMeasure()); |
重写布局阶段相关方法(onLayout()(仅ViewGroup需要重写))
1 | //重写布局阶段相关方法(onLayout()(仅 ViewGroup 需要重写)); |
重写绘制阶段相关方法(onDraw()绘制主体、dispatchDraw()绘制子View和onDrawForeground()绘制前景)
默认情况下,自定义ViewGroup时是不需要重写任何绘制阶段的方法的,因为ViewGroup的角色是容器,一个透明的容器,它只是用来盛放子View的。
注意:
- 默认情况下,系统会自动调用View Group的dispatchDraw()方法,所以不需要重写该方法
- 出于效率的考虑,ViewGroup默认会绕过draw()方法,换而直接执行dispatchDraw(),以此来简化绘制流程。所以如果你自定义了一个ViewGroup,并且需要在它的除dispatchDraw()方法以外的任何一个绘制方法内绘制内容,你可能会需要调用View.setWillNotDraw(false)方法来切换到完整的绘制流程(是「可能」而不是「必须」的原因是,有些ViewGroup是已经调用过setWillNotDraw(false)了的,例如ScrollView)。除了可以通过调用View.setWillNotDraw(false)方法来切换到完整的绘制流程之外,你还可以通过给ViewGroup设置背景来切换到完整的绘制流程
onTouchEvent()
由于ViewGroup不需要和用户交互,所以,不用重写该方法。
onInterceptTouchEvent()(仅ViewGroup有此方法)
由于ViewGroup不需要和用户交互且ViewGroup不需要拦截子View的MotionEvent,所以,不用重写该方法。
最终效果如下:
总结
自定义View包括三部分内容:
- 布局(Layout)
- 绘制(Drawing)
- 触摸反馈(Event Handling)
其中布局阶段确定了View的位置和尺寸,该阶段主要是为了后面的绘制和触摸反馈做支持;绘制阶段主要用于绘制View的内容(大多数情况下,只用实现OnDraw方法(Where)方法、按照指定顺序调用相关API(How)即可实现自定义绘制(What));触摸反馈阶段确定了用户点击了哪里,三者相辅相成,缺一不可。