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

Snip20141029_1

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

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

Snip20141029_6如果运行时实例化后的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  这一切都可以在代码里面来设置。

Snip20141029_7

代码这样即可。

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

 

欢迎大家一起来讨论。

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

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

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

较新评论 →
  1. 手机用户13306672说：
    2015 年 3 月 10 日下午 8:05

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

    回复
  2. 光说：
    2015 年 2 月 24 日下午 2:26

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

    回复
  3. 光说：
    2015 年 2 月 24 日下午 2:25

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

    回复
  4. 卡布奇诺说：
    2015 年 2 月 8 日上午 12:00

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

    回复
  5. lone_mage说：
    2015 年 1 月 23 日下午 3:35

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

    回复
  6. 爱MOMO说：
    2015 年 1 月 23 日下午 1:51

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

    回复
  7. 学习说：
    2015 年 1 月 22 日下午 3:35

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

    回复
  8. 爱MOMO说：
    2015 年 1 月 21 日下午 9:49

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

    回复
  9. ABC说：
    2015 年 1 月 14 日下午 7:02

    请问UGUI有官方的DEMO吗？

    回复
  10. Sumourn说：
    2015 年 1 月 14 日下午 5:23

    UGUI研究院之LayoutGroup布局（八） - 雨松MOMO程序研究院 - 1 很不错哦，和安卓里面有点类似了

    回复
  11. 李偌闲说：
    2015 年 1 月 7 日下午 3:48

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

    回复
  12. 平常心说：
    2014 年 12 月 21 日下午 5:01

    MOMO大大 ugui有没有提供像NGUI字体那样的移动端字体解决方案？ UGUI研究院之LayoutGroup布局（八） - 雨松MOMO程序研究院 - 1

    回复
  13. oy说：
    2014 年 11 月 23 日下午 9:24

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

    回复
  15. ' Ne pas se résigner à说：
    2014 年 11 月 13 日上午 11:26

    ngui 确实不行

    回复
  16. 张洁勇说：
    2014 年 11 月 9 日下午 2:38

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

    回复
  17. 求问说：
    2014 年 11 月 5 日上午 11:03

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

    回复
  18. 求问说：
    2014 年 11 月 3 日下午 5:02

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

    回复
  19. 芦晓龙说：
    2014 年 10 月 31 日上午 12:55

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

    回复
  20. c6u2说：
    2014 年 10 月 30 日下午 12:45

    MOMO速度真是快，1天1更新啊 UGUI研究院之LayoutGroup布局（八） - 雨松MOMO程序研究院 - 1

    回复
较新评论 →

留下一个回复

你的email不会被公开。 必填项已用 * 标注。