Android進階之深入理解View的布局(Layout)流程原理
前言
前一篇我們講解了View的Measure過程,那今天我們來講解下Layout;
View的layout方法作用是確定View的位置,ViewGroup的layout方法不僅要確定自身的位置,還有確定子View的位置;
Android進階之深入理解View的測量(Measure)流程機制
一、Layout流程源碼詳解
1、performLayout
View三大工作流程是從ViewRootImpl#performTraversals開始的,其中performMeasure、performLayout、performDraw方法分別對應了View的測量、布局、繪制;
從performLayout開始分析View布局流程;
- private void performLayout(WindowManager.LayoutParams lp, int desiredWindowWidth,
- int desiredWindowHeight) {
- mLayoutRequested = false;
- mScrollMayChange = true;
- mInLayout = true;
- final View host = mView;
- Trace.traceBegin(Trace.TRACE_TAG_VIEW, "layout");
- try {
- host.layout(0, 0, host.getMeasuredWidth(), host.getMeasuredHeight());
- //省略...
- } finally {
- Trace.traceEnd(Trace.TRACE_TAG_VIEW);
- }
- mInLayout = false;
- }
方法中的mView其實就是DecorView,那么host也就代表了DecorView,DecorView其實是個FrameLayout,ViewGroup并沒有重寫layout方法,所以我們來看下View#layout方法
2、layout
- /**
- * 源碼分析起始點:layout()
- * 作用:確定View本身的位置,即設置View本身的四個頂點位置
- */
- public void layout(int l, int t, int r, int b) {
- // 當前視圖的四個頂點
- int oldL = mLeft;
- int oldT = mTop;
- int oldB = mBottom;
- int oldR = mRight;
- // 1. 確定View的位置:setFrame() / setOpticalFrame()
- // 即初始化四個頂點的值、判斷當前View大小和位置是否發(fā)生了變化 & 返回
- // setFrame() ->分析1
- // setOpticalFrame() ->分析2
- boolean changed = isLayoutModeOptical(mParent) ? setOpticalFrame(l, t, r, b) : setFrame(l, t, r, b);
- // 2. 若視圖的大小 & 位置發(fā)生變化
- // 會重新確定該View所有的子View在父容器的位置:onLayout()
- if (changed || (mPrivateFlags & PFLAG_LAYOUT_REQUIRED) == PFLAG_LAYOUT_REQUIRED) {
- onLayout(changed, l, t, r, b);
- // 對于單一View的laytou過程:由于單一View是沒有子View的,故onLayout()是一個空實現 ->分析3
- // 對于ViewGroup的laytou過程:由于確定位置與具體布局有關,所以onLayout()在ViewGroup為1個抽象方法,需自定義重寫實現(下面的章節(jié)會詳細說明)
- }
- /**
- * 分析1:setFrame()
- * 作用:根據傳入的4個位置值,設置View本身的四個頂點位置
- * 即:最終確定View本身的位置
- */
- protected boolean setFrame(int left, int top, int right, int bottom) {
- // 通過以下賦值語句記錄下了視圖的位置信息,即確定View的四個頂點
- // 從而確定了視圖的位置
- mLeft = left;
- mTop = top;
- mRight = right;
- mBottom = bottom;
- mRenderNode.setLeftTopRightBottom(mLeft, mTop, mRight, mBottom);
- }
- /**
- * 分析2:setOpticalFrame()
- * 作用:根據傳入的4個位置值,設置View本身的四個頂點位置
- * 即:最終確定View本身的位置
- */
- private boolean setOpticalFrame(int left, int top, int right, int bottom) {
- Insets parentInsets = mParent instanceof View ?
- ((View) mParent).getOpticalInsets() : Insets.NONE;
- Insets childInsets = getOpticalInsets();
- // 內部實際上是調用setFrame()
- return setFrame(
- left + parentInsets.left - childInsets.left,
- top + parentInsets.top - childInsets.top,
- right + parentInsets.left + childInsets.right,
- bottom + parentInsets.top + childInsets.bottom);
- }
- // 回到調用原處
- /**
- * 分析3:onLayout()
- * 注:對于單一View的laytou過程
- * 1. 由于單一View是沒有子View的,故onLayout()是一個空實現
- * 2. 由于在layout()中已經對自身View進行了位置計算:setFrame() / setOpticalFrame()
- * 3. 所以單一View的layout過程在layout()后就已完成了
- */
- protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
- // 參數說明
- // changed 當前View的大小和位置改變了
- // left 左部位置
- // top 頂部位置
- // right 右部位置
- // bottom 底部位置
- }
3、setFrame
layout方法是用來確定自身位置的,其內部調用了setOpticalFrame、setFrame和onLayout方法,setOpticalFrame內部又會調用setFrame。所以我們先來看setFrame方法,如下
- protected boolean setFrame(int left, int top, int right, int bottom) {
- boolean changed = false;
- if (mLeft != left || mRight != right || mTop != top || mBottom != bottom) {
- //判斷View的位置是否發(fā)生改變
- changed = true;
- // Remember our drawn bit
- int drawn = mPrivateFlags & PFLAG_DRAWN;
- int oldWidth = mRight - mLeft;//獲取原來的寬度
- int oldHeight = mBottom - mTop;//獲取原來的高度
- int newWidth = right - left;//獲取新的寬度
- int newHeight = bottom - top;//獲取新的高度
- //判斷View的尺寸是否發(fā)生改變
- boolean sizeChanged = (newWidth != oldWidth) || (newHeight != oldHeight);
- // Invalidate our old position
- invalidate(sizeChanged);
- //對mLeft、mTop、mRight 、mBottom初始化,View自身的位置也就確定了。
- mLeft = left;
- mTop = top;
- mRight = right;
- mBottom = bottom;
- mRenderNode.setLeftTopRightBottom(mLeft, mTop, mRight, mBottom);
- mPrivateFlags |= PFLAG_HAS_BOUNDS;
- //如果View尺寸發(fā)生改變,將執(zhí)行View#sizeChange方法,在sizeChange方法內部會調用View#onSizeChanged方法。
- if (sizeChanged) {
- sizeChange(newWidth, newHeight, oldWidth, oldHeight);
- }
- //省略...
- }
- return changed;
- }
在setFrame方法中對mLeft、mTop、mRight 、mBottom進行初始化,mLeft、mTop分別對應View左上角的橫坐標和縱坐標,mRight 、mBottom分別對應了View右下角的橫坐標和縱坐標,View的四個頂點的坐標確定了,View自身的位置也就確定了;
4、FrameLayout#onLayout
再回到layout方法,在通過setFrame方法確定了自身位置后,接下來會調用onLayout方法,這個方法其實用來確定子View的位置的;
不過View和ViewGroup都沒有真正實現onLayout,因為onLayout和onMeasure類似,其過程都與具體的布局有關;
以FrameLayout為例來分析onLayout過程,FrameLayout#onLayout
- @Override
- protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
- layoutChildren(left, top, right, bottom, false /* no force left gravity */);
- }
- 其內部調用了layoutChildren方法
- void layoutChildren(int left, int top, int right, int bottom,
- boolean forceLeftGravity) {
- final int count = getChildCount();//獲取子View的數量
- //parentLeft、parentTop分別代表子View所占區(qū)域左上角的橫坐標和縱坐標
- //parentRight、parentBottom分別代表子View所占區(qū)域右下角的橫坐標和縱坐標
- final int parentLeft = getPaddingLeftWithForeground();
- final int parentRight = right - left - getPaddingRightWithForeground();
- final int parentTop = getPaddingTopWithForeground();
- final int parentBottom = bottom - top - getPaddingBottomWithForeground();
- mForegroundBoundsChanged = true;
- //遍歷子View
- for (int i = 0; i < count; i++) {
- final View child = getChildAt(i);
- if (child.getVisibility() != GONE) {
- final LayoutParams lp = (LayoutParams) child.getLayoutParams();
- //獲取子View的測量寬、高
- final int width = child.getMeasuredWidth();
- final int height = child.getMeasuredHeight();
- int childLeft;
- int childTop;
- //獲取子View 設置的Gravity,如果子View沒有設置Gravity,則用默認的Gravity:DEFAULT_CHILD_GRAVITY。
- int gravity = lp.gravity;
- if (gravity == -1) {
- gravity = DEFAULT_CHILD_GRAVITY;
- }
- final int layoutDirection = getLayoutDirection();
- final int absoluteGravity = Gravity.getAbsoluteGravity(gravity, layoutDirection);
- final int verticalGravity = gravity & Gravity.VERTICAL_GRAVITY_MASK;
- //水平方向上,通過設置的Gravity,來確定childLeft,即每個子View左上角的橫坐標
- switch (absoluteGravity & Gravity.HORIZONTAL_GRAVITY_MASK) {
- case Gravity.CENTER_HORIZONTAL:
- childLeft = parentLeft + (parentRight - parentLeft - width) / 2 +
- lp.leftMargin - lp.rightMargin;
- break;
- case Gravity.RIGHT:
- if (!forceLeftGravity) {
- childLeft = parentRight - width - lp.rightMargin;
- break;
- }
- case Gravity.LEFT:
- default:
- childLeft = parentLeft + lp.leftMargin;
- }
- //豎直方向上,通過設置的Gravity,來確定childTop,即每個子View左上角的縱坐標
- switch (verticalGravity) {
- case Gravity.TOP:
- childTop = parentTop + lp.topMargin;
- break;
- case Gravity.CENTER_VERTICAL:
- childTop = parentTop + (parentBottom - parentTop - height) / 2 +
- lp.topMargin - lp.bottomMargin;
- break;
- case Gravity.BOTTOM:
- childTop = parentBottom - height - lp.bottomMargin;
- break;
- default:
- childTop = parentTop + lp.topMargin;
- }
- //調用子View的layout 方法
- child.layout(childLeft, childTop, childLeft + width, childTop + height);
- }
- }
- }
在該方法內部遍歷所有子View過程中,通過子View設置的Gravity,獲去其childLeft、childTop即子View的左上角的橫坐標和縱坐標,最后執(zhí)行子View的layout方法,來確定子View的位置
5、LinearLayout#onLayout
LinearLayout復寫的onLayout()分析
- /**
- * 源碼分析:LinearLayout復寫的onLayout()
- * 注:復寫的邏輯 和 LinearLayout measure過程的 onMeasure()類似
- */
- @Override
- protected void onLayout(boolean changed, int l, int t, int r, int b) {
- // 根據自身方向屬性,而選擇不同的處理方式
- if (mOrientation == VERTICAL) {
- layoutVertical(l, t, r, b);
- } else {
- layoutHorizontal(l, t, r, b);
- }
- }
- // 由于垂直/水平方向類似,所以此處僅分析垂直方向(Vertical)的處理過程 ->分析1
- /**
- * 分析1:layoutVertical(l, t, r, b)
- */
- void layoutVertical(int left, int top, int right, int bottom) {
- // 子View的數量
- final int count = getVirtualChildCount();
- // 1. 遍歷子View
- for (int i = 0; i < count; i++) {
- final View child = getVirtualChildAt(i);
- if (child == null) {
- childTop += measureNullChild(i);
- } else if (child.getVisibility() != GONE) {
- // 2. 計算子View的測量寬 / 高值
- final int childWidth = child.getMeasuredWidth();
- final int childHeight = child.getMeasuredHeight();
- // 3. 確定自身子View的位置
- // 即:遞歸調用子View的setChildFrame(),實際上是調用了子View的layout() ->分析2
- setChildFrame(child, childLeft, childTop + getLocationOffset(child),
- childWidth, childHeight);
- // childTop逐漸增大,即后面的子元素會被放置在靠下的位置
- // 這符合垂直方向的LinearLayout的特性
- childTop += childHeight + lp.bottomMargin + getNextLocationOffset(child);
- i += getChildrenSkipCount(child, i);
- }
- }
- }
- /**
- * 分析2:setChildFrame()
- */
- private void setChildFrame( View child, int left, int top, int width, int height){
- child.layout(left, top, left ++ width, top + height);
- // setChildFrame()僅僅只是調用了子View的layout()而已
- // 在子View的layout()又通過調用setFrame()確定View的四個頂點
- // 即確定了子View的位置
- // 如此不斷循環(huán)確定所有子View的位置,最終確定ViewGroup的位置
- }
總結
View的layout流程核心在于覆寫ViewGroup的onLayout方法,它的流程是拿到子View的寬高,然后實現自己的布局子View的邏輯,它一般結合onMeasure方法使用。