本文主要分析自定义ViewGroup的onLayout()方法的实现。
ViewGroup类的onLayout()函数是abstract型,继承者必须实现,由于ViewGroup的定位就是一个容器,用来盛放子控件的,所以就必须定义要以什么的方式来盛放,比如LinearLayout就是以横向或者纵向顺序存放,而RelativeLayout则以相对位置来摆放子控件,同样,我们的自定义ViewGroup也必须给出我们期望的布局方式,而这个定义就通过onLayout()函数来实现。
我们通过实现一个水平优先布局的视图容器来更加深入地了解onLayout()的实现吧,效果如图所示(黑色方块为子控件,白色部分为自定义布局容器)。该容器的布局方式是,首先水平方向上摆放子控件,水平方向放不下了,则另起一行继续水平摆放。

1.? 自定义ViewGroup的派生类
第一步,则是自定ViewGroup的派生类,继承默认的构造函数。
public class CustomViewGroup extends ViewGroup {
?
? public CustomViewGroup(Context context) {
? ? ? super(context);? ?
? ? }
?
? public CustomViewGroup(Context context, AttributeSet attrs) {
? ? ? super(context, attrs);? ?
? ? }
? ?
? public CustomViewGroup(Context context, AttributeSet attrs, intdefStyle) {
? ? ? super(context, attrs, defStyle);
? ? }
}
2.? 重载onMeasure()方法
为什么要重载onMeasure()方法这里就不赘述了,上一篇文章已经讲过,这里需要注意的是,自定义ViewGroup的onMeasure()方法中,除了计算自身的尺寸外,还需要调用measureChildren()函数来计算子控件的尺寸。
onMeasure()的定义不是本文的讨论重点,因此这里我直接使用默认的onMeasure()定义,当然measureChildren()是必须得加的。
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
? ? measureChildren(widthMeasureSpec, heightMeasureSpec);
? ? super.onMeasure(widthMeasureSpec, heightMeasureSpec);?
}
3.? 实现onLayout()方法
onLayout()函数的原型如下:
//@param changed 该参数指出当前ViewGroup的尺寸或者位置是否发生了改变
//@param left top right bottom 当前ViewGroup相对于其父控件的坐标位置
protected void onLayout(boolean changed,int left, int top, int right, int bottom);
由于我们希望优先横向布局子控件,那么,首先,我们知道总宽度是多少,这个值可以通过getMeasuredWidth()来得到,当然子控件的宽度也可以通过子控件对象的getMeasuredWidth()来得到。
这样,就不复杂了,具体的实现代码如下所示:
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
? ?
? ? int mViewGroupWidth? = getMeasuredWidth();? //当前ViewGroup的总宽度? ? ?
?
? ? int mPainterPosX = left;? //当前绘图光标横坐标位置
? ? int mPainterPosY = top;? //当前绘图光标纵坐标位置?
? ?
? ? int childCount = getChildCount();? ? ? ?
? ? for ( int i = 0; i < childCount; i++ ) {
? ? ? ?
? ? ? ? View childView = getChildAt(i);
?
? ? ? ? int width? = childView.getMeasuredWidth();
? ? ? ? int height = childView.getMeasuredHeight();? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ?
? ? ? ? //如果剩余的空间不够,则移到下一行开始位置
? ? ? ? if( mPainterPosX + width > mViewGroupWidth ) {? ? ? ? ? ? ?
? ? ? ? ? ? mPainterPosX = left;
? ? ? ? ? ? mPainterPosY += height;
? ? ? ? }? ? ? ? ? ? ? ? ? ?
? ? ? ?
? ? ? ? //执行ChildView的绘制
? ? ? ? childView.layout(mPainterPosX,mPainterPosY,mPainterPosX+width, mPainterPosY+height);
? ? ? ?
? ? ? ? //记录当前已经绘制到的横坐标位置
? ? ? ? mPainterPosX += width;
? ? }? ? ?
}
4. 布局文件测试
下面我们就尝试写一个简单的xml文件,来测试一下我们的自定义ViewGroup,我们把子View的背景颜色都设置为黑色,方便我们辨识。
? ? xmlns:tools="http://schemas.android.com/tools"
? ? android:layout_width="match_parent"
? ? android:layout_height="match_parent">
?
? ? ? ? ? ? android:layout_width="100dp"
? ? ? ? android:layout_height="100dp"
? ? ? ? android:layout_margin="10dp"
? ? ? ? android:background="@android:color/black"/>
? ?
? ? ? ? ? ? android:layout_width="100dp"
? ? ? ? android:layout_height="100dp"
? ? ? ? android:layout_margin="10dp"
? ? ? ? android:background="@android:color/black"/>? ?
? ? ? ?
? ? ? ? ? ? android:layout_width="100dp"
? ? ? ? android:layout_height="100dp"
? ? ? ? android:layout_margin="10dp"
? ? ? ? android:background="@android:color/black"/>
? ?
? ? ? ? ? ? android:layout_width="100dp"
? ? ? ? android:layout_height="100dp"
? ? ? ? android:layout_margin="10dp"
? ? ? ? android:background="@android:color/black"/>? ?
?
5. 添加layout_margin
为了让核心逻辑更加清晰,上面的onLayout()实现我隐去了margin的计算,这样就会导