当前位置: 代码迷 >> 综合 >> 【UGUI】横向与纵向布局组件
  详细解决方案

【UGUI】横向与纵向布局组件

热度:48   发布时间:2023-11-05 13:33:04.0

1.横向布局组件

1.组件介绍

Horizontal Layout Group:横向布局组件。
表格布局组件是功能最全的一个布局组件,可以实现表格,横向,纵向布局;
而横向布局组件可以理解成是表格布局组件功能的一部分。

2.组件属性

Child Controls Size:子物体的大小。
|—勾选 Width:自动缩放所有子物体的宽度,让子物体横向占满空间.
|—勾选 Height:自动缩放所有子物体的高度,让子物体竖向占满空间.
Child Force Expand:子物体的扩展。
如果要使用上方的“子物体的大小”属性,这里的属性必须勾选。
上方的属性依赖该属性。

3.横向无滚动案例

①创建image组件,重命名为Background,修改宽度为400。
②在Background下创建空物体(Empty),重命名为Grid。修改宽度为400,修改padding下的Left,Right,Top,Bottom,都为5,修改Spacing为10。为Grid添加Horizontal Layout Group组件(横向布局组件),勾选Child Controls Size下的Width和Height,实现横向与纵向自动填充。
③在Grid创建一个image组件,修改宽度为90,复制四份。
在这里插入图片描述
即完成了横向无滚动布局。

4.横向有滚动案例

①创建image组件,重命名为Background,修改宽度为400。
②在Background下创建空物体(Empty),重命名为Horizontal。修改宽度为400,给Horizontal添加Scroll Rect组件,image组件和Mask。在image组件的Source image中添加UIMask
③在Horizontal下创建创建空物体(Empty),重命名为Grid。修改宽度为400,修改padding下的Left,Right,Top,Bottom,都为5,修改Spacing为10。为Grid添加Horizontal Layout Group组件(横向布局组件。
④在Grid创建一个image组件,修改宽度为90,多复制几份。
⑤将Grid添加到Scroll Rect组件的Content中,去掉勾选Vertical。
⑥在Grid中添加Content Size Fitter组件,将其中Horizontal Fit改为Perferred Size。

在这里插入图片描述

在这里插入图片描述
即完成了横向有滚动布局。

2.纵向布局组件

1.组件介绍

Vertical Layout Group:纵向布局组件。
纵向布局组件和横向布局组件使用是完全一样的,包括组件属性也是完全一样;
区别就是一个是横向,一个是纵向。

2.纵向无滚动案例
2.纵向有滚动案例

实现方式与横向相同。区别就是一个是横向,一个是纵向。