首先看一個(gè)例子，新建一個(gè)Panel，在下面添加兩個(gè)Button，分別命名為Button、Button2。
1、給Panel添加一個(gè)VerticalLayoutGroup組件，ChildForceExpand屬性中勾上Width。
2、給Button、Button2添加LayoutElement組件，其中Button的FlexibleHeight設(shè)置為0.3，Button2的FlexibleHeight設(shè)置為0.1
3、將Panel的高度設(shè)置為100
這時(shí)我們發(fā)現(xiàn)，Button的高度是70，Button2的高度是30。奇怪，這個(gè)高度是怎么算出來(lái)的呢？
網(wǎng)上搜索一番，竟然很少有人討論uGUI的AutoLayout，尤其是flexibleWidth/Height屬性的意義，官方文檔也語(yǔ)焉不詳。這時(shí)只能放大招了，uGUI已經(jīng)開(kāi)源，索性把代碼拉下來(lái)看看到底怎么實(shí)現(xiàn)的。下面是托管代碼的地址：
https://bitbucket.org/Unity-Technologies/ui
uGUI的AutoLayout有三個(gè)核心接口，定義在ILayoutElement.cs文件中：
ILayoutElement
ILayoutController
ILayoutIgnorer
結(jié)構(gòu)很清晰，由ILayoutElement提供布局信息，ILayoutController來(lái)控制布局，ILayoutIgnore提供給UI忽略AutoLayout的能力。
例子中使用的VerticalLayoutGroup繼承自HorizontalOrVerticalLayoutGroup，這個(gè)類實(shí)現(xiàn)了布局的核心邏輯，代碼量不多，我就直接貼上來(lái)了
protected void CalcAlongAxis(int axis, bool isVertical)
{
float combinedPadding = (axis == 0 ? padding.horizontal : padding.vertical);
float totalMin = combinedPadding;
float totalPreferred = combinedPadding;
float totalFlexible = 0;
bool alongOtherAxis = (isVertical ^ (axis == 1));
for (int i = 0; i < rectChildren.Count; i++)
{
RectTransform child = rectChildren[i];
float min = LayoutUtility.GetMinSize(child, axis);
float preferred = LayoutUtility.GetPreferredSize(child, axis);
float flexible = LayoutUtility.GetFlexibleSize(child, axis);
if ((axis == 0 ? childForceExpandWidth : childForceExpandHeight))
flexible = Mathf.Max(flexible, 1);
if (alongOtherAxis)
{
totalMin = Mathf.Max(min + combinedPadding, totalMin);
totalPreferred = Mathf.Max(preferred + combinedPadding, totalPreferred);
totalFlexible = Mathf.Max(flexible, totalFlexible);
}
else
{
totalMin += min + spacing;
totalPreferred += preferred + spacing;
// Increment flexible size with element's flexible size.
totalFlexible += flexible;
}
}
if (!alongOtherAxis && rectChildren.Count > 0)
{
totalMin -= spacing;
totalPreferred -= spacing;
}
totalPreferred = Mathf.Max(totalMin, totalPreferred);
SetLayoutInputForAxis(totalMin, totalPreferred, totalFlexible, axis);
}
protected void SetChildrenAlongAxis(int axis, bool isVertical)
{
float size = rectTransform.rect.size[axis];
bool alongOtherAxis = (isVertical ^ (axis == 1));
if (alongOtherAxis)
{
float innerSize = size - (axis == 0 ? padding.horizontal : padding.vertical);
for (int i = 0; i < rectChildren.Count; i++)
{
RectTransform child = rectChildren[i];
float min = LayoutUtility.GetMinSize(child, axis);
float preferred = LayoutUtility.GetPreferredSize(child, axis);
float flexible = LayoutUtility.GetFlexibleSize(child, axis);
if ((axis == 0 ? childForceExpandWidth : childForceExpandHeight))
flexible = Mathf.Max(flexible, 1);
float requiredSpace = Mathf.Clamp(innerSize, min, flexible > 0 ? size : preferred);
float startOffset = GetStartOffset(axis, requiredSpace);
SetChildAlongAxis(child, axis, startOffset, requiredSpace);
}
}
else
{
float pos = (axis == 0 ? padding.left : padding.top);
if (GetTotalFlexibleSize(axis) == 0 && GetTotalPreferredSize(axis) < size)
pos = GetStartOffset(axis, GetTotalPreferredSize(axis) - (axis == 0 ? padding.horizontal : padding.vertical));
float minMaxLerp = 0;
if (GetTotalMinSize(axis) != GetTotalPreferredSize(axis))
minMaxLerp = Mathf.Clamp01((size - GetTotalMinSize(axis)) / (GetTotalPreferredSize(axis) - GetTotalMinSize(axis)));
float itemFlexibleMultiplier = 0;
if (size > GetTotalPreferredSize(axis))
{
if (GetTotalFlexibleSize(axis) > 0)
itemFlexibleMultiplier = (size - GetTotalPreferredSize(axis)) / GetTotalFlexibleSize(axis);
}
for (int i = 0; i < rectChildren.Count; i++)
{
RectTransform child = rectChildren[i];
float min = LayoutUtility.GetMinSize(child, axis);
float preferred = LayoutUtility.GetPreferredSize(child, axis);
float flexible = LayoutUtility.GetFlexibleSize(child, axis);
if ((axis == 0 ? childForceExpandWidth : childForceExpandHeight))
flexible = Mathf.Max(flexible, 1);
float childSize = Mathf.Lerp(min, preferred, minMaxLerp);
childSize += flexible * itemFlexibleMultiplier;
SetChildAlongAxis(child, axis, pos, childSize);
pos += childSize + spacing;
}
}
}
其中SetChildrenAlongAxis方法清晰地闡釋了minHeight,preferredHeight,flexibleHeight的涵義。
為了幫助理解，我們先定義幾個(gè)概念。我們把當(dāng)前UI所有同級(jí)并參與自動(dòng)布局的組件的preferredHeight總和稱為totalPreferredHeight，minHeight的總和稱為totalMinHeight，父UI的真實(shí)高度稱為realHeight。總結(jié)如下：
1、minHeight
在自動(dòng)布局中，此UI最小高度不會(huì)小于minHeight。這個(gè)參數(shù)定義了realHeight < totalMinHeight時(shí)，當(dāng)前子UI的height為minHeight。
2、preferredHeight
可以理解為，UI自身希望的高度。
當(dāng)totalMinHeight < realHeight < totalPreferredHeight時(shí)，realHeight處于totalMinHeight和totalPreferredHeight之間一定百分比，把這個(gè)比例應(yīng)用到每一個(gè)接受自動(dòng)布局的子UI上，即是我們最終得到的效果
3、flexibleHeight
當(dāng)realHeight > totalPreferredHeight時(shí)，父UI會(huì)剩下一部分高度。flexibleHeight就是告訴AutoLayout系統(tǒng)，應(yīng)該怎么瓜分剩下的高度，使子UI填充滿父UI。flexibleHeight默認(rèn)是-1，不會(huì)進(jìn)行擴(kuò)充。當(dāng)flexibleHeight > 0時(shí)，flexibleHeight值作為權(quán)重來(lái)計(jì)算當(dāng)前子UI最終的高度，公式如下：
height = preferredHeight + (flexibleHeight / totalFlexibleHeight) * (realHeight - totalPreferredHeight)
弄清楚這些概念后，我們?cè)倏匆幌挛恼麻_(kāi)頭的例子。
button1的flexibleHeight=0.3，button2的flexibleHeight=0.1，minHeight和preferredHeight都沒(méi)有設(shè)置，按道理高度應(yīng)該分別是75、25。為什么會(huì)出現(xiàn)70、30？
查一下ILayoutElement的實(shí)現(xiàn)類
發(fā)現(xiàn)Image和Text實(shí)現(xiàn)了ILayoutElement，而我們的按鈕中默認(rèn)是有一個(gè)Image組件的，用腳本獲取這個(gè)Image然后打印它的preferredHeight，發(fā)現(xiàn)等于10
再套用flexibleHeight的計(jì)算公式：
Button1:10 + 0.3/0.4 * (100 - 20) = 70
Button2:10 + 0.1/0.4 * (100 - 20) = 30
這里有個(gè)問(wèn)題，一個(gè)GameObject上掛載兩個(gè)ILayoutElement組件，是怎么決定用哪個(gè)的？這個(gè)可以在LayoutUtility.cs中找到答案：
LayoutUtility.cs
public static float GetLayoutProperty(RectTransform rect, System.Func<ILayoutElement, float> property, float defaultValue, out ILayoutElement source)
{
source = null;
if (rect == null)
return 0;
float min = defaultValue;
int maxPriority = System.Int32.MinValue;
var components = ComponentListPool.Get();
rect.GetComponents(typeof(ILayoutElement), components);
for (int i = 0; i < components.Count; i++)
{
var layoutComp = components[i] as ILayoutElement;
if (layoutComp is Behaviour && (!(layoutComp as Behaviour).enabled || !(layoutComp as Behaviour).isActiveAndEnabled))
continue;
int priority = layoutComp.layoutPriority;
// If this layout components has lower priority than a previously used, ignore it.
if (priority < maxPriority)
continue;
float prop = property(layoutComp);
// If this layout property is set to a negative value, it means it should be ignored.
if (prop < 0)
continue;
// If this layout component has higher priority than all previous ones,
// overwrite with this one's value.
if (priority > maxPriority)
{
min = prop;
maxPriority = priority;
source = layoutComp;
}
// If the layout component has the same priority as a previously used,
// use the largest of the values with the same priority.
else if (prop > min)
{
min = prop;
source = layoutComp;
}
}
ComponentListPool.Release(components);
return min;
}
原來(lái)LayoutElement有一個(gè)layoutPriority屬性用來(lái)決定優(yōu)先級(jí)，這個(gè)屬性暫時(shí)還沒(méi)有在編輯器中暴露，也許后續(xù)版本會(huì)加強(qiáng)這方面的能力。
AutoLayout系統(tǒng)會(huì)選用優(yōu)先級(jí)最高的ILayoutElement里相應(yīng)屬性返回。Image和Text的優(yōu)先級(jí)默認(rèn)是0，LayoutElement默認(rèn)優(yōu)先級(jí)是1。所以正常情況會(huì)使用LayoutElement中的設(shè)置，但我們的例子中，LayoutElement沒(méi)有設(shè)置preferredHeight，LayoutElement里布局相關(guān)的初始值都是-1，所以還是使用了Image的preferredHeight:10。
【結(jié)語(yǔ)】
其實(shí)，只要官方文檔描述詳細(xì)一些，根本沒(méi)必要浪費(fèi)時(shí)間去查這個(gè)來(lái)龍去脈。這幾天在學(xué)習(xí)swift，蘋果人性化的Programming Guide加上iBooks的配合，使得學(xué)習(xí)這門語(yǔ)言真是件輕松愉快的事情。相比之下，Unity簡(jiǎn)直是在虐待開(kāi)發(fā)者。Unity、Unreal、Cryengine等最近也為爭(zhēng)市場(chǎng)弄得頭破血流，除了降價(jià)開(kāi)源提供新特性之外，完善文檔也是不容忽視的工作。
