Unity學習筆記(5) --- Unity的界面排版:AutoLayout詳解——關于高度height的計算
來自： http://blog.csdn.net//likendsl/article/details/50556749
該文轉自：原文鏈接，寫的是深入淺出，如果你也覺得精彩，可以移步去打賞一下。
首先看一個例子，新建一個Panel，在下面添加兩個Button，分別命名為Button、Button2。
1、給Panel添加一個VerticalLayoutGroup組件，ChildForceExpand屬性中勾上Width。
2、給Button、Button2添加LayoutElement組件，其中Button的FlexibleHeight設置為0.3，Button2的FlexibleHeight設置為0.1
3、將Panel的高度設置為100
這時我們發現，Button的高度是70，Button2的高度是30。奇怪，這個高度是怎么算出來的呢？
網上搜索一番，竟然很少有人討論uGUI的AutoLayout，尤其是flexibleWidth/Height屬性的意義，官方文檔也語焉不詳。這時只能放大招了，uGUI已經開源，索性把代碼拉下來看看到底怎么實現的。下面是托管代碼的地址：
https://bitbucket.org/Unity-Technologies/ui
uGUI的AutoLayout有三個核心接口，定義在ILayoutElement.cs文件中：
ILayoutElement
ILayoutController
ILayoutIgnorer
結構很清晰，由ILayoutElement提供布局信息，ILayoutController來控制布局，ILayoutIgnore提供給UI忽略AutoLayout的能力。
例子中使用的VerticalLayoutGroup繼承自HorizontalOrVerticalLayoutGroup，這個類實現了布局的核心邏輯，代碼量不多，我就直接貼上來了
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的涵義。
為了幫助理解，我們先定義幾個概念。我們把當前UI所有同級并參與自動布局的組件的preferredHeight總和稱為totalPreferredHeight，minHeight的總和稱為totalMinHeight，父UI的真實高度稱為realHeight。總結如下：
1、minHeight
在自動布局中，此UI最小高度不會小于minHeight。這個參數定義了realHeight < totalMinHeight時，當前子UI的height為minHeight。
2、preferredHeight
可以理解為，UI自身希望的高度。
當totalMinHeight < realHeight < totalPreferredHeight時，realHeight處于totalMinHeight和totalPreferredHeight之間一定百分比，把這個比例應用到每一個接受自動布局的子UI上，即是我們最終得到的效果
3、flexibleHeight
當realHeight > totalPreferredHeight時，父UI會剩下一部分高度。flexibleHeight就是告訴AutoLayout系統，應該怎么瓜分剩下的高度，使子UI填充滿父UI。flexibleHeight默認是-1，不會進行擴充。當flexibleHeight > 0時，flexibleHeight值作為權重來計算當前子UI最終的高度，公式如下：
height = preferredHeight + (flexibleHeight / totalFlexibleHeight) * (realHeight - totalPreferredHeight)
弄清楚這些概念后，我們再看一下文章開頭的例子。
button1的flexibleHeight=0.3，button2的flexibleHeight=0.1，minHeight和preferredHeight都沒有設置，按道理高度應該分別是75、25。為什么會出現70、30？
查一下ILayoutElement的實現類
發現Image和Text實現了ILayoutElement，而我們的按鈕中默認是有一個Image組件的，用腳本獲取這個Image然后打印它的preferredHeight，發現等于10
再套用flexibleHeight的計算公式：
Button1:10 + 0.3/0.4 (100 - 20) = 70
Button2:10 + 0.1/0.4 (100 - 20) = 30
這里有個問題，一個GameObject上掛載兩個ILayoutElement組件，是怎么決定用哪個的？這個可以在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;
} 原來LayoutElement有一個layoutPriority屬性用來決定優先級，這個屬性暫時還沒有在編輯器中暴露，也許后續版本會加強這方面的能力。
AutoLayout系統會選用優先級最高的ILayoutElement里相應屬性返回。Image和Text的優先級默認是0，LayoutElement默認優先級是1。所以正常情況會使用LayoutElement中的設置，但我們的例子中，LayoutElement沒有設置preferredHeight，LayoutElement里布局相關的初始值都是-1，所以還是使用了Image的preferredHeight:10。
【結語】
其實，只要官方文檔描述詳細一些，根本沒必要浪費時間去查這個來龍去脈。這幾天在學習swift，蘋果人性化的Programming Guide加上iBooks的配合，使得學習這門語言真是件輕松愉快的事情。相比之下，Unity簡直是在虐待開發者。Unity、Unreal、Cryengine等最近也為爭市場弄得頭破血流，除了降價開源提供新特性之外，完善文檔也是不容忽視的工作，畢竟開發者才是這些廠商真正的衣食父母。