Unity UGUI Layout自动排版组件用法

阳光穿透心脏的1/2处 2022-12-10 05:59 315阅读 0赞

# **1** #

## **Layout —— 布局组件** ##

**我们在做项目的时候，经常有需求**

**需要将某个板块中的信息，图标给整理，整齐的进行排版（比如下拉滚动列表）**

**如果我们一个的把方块、或者这种长条形的Ui给逐个创建，工作量十分大，而且容易出错导致位置偏移**

**Unity 为我们提供了 Layout 布局组件**

**可以非常方便的实现此类需求**

**例如这样的效果：**  
![举个栗子黑白88][88]  
![这里写图片描述][70]  
![这里写图片描述][70 1]

--------------------

# **2** #

## **Create BG Image —— 创建背景** ##

**可以是 Image 或者 空物体都行**

**然后在游戏物体上，添加对应的 Layout 组件**  
![举个栗子黑白88][88]  
![这里写图片描述][70 2]

--------------------

# **3** #

## **Create element —— 创建元素** ##

**在父物体 BG / 空物体下创建需要的元素 （随意创建，可以创建后再完成元素大小的调整）**

**相同的元素，只需要创建一个，然后批量的进行生成 / 复制即可**  
![举个栗子黑白88][88]  
![这里写图片描述][70 3]

--------------------

# **4** #

## **Layout ComPonent Type —— 布局组件类型** ##

**常用的是下列3个布局组件：**

**Grid Layout Group 网格布局 —— 支持竖向、横向排列**

**Horizontal Layout Group 网格布局 —— 仅支持横向排列**

**Vertical Layout Group 网格布局 —— 仅支持竖向排列**

**具体参数很简单，无非就是宽高，间距大小之类的，还有设置排列、开始位置等等**

**注意：**

**也可以，直接在父物体下，直接生成一定数量的预设物，来完成网格的填充**

**动态生成，可控性很高**

引用

[https://blog.csdn.net/ChinarCSDN/article/details/82263144][https_blog.csdn.net_ChinarCSDN_article_details_82263144]

[88]: /images/20221123/337d4a378e7d4560af1f60c497a3db02.png
[70]: /images/20221123/4b682b2cd18846cdbbea312fb0e6ebc2.png
[70 1]: /images/20221123/6f68ee0a758b4132bb478c368eeb3e88.png
[70 2]: /images/20221123/16982a14e298464faf409fade2a0c2c9.png
[70 3]: /images/20221123/e7d116bad130463cb6232c5974489a40.png
[https_blog.csdn.net_ChinarCSDN_article_details_82263144]: https://blog.csdn.net/ChinarCSDN/article/details/82263144

发表评论取消回复

表情：

评论列表（有 0 条评论，315人围观）

还没有评论，来说两句吧...

相关阅读

相关 Unity UGUI Toggle监听onValueChanged

一直以为下面代码是监听toggle点击的。。。其实不是，他是用来监听 isOn 值的改变的，真的好坑。。 Toggle.onValueChanged.AddListe

我就是我/ 2022年12月14日 13:54/ 0 赞/ 159 阅读

相关 Unity UGUI Layout自动排版组件用法

1 Layout —— 布局组件我们在做项目的时候，经常有需求需要将某个板块中的信息，图标给整理，整齐的进行排版（比如下拉滚动列表）如果我们一个的把

阳光穿透心脏的1/2处/ 2022年12月10日 05:59/ 0 赞/ 316 阅读

相关 Unity/Auto Layout -- 理解Layout Elements（布局元素）

前言在UGUI1中，Canvas下的每个GameObject都会自动添加 Rect Transform 组件来控制自身的位置和大小。通常情况下，基于Rect Transf

た入场券/ 2022年11月14日 14:45/ 0 赞/ 139 阅读

相关 Unity UGUI 代码改变遮挡层级

原文链接：http://m.blog.csdn.net/article/details?id=53286731 UGUI在Screen Space - Overla

红太狼/ 2022年06月17日 07:51/ 0 赞/ 159 阅读

相关 Unity3D_UGUI入门

什么是UI UI即User Interface（用户界面）的简称好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位

Myth丶恋晨/ 2022年05月30日 08:24/ 0 赞/ 251 阅读

相关 Unity UGUI 图片字体的透明度

//修改图片的透明度修改color属性的a值（alpha） ![70][] 有大写的R G B A(修改alpha透明通道) //代码修改

淡淡的烟草味﹌/ 2022年05月25日 05:12/ 0 赞/ 495 阅读

相关 Unity Inspector 给组件自动关联引用

通过声明的变量名称,主动关联引用. 使用这个关联引用两种方式 1. 给你组件继承 MonoAutoQuote 点击组件inspector 按钮执行 2. 给你组件类添

超、凢脫俗/ 2022年04月24日 14:12/ 0 赞/ 159 阅读

相关 Unity Inspector 给组件自动关联引用

通过声明的变量名称,主动关联引用. 使用这个关联引用两种方式 1. 给你组件继承 MonoAutoQuote 点击组件inspector 按钮执行 2. 给你组件类添

╰半橙微兮°/ 2022年02月14日 10:08/ 0 赞/ 135 阅读

相关 Unity UGUI复合组件

Mask组件比如实现圆形头像 ![1576111-20190619154707292-660948837.png][] 参数：没有子物体能显示时，是否显示父物体本图

迷南。/ 2021年12月17日 12:39/ 0 赞/ 233 阅读

相关京东区块排版负margin用法

1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UT

矫情吗；*/ 2021年12月15日 11:41/ 0 赞/ 149 阅读