首页 > Unity3D频道 > 【UGUI研究院】 > UGUI研究院之LayoutGroup布局（八）

2014
10-29

UGUI研究院之LayoutGroup布局（八）

继续学习unity4.6，unity的LayoutGroup分为三种， Horizontal Layout Group（水平布局）Vertical Layout Group（垂直布局）Grid Layout Group （网格布局）以前NGUI没有这东西都是自己写工具实现的。为什么我们要布局？我举个例子，布局的时候可以两个cell 和三个cell都居中显示。如下图所示。。

尤其在奖励窗口，因为获取道具的数量是不固定的，所以需要根据不同数量的道具来居中对齐。如下图所示，Padding 就是偏移，因为我的cell 是 95X95，为了居中所以这里设置成 right = -95 top = -95。
Spacing 表示 cell之间的距离。
Child Alignment 表示对齐方式。
Child Force Expand 表示自适应宽和高

在看看cell，注意Layout Group节点下面的所有cell节点都是不能修改Rect Transform的。因为cell可能下面会放很多图片，这样我们会用个空的gameObject来当父节点。但是这个gameObject的width 和 height 是最小单位，那么Layout Group就不知道怎么来算居中了。如下图所示这个时候就轮到LayoutElement登场了，用它来设置一个cell的最大或者最小宽度。

如果运行时实例化后的gameObject 直接放在 Layout Group下面即可。Layout Group会自动计算布局，真的是非常方便。

for(int i =0 ;i <10;i++){

GameObject go = (GameObject)Instantiate(Resources.Load<GameObject>("item"));

go.transform.parent = transform;

go.transform.localScale = Vector3.one;

}

还有个问题就是隐藏，比如把其中的一个cell setActive = false ，为了不计算隐藏的cell 所以要先把 IngonreLaytout = true 再 setActivity = false 这一切都可以在代码里面来设置。

代码这样即可。

1 2	gameObject.GetComponent<LayoutElement>().ignoreLayout = true; gameObject.SetActive(false);

欢迎大家一起来讨论。

本文固定链接: https://www.xuanyusong.com/archives/3336
转载请注明: 雨松MOMO 2014年10月29日于雨松MOMO程序研究院发表

最后编辑：2016-05-03

作者：雨松MOMO

专注移动互联网，Unity3D游戏开发

站内专栏 QQ交谈腾讯微博新浪微博

捐赠写博客不易，如果您想请我喝一杯星巴克的话？就进来看吧!

《UGUI研究院之LayoutGroup布局（八）》有 80 条评论

张王李赵说：

2017 年 2 月 10 日上午 10:23

QQ好友列表那样的多级滑动列表怎么实现啊大大

回复
月神天说：

2016 年 9 月 20 日下午 2:28

我的cell item是一个panel，上面有几个text，我的屏幕适配方式用的是shrink，适配分辨率是1024×768.其他的组件都是好的，就只有grid layout group下的组件在手机上显示的特别小。尝试了各种办法，用了LayoutElement还有ContentSizeFilter都不行，貌似别人也没有遇到我这样的问题，求教我该怎么办。。。

回复
- 月神天说：
  
  2016 年 9 月 22 日上午 9:31
  
  找到解决方案了，因为我是用预制加载然后再设置父节点的，获取实例化预制的RectTransform，设置localScale为Vector.one就好了
  
  回复
小智说：

2016 年 2 月 29 日下午 6:39

你好，GridLayoutGroup下的子物体不可以修改Rect，那么可以获得Rect的值吗？如坐标和大小

回复
柏雁说：

2016 年 1 月 4 日下午 6:42

ugui 怎样让item 像ngui那样定位就是UICenterOnChild

回复
赵石君说：

2015 年 12 月 29 日下午 4:21

ugui 怎样让item 像ngui那样定位就是UICenterOnChild

回复
- 李偌闲说：
  
  2016 年 5 月 3 日下午 3:11
  
  这个功能你得自己写
  
  回复
  - 赵石君说：
    
    2016 年 5 月 6 日下午 5:17
    
    这个功能已经实现了，翻墙找到了。
    
    回复
    - 哟哟哟说：
      
      2016 年 6 月 16 日上午 11:37
      
      可以把解决办法共享一下吗，谢谢你
      
      回复
- 田月说：
  
  2016 年 5 月 30 日下午 1:46
  
  请问怎么做的？
  
  回复
李钇江说：

2015 年 11 月 23 日下午 3:25

假如我想隐藏一个cell但是其它cell位置不变怎么写？

回复
- 雨松MOMO 说：
  
  2015 年 11 月 23 日下午 3:26
  
  那就不能用这个了。
  
  回复
枫叶无霜说：

2015 年 9 月 24 日下午 4:47

有空能否写一篇如何自定义控件的教程呢？例如在unity里面为什么添加一个button后会自动在上面附加一个Text呢？我们有没有办法通过编程的方式实现自己的控件呢？

回复
chaos 说：

2015 年 9 月 16 日下午 4:47

大神，我想用UGUI做一个含不规则cell的ListView，用什么组件好呢，能给个思路吗？谢谢。（聊天列表，每条信息记录根据内容的长度不同改变cell的高度）

回复
- 雨松MOMO 说：
  
  2015 年 9 月 16 日下午 5:00
  
  list要支持1.不规则cell、交换数据、直接定位到某个cell、cell自身变形、insert cell 、add Cell 、remove cell2.避免很多cell同时实例化带来的卡顿，每次只把需要出现的cell实例化出来。根据滑动的频率慢慢展开。3.也可以考虑循环cell 就是把滑动出去没用的cell 移动位置接在下面。这样循环。。循环cell虽然减少了面数量、减少了内存，但是带了个问题就是循环复用的时候需要重新给cell上赋值，会造成一点开销。。我以前用的是循环cell 。现在用的是不循环cell 也就是2.中说的。。
  
  回复
  - chaos 说：
    
    2015 年 9 月 17 日上午 11:47
    
    谢谢大神，还有个问题：做不规则cell，不能用GridLayoutGroup（不支持动态cell尺寸？），那么每次加载的cell的位置都要自己手动计算后指定的？还有没有组件能够帮助我自动将cell对象按顺序加载？
    
    回复
  - UintyCarrier 说：
    
    2015 年 11 月 25 日下午 2:24
    
    实例化就不会赋值了么。。。
    
    回复
袁晓林说：

2015 年 9 月 14 日上午 9:09

MOMO请教一个问题，从NGUI转到UGUI。要实现滚动选择的功能，类似于滚动选择关卡那样，用UGUI的ScrollRect,没有找到让其子对象在运动停止的时候自动对齐到显示区域中心的方法，看文档也没找到对应的接口,类似NGUI中的UICenterOnChild.

回复
欧星星CG 说：

2015 年 7 月 21 日下午 3:28

不知道MOMO对Grid Layout Group里面的元素的自定义行为有没有啥研究啊，比如说，使用 Grid Layout Group 做一个 iPhone 那种的图标拖拽的效果。

回复
- 雨松MOMO 说：
  
  2015 年 7 月 21 日下午 4:09
  
  这个功能就得自己写了，可以继承它来做。。
  
  回复
··追风·· 说：

2015 年 6 月 24 日下午 7:31

木有源码吗？大大

回复
babyjk1314 说：

2015 年 6 月 9 日下午 5:30

MOMO你好，文本的父对象是一个图片。UGUI是否有父对象根据子对象（文本）的尺寸自适应长宽的功能？

回复
- 雨松MOMO 说：
  
  2015 年 6 月 9 日下午 5:36
  
  没有。。这个得自己算。。
  
  回复
  - Alon 说：
    
    2015 年 6 月 12 日上午 11:49
    
    试试Content Size Filter
    
    回复
龙之梦说：

2015 年 4 月 29 日下午 11:42

大大如何把UGUI中的按钮的坐标转化到世界坐标里面

回复
- 雨松MOMO 说：
  
  2015 年 4 月 30 日上午 10:25
  
  2D转3D比较法满。。。。除非发射线来辅助。。。。
  
  回复
Leo 说：

2015 年 4 月 17 日下午 7:30

貌似即使不用 GetComponent().ignoreLayout = true; 系统也不会计算隐藏的cell

回复
Jessie—Z 说：

2015 年 4 月 3 日上午 10:30

貌似UIMain空对象要加上Content Size Fitter这个组件才好使。

回复
a 说：

2015 年 3 月 31 日上午 11:57

MOMO老师，可以做个ugui背包例子吗

回复
Mx 说：

2015 年 3 月 29 日下午 1:51

NGUI的话, 不自己写是不是也可以 ? UITable & UIGrid

回复
- hello 说：
  
  2015 年 7 月 28 日下午 5:19
  
  uitable 是可以的，我经常这样用
  
  回复
精神康复中心小学生说：

2015 年 3 月 18 日下午 12:35

MOMO，我在纠结学习UGUI还是NGUI，你个人觉得？

回复
- 雨松MOMO 说：
  
  2015 年 3 月 18 日下午 12:42
  
  UGUI
  
  回复
手机用户13306672 说：

2015 年 3 月 10 日下午 8:05

请问使用LayoutGroup布局的子对象，如何使拖动事件有效，需要先解除父子关系吗？

回复
光说：

2015 年 2 月 24 日下午 2:26

想做一套多屏幕同时加载的功能的时候发现的，挺急的在线等

回复
光说：

2015 年 2 月 24 日下午 2:25

我刚刚遇到一个问题，有多个canvas的情况下用camera space，自定义的scroll view 拖动时会出现闪烁，canvas 选上override sorting可解决该问题但是按钮会出现click through的问题，即两个按钮重叠后点击上面的下面的按钮事件也会触发求大神帮解决啊

回复
卡布奇诺说：

2015 年 2 月 8 日上午 12:00

期待继续更新UGUI的,最近在整血条或者提示等跟场景精灵关联的UI,还没好的实现方法

回复
lone_mage 说：

2015 年 1 月 23 日下午 3:35

请问我有个Horizontallayoutgroup 里面2个按钮带有LayoutElement现在要在中间增加个按钮，但是要表现动画，右边的移动过去，不是直接显示。我该如何得到最右边的那个坐标好执行动画。。。？？？

回复
- 雨松MOMO 说：
  
  2015 年 1 月 26 日下午 2:47
  
  要做动画，这就不行了。。
  
  回复
爱MOMO 说：

2015 年 1 月 23 日下午 1:51

MOMO大大请问怎么给ugui的按钮加上声音啊？？？

回复
- a 说：
  
  2015 年 1 月 26 日下午 8:46
  
  修改NGUI的声音按钮的类就可以了~
  
  回复
学习说：

2015 年 1 月 22 日下午 3:35

UGUI有没有类实现了NGUI中的让 listview 中的panel每次都居中的类啊，和NGUI中“UICenterOnChild”效果相同的

回复
- 雨松MOMO 说：
  
  2015 年 1 月 22 日下午 3:41
  
  自己写listview比较靠谱。。
  
  回复
爱MOMO 说：

2015 年 1 月 21 日下午 9:49

MOMO 请问ugui里怎么监听OnHover 事件？？？

回复
- 雨松MOMO 说：
  
  2015 年 1 月 22 日上午 10:29
  
  http://www.xuanyusong.com/archives/3325
  
  回复
ABC 说：

2015 年 1 月 14 日下午 7:02

请问UGUI有官方的DEMO吗？

回复
- 雨松MOMO 说：
  
  2015 年 1 月 14 日下午 7:19
  
  有demo。。。
  
  回复
Sumourn 说：

2015 年 1 月 14 日下午 5:23

很不错哦，和安卓里面有点类似了

回复
李偌闲说：

2015 年 1 月 7 日下午 3:48

雨松大神啊我有个问题请教，我想用ugui的text中实现类似ngui的那种图文混排效果来做聊天框，可是找了两天帖子了，也没有找到好的办法你有什么办法么真心求教！！！

回复
- 雨松MOMO 说：
  
  2015 年 1 月 7 日下午 3:56
  
  得自己写。。其实就是一个 Image Label 的管理类， ugui的内个RichText不好用，不能加图片。。
  
  回复
  - 李偌闲说：
    
    2015 年 1 月 7 日下午 4:17
    
    这个写的话有什么参考么新手见谅
    
    回复
    - 雨松MOMO 说：
      
      2015 年 1 月 8 日下午 2:39
      
      比如 xml来组织你的结构。。。
      
      回复
- 颠沛流离说：
  
  2015 年 11 月 4 日下午 5:43
  
  你好，问下这个图文混排，怎么解决的？
  
  回复
平常心说：

2014 年 12 月 21 日下午 5:01

MOMO大大 ugui有没有提供像NGUI字体那样的移动端字体解决方案？

回复
- 雨松MOMO 说：
  
  2015 年 1 月 7 日下午 3:56
  
  ttf
  
  回复
oy 说：

2014 年 11 月 23 日下午 9:24

水平或者垂直的group里面的元素会自动填充是怎么回事。。看momo的例子貌似没有啊。。后来只好用grid的group，感觉GridLayoutGroup功能更强大诶，包括了垂直和水平。

回复
- 雨松MOMO 说：
  
  2014 年 11 月 25 日下午 4:29
  
  下面有选项的。。
  
  回复
Ray__ING 说：

2014 年 11 月 13 日下午 5:39

学习了继续支持

回复
- 雨松MOMO 说：
  
  2014 年 11 月 13 日下午 7:26
  
  谢谢哈。
  
  回复
' Ne pas se résigner à 说：

2014 年 11 月 13 日上午 11:26

ngui 确实不行

回复
- 雨松MOMO 说：
  
  2014 年 11 月 13 日下午 7:26
  
  嗯的。。
  
  回复
张洁勇说：

2014 年 11 月 9 日下午 2:38

松哥，看你的教程也快出到10了，我跟了一下，也没怎么发现ugui的优点，反而好多需要的功能我们都要借鉴ngui，你能稍微聊聊为什么要用ugui的理由不？

回复
- 雨松MOMO 说：
  
  2014 年 11 月 9 日下午 7:52
  
  理由就是NGUI太难用了。。。效率太低了。。。
  
  回复
求问说：

2014 年 11 月 5 日上午 11:03

怎么做一个下拉框啊？？就是as中的 ComboBox…

回复
求问说：

2014 年 11 月 3 日下午 5:02

怎么制作一个listview呢，要求每个list的高度可变，你这个是写死了95的

回复
- 雨松MOMO 说：
  
  2014 年 11 月 4 日上午 10:03
  
  额。这个不是listview listview要自己写。官方提供的还有NGUI的都是不支持 cell重用还有不规则cell
  
  回复
  - DannyCheung 说：
    
    2014 年 11 月 10 日下午 4:15
    
    ngui最新版本支持cell重用了，不规则cell估计要重写下源码里的布局规则，一起研究看看：）
    
    回复
    - 天天说：
      
      2014 年 11 月 24 日下午 6:28
      
      哪个版本，怎么重用
      
      回复
      - 雨松MOMO 说：
        
        2014 年 11 月 24 日下午 9:09
        
        我看过。不太好用。。我觉得还是得自己来写。。
      - 天天说：
        
        2014 年 11 月 25 日下午 2:26
        
        怎么写
      - chaos 说：
        
        2015 年 9 月 16 日下午 4:43
        
        求思路
      - 雨松MOMO 说：
        
        2015 年 9 月 16 日下午 4:45
        
        我参考 IOS 和Android源生list 的写法。。。
      - sunny 说：
        
        2016 年 2 月 16 日下午 3:22
        
        momo，能否把你写的，不规则cell的list例子贴一下呢
      - 雨松MOMO 说：
        
        2016 年 2 月 16 日下午 3:27
        
        呵呵，我还没有那么大的自信敢放出来。毕竟我也不是高手。
- sunny 说：
  
  2016 年 2 月 17 日下午 5:17
  
  void Awake()
  {
  if(text != null)
  {
  layout = transform.GetComponent();
  text.RegisterDirtyLayoutCallback(RefreshHeight);
  }
  }
  
  private void RefreshHeight()
  {
  if (text != null)
  {
  cellHeight = text.preferredHeight;
  layout.minHeight = cellHeight * 1.05f;
  }
  }
  
  回复
芦晓龙说：

2014 年 10 月 31 日上午 12:55

真心想问一下 MOMO是在哪里学习的呢英文文档在哪来呢

回复
- 雨松MOMO 说：
  
  2014 年 10 月 31 日上午 9:03
  
  unity的手册。。
  
  回复
c6u2 说：

2014 年 10 月 30 日下午 12:45

MOMO速度真是快，1天1更新啊

回复
- 雨松MOMO 说：
  
  2014 年 10 月 30 日下午 2:59
  
  基本上学完了。。可以开始搞了。。
  
  回复
  - 强哥说：
    
    2014 年 11 月 3 日下午 5:11
    
    搞嘎嘎看了你的教程果然受益匪浅简洁有效精辟
    
    回复

UGUI研究院之LayoutGroup布局（八）

您可能还会对这些文章感兴趣！

《UGUI研究院之LayoutGroup布局（八）》有 80 条评论

给李偌闲的回复取消回复

您可能还会对这些文章感兴趣！

《UGUI研究院之LayoutGroup布局（八）》有 80 条评论

给李偌闲的回复 取消回复

给李偌闲的回复取消回复