1.RectTransform:
略。
2.Aspect Ratio Fitter:
Properties
Property: | Function: |
---|---|
Aspect Mode | 根据AspectRatio怎样调节Rect的值。 |
None | Rect值与AspectRatio的值无关。 |
Width Controls Height | Height自动被Width调节,比例为1/AspectRatio的值。 |
Height Controls Width | Width自动被Height调节,比例为AspectRatio的值。 |
Fit In Parent | 自动按照AspectRatio比例填充到Parent Rect,即stretch by parent,并且范围在Parent Rect之内。 |
Envelope Parent | 自动按照AspectRatio比例填充到Parent Rect,即stretch by parent,并且范围可以超出Parent Rect。 |
Aspect Ratio | 强制宽高比例,即=width/height |
注意:1.自动填充到父对象Rect中后,取消该模式并恢复原始尺寸可能位置等信息错误。
2.无论怎么填充到父对象,不会宽高都超出父对象Rect范围。
3.修改的AspectRatio是RectTrasform的宽高比例,非对象的Preserve Aspect。
4.如果设置了伸缩比例模式,则使用对象的SetNativeSize失效。
5.伸缩时,是根据对象Pivot来进行伸缩的。
左为原始尺寸,右为填充到父对象Rect的情形。
3.Content Size Fitter
Property: | Function: |
---|---|
Horizontal Fit | Width被LayoutElement怎样控制? |
None | Width不被LayoutElement控制 |
Minimum | Width被LayoutElement 的Minimum Width控制。 |
Preferred | Width被LayoutElement 的Preferred Width控制。 |
Vertical Fit | Height被LayoutElement怎样控制? |
None | Height不被LayoutElement控制。 |
Minimum | Height被LayoutElement 的Minimum Height控制。 |
Preferred | Height被LayoutElement 的Preferred Height控制。 |
3.伸缩时,是根据对象Pivot来进行伸缩的。
4.Layout Element
Properties
Property: | Function: |
---|---|
Min Width | LayoutElement的Width的最小值。 |
Min Height | LayoutElement的Height的最小值。 |
Preferred Width | 在LayoutElement被分配大小时,优先分配的Width,如果不够分配则使用上层Layout默认分配的值。 |
Preferred Height | 在LayoutElement被分配大小时,优先分配的Height,如果不够分配则使用上层Layout默认分配的值 |
Flexible Width | 如果Layout整体分配完成后,仍有剩余空间,则根据这个值在同Layout组中的比例分配剩余Width。 |
Flexible Height | 如果Layout整体分配完成后,仍有剩余空间,则根据这个值在同Layout组中的比例分配剩余Height。 |
注意:1.LayoutElement只能在控件处于Layout模式下生效。
2.LayoutElement并不会改变控件的Rect,只是为了提高给上层Layout系统排版布局。
3.FlexibleWidth和FlexibleHeight,额外自动填充分配,常规情况下是0或者1,1为分配剩下的所有空间,0为不分配任何额外的空间,如果多个子控件都有设置额外空间分配,并且上层Layout禁用Child Force Expand,则分配时按住额外分配设置所占的比例进行分配,如果上层开启了Child Force Expand,则子元素额外分配的值<=1时,值都按照1计算比例。
4.Layout空间分配顺序:
- First minimum sizes are allocated.
- If there is sufficient available space, preferred sizes are allocated.
- If there is additional available space, flexible size is allocated.
上面3图依次为:上层Layout关闭Expand模式即整体宽度(400)、子控件1自定义宽度100,剩余空间分配权重0.5、子控件2自定义宽度150,剩余空间分配权重2
计算:上层空间优先分配子控件1宽度100,空间足够,则实际分配100,再分配子控件2宽度150,剩余空间(400 - 100 = 300),空间足够,实际分配150;在完成分配后,还有剩余空间400-100-150=150>0,则检测控件的自适应宽度(即额外宽度分配);子控件1,自适应分配权重0.5,子控件2,只适应分配权重2,则实际子控件1分配比例0.5/(0.5+2)=0.2,实际分配150*0.2=30,子控件2分配比例2/(0.5+2)=0.8,实际分配150*0.8=120;那么子控件1最终分配宽度为100+30=130,子控件2最终分配宽度为150+120=270.
上面3图依次为:上层Layout开启Expand模式即整体宽度(400)、子控件1自定义宽度100,剩余空间分配权重0.5、子控件2自定义宽度150,剩余空间分配权重2
计算:上层空间优先分配子控件1宽度100,空间足够,则实际分配100,再分配子控件2宽度150,剩余空间(400 - 100 = 300),空间足够,实际分配150;在完成分配后,还有剩余空间400-100-150=150>0,则检测控件的自适应宽度(即额外宽度分配);子控件1,自适应分配权重0.5<1,则实际权重=1,子控件2,只适应分配权重2>1,则实际分配权重2,最后实际子控件1分配比例1/(1+2)=1/3,实际分配150/3=50,子控件2分配比例2/(1+2)=2/3,实际分配150*2/3=100;那么子控件1最终分配宽度为100+50=150,子控件2最终分配宽度为150+100=250.
5.Horizontal Layout Group
Property: | Function: |
---|---|
Padding | The padding inside the edges of the layout group. |
Spacing | The spacing between the layout elements. |
Child Alignment | The alignment to use for the child layout elements if they don’t fill out all the available space. |
Child Force Expand | Whether to force the children to expand to fill additional available space. |
- The minimum widths of all the child layout elements are added together and the spacing between them is added as well. The result is the mimimum width of the Horizontal Layout Group.
- The preferred widths of all the child layout elements are added together and the spacing between them is added as well. The result is the preferred width of the Horizontal Layout Group.
- If the Horizontal Layout Group is at its minimum width or smaller, all the child layout elements will also have their minimum width.
- The closer the Horizontal Layout group is to its preferred width, the closer each child layout element will also get to their preferred width.
- If the Horizontal Layout Group is wider than its preferred width, it will distribute the extra available space proportionally to the child layout elements according to their respective flexible widths.
The Horizontal Layout Group component places its child layout elements next to each other, side by side. Their widths are determined by their respective minimum, preferred, and flexible widths according to the following model:
6.Vertical Layout Group
7.Grid Layout Group
Property: | Function: |
---|---|
Padding | The padding inside the edges of the layout group. |
Cell Size | The size to use for each layout element in the group. |
Spacing | The spacing between the layout elements. |
Start Corner | The corner where the first element is located. |
Start Axis | Which primary axis to place elements along. Horizontal will fill an entire row before a new row is started. Vertical will fill an entire column before a new column is started. |
Child Alignment | The alignment to use for the layout elements if they don’t fill out all the available space. |