UGUI之Horizontal Layout Group组件介绍

Horizontal Layout Group是HorizontalOrVerticalLayoutGroup的子类,HorizontalOrVerticalLayoutGroup又是LayoutGroup的子类

脚本截图如下:
这里写图片描述

图中包括以下属性:
1、Padding:RectOffset类型,矩形偏移
源码如下:

public sealed class RectOffset
{
    public RectOffset();
    public RectOffset(int left, int right, int top, int bottom);

    ~RectOffset();

    public int bottom { get; set; }       //底边缘
    public int horizontal { get; }        //水平
    public int left { get; set; }         //左边缘
    public int right { get; set; }        //右边缘
    public int top { get; set; }          //顶边缘
    public int vertical { get; }          //垂直

    public Rect Add(Rect rect);           //向一个Rect添加边框偏移
    public Rect Remove(Rect rect);        //从一个Rect移除边框偏移
    public override string ToString();      
}

如下面几个图中:
图一:默认情况

这里写图片描述

图二:只改变Padding

这里写图片描述

当Padding中的边缘大小过大时,会自动缩放布局元素以保持布局元素均在边框内,从下图可以看出
图三
这里写图片描述

2、Spacing:float类型
布局元素之间的间隔

图四:只改变Spacing

这里写图片描述

当Spacing过大,会自动缩放布局元素以保持布局元素均在边框内,从下图可以看出布局元素宽度缩小了
图五:

这里写图片描述

3、Child Alignment:TextAnchor枚举类型,文本锚点
源码如下:

public enum TextAnchor
{
    UpperLeft = 0,           //上左
    UpperCenter = 1,         //上中
    UpperRight = 2,          //上右
    MiddleLeft = 3,          //中左
    MiddleCenter = 4,        //中中
    MiddleRight = 5,         //中右
    LowerLeft = 6,           //下左
    LowerCenter = 7,         //下中
    LowerRight = 8           //下右
}

4、Child Force Expand:有两个可选
(1)Width:是否强行扩大布局元素宽度以填补额外可用的空间
(2)Height:是否强行扩大布局元素高度以填补额外可用的空间
下面结合截图来说明:
图六:勾选Width,填补宽度
这里写图片描述

图七:勾选Height,填补高度
这里写图片描述

图八:勾选Width和Height,填补宽度和高度
这里写图片描述

从以上三图结合图一默认图可以看出其具体效果

实际开发中,我经常结合Content Size Fitter组件一起使用
这里写图片描述

关于UI布局,大家开发的多了,就熟练了。

以上知识分享,如有错误,欢迎指出,共同学习,共同进步。

  • 17
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值