需求千变万化,总会出现官方控件无法满足的应用场景及特效,这个时候只能去自定义控件。自定义控件的种类主要分为:
- 继承官方控件,拓展其功能,如跑马灯效果
- 将已有控件组合起来,整合成一个模块,如标题栏
- 完全的自定义控件,自己完成控件的绘制布局及事件处理,如图表
下面会从最基础的View开始,从基础到拓展,梳理整个自定义控件的流程,通过自定义跑马灯效果、图表、标题栏、地图、加载框等例子来熟练自定义控件,保证今后能够应对各种自定义需求。
View的绘制流程
1、View和ViewGroup
View 是用户页面基本的构建块,也是Android中所有控件的基类,一般自定义控件都是继承View或者View的子类,完成特定的绘制和交互功能。
ViewGroup继承自View,本质上也是一个View,但它特殊在能包含其他的View,并对包含的View进行布局,这类View称为父容器。
所以Android用户页面实际上就是通过View和ViewGroup嵌套构建的,如下面这个例子
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<RelativealeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</LinearLayout>
这个布局中的LinearLayout和RelativealeLayout是ViewGroup,ImageView和TextView是普通的View,LinearLayout嵌套了ImageView和RelativealeLayout,RelativealeLayout又嵌套了TextView,就靠这种嵌套构建了我们看到的用户页面。
2、View的绘制流程
用画画做例子,画画需要先想内容画多大(测量),然后预估画在纸上什么位置(布局),最后落笔(绘制),View的主要绘制流程也绕不开这三个,measure(测量)、layout(布局)、draw(绘制),View的这三个API就是一个最基本的流程。以下面一个简单的例子讲解。
SampleView的实现
public class SampleView extends View {
public SampleView(Context context) {
super(context);
}
public SampleView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//单位px
setMeasuredDimension(20,20);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
}
布局中配置控件大小
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.myapplication.base.SampleView
android:layout_width="200dp"
android:layout_height="200dp"
android:background="@color/colorPrimaryDark" />
</RelativeLayout>
- 测量
View类中的onMeasure方法完成了控件大小的测量,在onMeasure方法中默认调用setMeasuredDimension方法来设置测量的宽高,setMeasuredDimension方法非常重要,它内部完成了对成员变量mMeasuredWidth和mMeasuredHeight的赋值,这两个值保证了控件在页面的大小。
SampleView的onMeasure方法中,我主动调用了setMeasuredDimension重新给了宽高,这样覆盖了
原本 super.onMeasure方法对控件大小的设置。最后显示的是20px的大小。
相关源码如下:
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),
getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
}
protected final void setMeasuredDimension(int measuredWidth, int measuredHeight) {
...
//仅贴出关键代码
setMeasuredDimensionRaw(measuredWidth, measuredHeight);
}
private void setMeasuredDimensionRaw(int measuredWidth, int measuredHeight) {
mMeasuredWidth = measuredWidth;
mMeasuredHeight = measuredHeight;
...
}
从实际效果和源码上可以将整个测量过程分析出来:SampleView 在布局文件中 layout_width 和 layout_height 分别为200dp,父容器 RelativeLayout 通过获取 SampleView 的 LayoutParams 对象从而获取了layout_width 和 layout_height ,然后根据实际情况构建对 SampleView 的 widthMeasureSpec 和 heightMeasureSpec ,跟着 RelativeLayout 调用 SampleView 的measure方法,传入widthMeasureSpec 和 heightMeasureSpec 作为参数,进而传给了onMeasure方法,完成整个测量。
- 布局
public void layout(int l, int t, int r, int b) {
if ((mPrivateFlags3 & PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT) != 0) {
onMeasure(mOldWidthMeasureSpec, mOldHeightMeasureSpec);
mPrivateFlags3 &= ~PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT;
}
...
}
View类中布局方法为layout(int l, int t, int r, int b) ,l、t、r、b分别相当于相对于父容器上下左右的位置,如图所示。
如果以父容器为坐标系,那么(l,t)可以看作View的左上角位置,(r,b)可以看作右下角位置,只要这四个位置确定,View的位置也就确定了。由于这四个参数都是相对于父容器的,所以此方法由父容器调用,来指定子View相对于自己的位置。
- 绘制
public void draw(Canvas canvas) {
final int privateFlags = mPrivateFlags;
mPrivateFlags = (privateFlags & ~PFLAG_DIRTY_MASK) | PFLAG_DRAWN;
// Step 1, draw the background, if needed
int saveCount;
drawBackground(canvas);
// skip step 2 & 5 if possible (common case)
final int viewFlags = mViewFlags;
boolean horizontalEdges = (viewFlags & FADING_EDGE_HORIZONTAL) != 0;
boolean verticalEdges = (viewFlags & FADING_EDGE_VERTICAL) != 0;
if (!verticalEdges && !horizontalEdges) {
// Step 3, draw the content
onDraw(canvas);
// Step 4, draw the children
dispatchDraw(canvas);
drawAutofilledHighlight(canvas);
// Overlay is part of the content and draws beneath Foreground
if (mOverlay != null && !mOverlay.isEmpty()) {
mOverlay.getOverlayView().dispatchDraw(canvas);
}
// Step 6, draw decorations (foreground, scrollbars)
onDrawForeground(canvas);
// Step 7, draw the default focus highlight
drawDefaultFocusHighlight(canvas);
if (isShowingLayoutBounds()) {
debugDrawFocus(canvas);
}
// we're done...
return;
}
可以看到View的draw方法注释中将绘制过程已经写的非常清楚了,整个过程分成了7步,我们这里只考虑第三步onDraw方法,主要用于绘制View的内容。这个方法在View类中是空方法,需要自己实现,有兴趣可以看看现有控件源码中的onDrew方法,这个方法也是由父容器调用的,后面都会在ViewGroup的绘制流程中讲到。
3、ViewGroup的绘制流程
ViewGroup继承自View,那么ViewGroup 的绘制流程也遵循View的绘制流程,但是作为一个可以包含View的容器,它需要对子View的绘制流程负责。
- ViewGroup的测量
ViewGroup测量和View的测量过程一样,只是多了对子View的测量,在ViewGroup 的onMeasure方法中,遍历所有的子View,获取子View在布局中的参数LayoutParams的宽高,然后指定一个模式,将宽高和模式构建成子View的宽高限制,然后调用子View的measure方法。代码如下:
public class SampleGroupView extends ViewGroup {
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
measureChildren(widthMeasureSpec,heightMeasureSpec);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
protected void measureChildren(int widthMeasureSpec, int heightMeasureSpec) {
final int size = mChildrenCount;
final View[] children = mChildren;
for (int i = 0; i < size; ++i) { //遍历所有的子View
final View child = children[i];
if ((child.mViewFlags & VISIBILITY_MASK) != GONE) {
measureChild(child, widthMeasureSpec, heightMeasureSpec);
}
}
}
protected void measureChild(View child, int parentWidthMeasureSpec,
int parentHeightMeasureSpec) {
final LayoutParams lp = child.getLayoutParams();//获取布局参数
//创建对子View宽度的限制
final int childWidthMeasureSpec = getChildMeasureSpec(parentWidthMeasureSpec,
mPaddingLeft + mPaddingRight, lp.width);
//创建对子View高度的限制
final int childHeightMeasureSpec = getChildMeasureSpec(parentHeightMeasureSpec,
mPaddingTop + mPaddingBottom, lp.height);
//测量子View
child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
}
}
- ViewGroup的布局
ViewGroup的布局也遵循View的布局流程,只是它还要发起对子View的布局,如果一个View是ViewGroup,那它必须要实现onLayout方法去布局子View,和测量相似的流程,遍历-判断模式-计算相对自己的四个位置-调用子View的layout方法。以RelatieaveLayout的onLayout代码为例:
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
// The layout has actually already been performed and the positions
// cached. Apply the cached values to the children.
final int count = getChildCount();//获取子View个数
for (int i = 0; i < count; i++) {//遍历所有子View
View child = getChildAt(i);
if (child.getVisibility() != GONE) {//当子View可见时才布局
//获取计算好的布局参数
RelatieaveLayout.LayoutParams st =
(RelativeLayout.LayoutParams) child.getLayoutParams();
//布局子View
child.layout(st.mLeft, st.mTop, st.mRight, st.mBottom);
}
}
}
- ViewGroup的绘制
ViewGroup的绘制过程和View的绘制过程有少许差别,如果ViewGroup没有背景,自己本身不会调用draw(Canvas canvas)方法来绘制自己,而是直接调用dispatchDraw(Canvas canvas)去绘制它的子View:
@Override
protected void dispatchDraw(Canvas canvas) {
...
//仅贴出关键代码
for (int i = 0; i < childrenCount; i++) {
while (transientIndex >= 0 && mTransientIndices.get(transientIndex) == i) {
...
final int childIndex = getAndVerifyPreorderedIndex(childrenCount, i, customOrder);
final View child = getAndVerifyPreorderedView(preorderedList, children, childIndex);
if ((child.mViewFlags & VISIBILITY_MASK) == VISIBLE || child.getAnimation() != null) {
more |= drawChild(canvas, child, drawingTime);
}
}
...
}
protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
return child.draw(canvas, this, drawingTime);
}
这里的draw(canvas, this, drawingTime)带了三个参数,不是我们之前用的draw(Canvas canvas)一个参数方法。原因很简单,因为子View也有可能是ViewGroup,代码如下:
// Fast path for layouts with no backgrounds
if ((mPrivateFlags & PFLAG_SKIP_DRAW) == PFLAG_SKIP_DRAW) {
//如果绘制的子View本身是一个ViewGroup且没有背景,直接调用dispatchDraw去绘制它的子View
mPrivateFlags &= ~PFLAG_DIRTY_MASK;
dispatchDraw(canvas);
} else {
draw(canvas);
}
如果你在ViewGroup中调用了setWillNotDraw(false)方法,就会不满足跳过绘制的条件,直接调用draw(canvas)方法绘制ViewGroup,接着在draw方法中的第四步再来调用 dispatchDraw(canvas)。
本文主要介绍了View和ViewGroup的基本绘制流程,后面会简单的自定义几个常用的控件用于熟悉自定义的操作,再深入的解析绘制流程,然后再来几个复杂点的自定义,即 原理-实战-深入-实战。