首页 > 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都居中显示。如下图所示。。

UGUI研究院之LayoutGroup布局（八） - 雨松MOMO程序研究院 - 1

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

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

UGUI研究院之LayoutGroup布局（八） - 雨松MOMO程序研究院 - 4如果运行时实例化后的gameObject 直接放在 Layout Group下面即可。Layout Group会自动计算布局，真的是非常方便。

1
2
3
4
5
6
7
 
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  这一切都可以在代码里面来设置。

UGUI研究院之LayoutGroup布局（八） - 雨松MOMO程序研究院 - 5

代码这样即可。

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

 

欢迎大家一起来讨论。

最后编辑：
作者：雨松MOMO
专注移动互联网，Unity3D游戏开发
站内专栏 QQ交谈 腾讯微博 新浪微博
捐 赠写博客不易，如果您想请我喝一杯星巴克的话？就进来看吧!

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

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

← 早期评论
  1. 长安小二 说：
    2023 年 5 月 6 日下午 6:21

    MoMo，请教一个问题，怎么才能知道UGUI Layout的具体布局时间呐，有没有布局完成时的回调函数。我在获取加了布局组件下的子物体的位置时发现，在Start时获取的位置信息都一样（所有子物体位置不同，但打印出来位置相同），但是延迟1帧后再获取的位置信息就正常了。

    回复
  2. 张王李赵 说：
    2017 年 2 月 10 日上午 10:23

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

    回复
  3. 月神天 说：
    2016 年 9 月 20 日下午 2:28

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

    回复
  4. 小智 说：
    2016 年 2 月 29 日下午 6:39

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

    回复
  5. 柏雁 说：
    2016 年 1 月 4 日下午 6:42

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

    回复
  6. 赵石君 说：
    2015 年 12 月 29 日下午 4:21

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

    回复
  7. 李钇江 说：
    2015 年 11 月 23 日下午 3:25

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

    回复
  8. 枫叶无霜 说：
    2015 年 9 月 24 日下午 4:47

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

    回复
  9. 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.中说的。。

      回复
  10. 袁晓林 说：
    2015 年 9 月 14 日上午 9:09

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

    回复
  11. 欧星星CG 说：
    2015 年 7 月 21 日下午 3:28

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

    回复
  12. ··追风·· 说：
    2015 年 6 月 24 日下午 7:31

    木有源码吗？大大

    回复
  13. babyjk1314 说：
    2015 年 6 月 9 日下午 5:30

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

    回复
  14. 龙之梦 说：
    2015 年 4 月 29 日下午 11:42

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

    回复
  15. Leo 说：
    2015 年 4 月 17 日下午 7:30

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

    回复
  16. Jessie—Z 说：
    2015 年 4 月 3 日上午 10:30

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

    回复
  17. a 说：
    2015 年 3 月 31 日上午 11:57

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

    回复
  18. Mx 说：
    2015 年 3 月 29 日下午 1:51

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

    回复
  19. 精神康复中心小学生 说：
    2015 年 3 月 18 日下午 12:35

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

    回复
← 早期评论

留下一个回复

你的email不会被公开。