Unity基础:文本框、图片自适应(ContentSizeFitter、VerticalLayoutGroup等组件的使用)

1、Unity UGUI背景图片自适应文字大小_PalmAdorableTiger的博客-CSDN博客

2、

Vertical Layout Group/Horizontal Layout Group

  • Padding:控制子节点和上下左右的距离
  • Spacing:每个Item之间的距离
  • Child Alignment 表示对齐方式。
  • Control Child Size:是否会控制子元素的宽高,只有启用该选项Layout Element的设置才会起作用;
  • Child Force Expand:1、Width 是否强行扩大布局元素宽度以填补额外可用的空间 ;2 、Height:是否强行扩大布局元素高度以填补额外可用的空间 

Content Size Fitter:自适应子节点的数量和大小,分为两个方向,横向和竖向

3、 Grid Layout Group 格子布局

Padding    内边距
Cell Size    组内每个格子的size
Spacing    格子间隔
Start Corner    最开始的格子位于父控件的位置
Start Axis    格子水平排列or竖直排列
Child Alignment    如果有多余空间,格子的对其方式
Constraint    强制格子布满特定行,列

4、Layout Element 布局子控件

Min Width    最小宽度,子控件必须满足的最小宽度(优先满足,具有强制性)
Min Height    最小高度:子控件必须满足的最小高度(优先满足,具有强制性)
Preferred Width    最优选的宽度:如果父控件在满足子控件最小宽度后仍然有富余空间,优先选择的宽度
Preferred Height    最优选的高度:如果父控件在满足子控件最小高度后仍然有富余空间,优先选择的宽度
Flexible Width    弹性宽度:父控件在满足子控件优选宽度之后仍然有富余空间,剩余空间按比例分配的比例数值
Flexible Height    弹性宽度:父控件在满足子控件优选高度之后仍然有富余空间,剩余空间按比例分配的比例数值

5、Content Size Fitter

  • 该组件主要用来控制UI的宽高,通过Horizontal Fit和Vertical Fit的三个枚举项来确定控制的方式
  • 当该UI上有Text或者Image时,则可通过设置Horizontal Fit/Vertical Fit控制方式来改变UI的大小,达到自适应效果

 

6、实现效果:父物体下有两个带有Text组件的子物体,需要子物体Text组件随内容增减改变大小,并在父物体下完美排版。

解决方案:父物体添加Vertical Layout Group组件,通过Control Child Size控制子物体的宽和高,达到当子物体Text内容增减时,其在父物体下排版不乱,

最终效果:

7、ScrollView中Content下多个子节点宽度不同,子节点的下有Text组件,Text内容自定义,Text宽度自适应(三层自适应)

Content的设置:

 

Content下Item子节点的设置:

 Item下Text的设置:

 

 

总体层级结构:

 

(待补充)

  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值