本文分享Unity中的自动布局(AutoLayout)

在大部分情况下, Unity提供的RectTransform已经足够应付我们日常遇到的需求, 我们一般通过手动修改RectTransform即可.

但是在有些情况下, 我们需要动态设置RectTransform, 特别是动态调整大小或者一些组合布局的需求.

Unity给我们提供了满足这种需求的机制, 就是所谓自动布局.

自动布局的基本介绍

自动布局由两部分组成, 即布局元素(LayoutElements)和布局控制器(LayoutControllers).

布局元素本身并不会对RectTransform做任何修改, 需要由布局控制器来根据自身的性质和布局元素的值来设置.

布局控制器分为控制自身的和控制子节点两类.

不管是自身还是子节点, 被控制器控制之后无法手动修改RectTransform, 有些是不能修改位置, 有些是不能修改大小, 视具体的控制器而定, 如图被控制了位置和高度:

如果父节点同时拥有控制自身的和控制子节点的控制器, 因为此时子节点由父节点控制, 所以子节点不能拥有控制自身的控制器:

布局元素(LayoutElement)

布局元素指实现了接口ILayoutElement的组件或者拥有布局元素的对象.

如果拥有多个布局元素组件, 根据layoutPriority确定优先级, 比如Image为0, InputField为1, 同时存在时, 会优先使用InputField的属性.

布局元素相关的组件有:

属性说明

布局元素实现接口后, 将会拥有以下属性, 并在属性面板最下方通过切页显示, 并在属性面板最下方通过切页显示:




说明
  • Min Width/Height: 最小大小
  • Preferred Width/Height: 首选大小, 根据元素内容得到的最适合大小
  • Flexible Width/Height: 灵活大小, 相对单位大小, 默认情况下不启用
  • LayoutElement组件: 默认情况下布局元素会自动调节属性, 如果不满意可以通过添加LayoutElement组件手动调节
    • IgnoreLayout: 忽略自动布局, 将当前布局元素声明为非布局元素, 忽略自动布局的影响
    • Layout Priority: 同一个元素可以添加多个LayoutElement组件, 根据此属性可以调节组件之间的优先级, 值越大优先级越高

布局控制器(LayoutControllers)

布局控制器是指实现了接口ILayoutController的类, 类图如下

控制器的分类

控制器根据控制的对象可以分为控制自身和控制子节点的类型.

控制自身大小和位置(RectTransforms)

实现了ILayoutSelfController接口的类:

  • AspectRatioFitter: 宽高比适配器, 根据Aspect Mode属性选择适当的模式来适配自身的大小, 忽略布局元素的值.
  • ContentSizeFitter: 内容大小适配器, 使用布局元素的最大/最小值或者偏好大小来确定自身的大小.
    • 可以指定水平或者垂直方向上的适配方式来控制宽度和高度
    • Horizontal Fit/Vertical Fit
      • None: 不控制
      • Minimum: 根据布局元素的最小值
      • Preferred: 根据布局元素的偏好值
控制子节点大小和位置(RectTransforms)

实现了ILayoutGroup接口的类:

  • GridLayoutGroup: 网格布局, 子节点被称为Cell, Cell大小和位置固定由空间驱动, Cell的LayoutElement无效

  • 水平布局或者垂直布局: 此类控制器默认只能控制子节点的位置, 如果需要根据子节点的布局元素类控制需要设置Child Controls Size

    • HorizontalLayoutGroup: 水平布局
    • VerticalLayoutGroup: 垂直布局
    • 属性说明
      • Child Alignment: 确定子节点的排序
      • Child Controls Size: 通过子节点的布局元素来确定子节点的大小
      • Child Force Expand: 如何处理父节点的剩余部分
        • Child Controls Size勾选时(这里子节点针对布局元素, 决定位置和大小): 在满足各个子节点的PreferredSize后, 剩余的部分Size由各个子节点填充, 填充如下

          • 将所有子节点的FlexibleSize加起来为TotalFlexibleSize, 如果子节点没有设置FlexibleSize, 那么默认为1
          • 剩余的部分Size除以TotalFlexibleSize获得平均FlexibleSize的大小
          • 子节点根据自身FlexibleSize乘以平均FlexibleSize的大小获得填充大小
        • Child Controls Size未勾选时(这里子节点针对所有RectTransform元素, 决定位置): 按照所有的子节点RectTransform的大小排列之后, 多余的部分当做间隔平分填充到子节点之间

使用示例

下面给出两个比较常见的需求, 作为上述理论的实践.

(1)Text内容自适应

需求说明: 默认情况下Text的大小需要手动指定, 我们想要固定宽度或者高度, 让另一个方向根据内容自动调整.

Text实现了ILayoutElemtent接口, 是一个布局元素, 默认情况下:

  • Min Width/Height 为0
  • Flexible Widht/Height不生效
  • 根据当前内容和当前RectTransform的值计算适合的PreferredSize
  • 此时布局元素的属性不影响RectTransform

添加控制器ContentSizeFitter, 调节自身大小为首选大小:


(2)由子节点大小动态确定父节点的大小

需求: 某些情况下, 一些容器类型的对象, 我们希望其大小是根据子节点大小动态变化的, 比如ScrollView的Content动态扩容.

解决思路: Content需要控制自身大小, 也需要控制子节点大小:

  • 控制子节点大小: 根据子节点的布局元素属性来设置子节点大小(首选和最小都可以)
  • 控制自身大小: 子节点的大小设置完成后, Content的首选大小会被正确的设置, 之后我们可以使用ContentSizeFitter来选择首选大小控制自己的大小即可

具体步骤演示:

  • 构建垂直方向上的ScrollView:

  • 添加VerticalLayoutGroup并设置控制子节点ChildControlsSize:Height

    • 此时子节点的首选大小和如果小于Content的大小, 那么所有的子节点平分Content的大小
    • 此时子节点的首选大小和如果大于Content的大小, 那么所有的子节点按照首选大小来设置, 剩余的部分根据是否设置FlexibleSize来处理
    • 上图Content的大小与首选大小不匹配, 当前的大小超过了首选大小, 并不是最适合的

  • 添加ContentSizeFitter控制自身大小, 此时Content的高度与首选高度一致, 是所有子节点(布局元素)的高度之和

Unity中的自动布局(AutoLayout)相关推荐

  1. android自动布局优先级,自动布局AutoLayout

    1:理解概念 Auto Layout 中文翻译过来意思是 自动布局 ,通过内定的 Constraint (约束)和各项条件来计算出合理的布局.而这个合理的布局,符合我们的的预期和意图. 将我们想象中的 ...

  2. 在UITableView中使用自动布局以获取动态单元格布局和可变的行高

    本文翻译自:Using Auto Layout in UITableView for dynamic cell layouts & variable row heights 如何在表格视图的U ...

  3. Unity中的GUI编程

    原文地址 在这篇文章中我将给读者介绍Unity中的图形用户界面(GUI)编程.Unity有一个非常强大的GUI脚本API.它允许你使用脚本快速创建简单的菜单和GUI. 简介 Unity提供了使用脚本创 ...

  4. 第三方库Masonry自动布局AutoLayout使用

    布局: 1. 放在哪  坐标  CGPoint(x, y)    2. 有多大  尺寸  CGSize(width, height) 布局方式: 1.绝对布局(FrameLayout)也称 坐标布局 ...

  5. Unity中UI系统——IMGUI(GUI)

    1.工作原理和主要作用 using System.Collections; using System.Collections.Generic; using UnityEngine;public cla ...

  6. 学习在Unity中创建一个动作RPG游戏

    游戏开发变得简单.使用Unity学习C#并创建您自己的动作角色扮演游戏! 你会学到什么 学习C#,一种现代通用的编程语言. 了解Unity中2D发展的能力. 发展强大的和可移植的解决问题的技能. 了解 ...

  7. 学习用C#在Unity中创建一个2D Metroidvania游戏

    学习用C#在Unity中创建一个2D Metroidvania游戏 你会学到: 构建2D Unity游戏 用C#编程 玩家统计,水平提升,米尔和远程攻击 敌方人工智能系统 制定级别和级别选择 Lear ...

  8. 在Unity中制作4种不同的游戏

    流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,48.0 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:8.6 GB 含课程素材 |时长:15h ...

  9. 学会在Unity中创建一个Match-3益智游戏 Learn To Create a Match-3 Puzzle Game in Unity

    MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz,2 Ch 语言:英语+中英文字幕(根据原英文字幕机译更准确) |时长:48场讲座(6h 38m) |大小解压后:2.8 G ...

最新文章

  1. 如何评价算法的好坏？
  2. ROS知识：关于如何命名的约定
  3. windows下docker安装mysql
  4. 15日直播预告丨SQL条件等价改写秘笈（主讲人：怀晓明）
  5. Linux终端设置成256色模式,如何设置LinuxX终端,使Emacs可以访问256色?
  6. 算法导论第八章练习参考答案
  7. 数据结构——p = new Lnode和Lnode *p有什么区别
  8. 1 Yocto 项目分析和跟踪手册
  9. java开发专用英语,JAVA开发常用英语词汇
  10. 交社保竟然还能领失业补助金，自己尝试去申请
  11. 用Python代码来下载任意指定网易云歌曲
  12. 论文阅读笔记《Dynamic Few-Shot Visual Learning without Forgetting》
  13. mysql 处理字符串 减断_Mysql处理字符串函数（转）
  14. c++_-nan(ind) NAN
  15. 静态方法与非静态方法的相互调用
  16. MCU与电动滑台控制陶瓷加热灯移动模拟人体热释效应
  17. java---CAS原理分析详解
  18. 在西门子S7-200中一步步做库文件
  19. 自动控制原理知识点梳理——5.线性系统的频域分析法
  20. Dockerfile 简单例子

热门文章

  1. Axure 9做原型只能显示为黑白灰色,设置彩色不生效
  2. 大数据 Hadoop 生态体系介绍
  3. VS系列编译器安装破解版VA_X.dll插件
  4. 墨者WordPress插件漏洞分析溯源
  5. 四省通衢之“衢”——衢州（美食篇）
  6. ContextCapture Smart3D
  7. MySQL数据库驱动包在eclipse中的导入
  8. 车联网应用之“财产保全”
  9. word自带公式编辑_Word公式编辑器下载_Word公式编辑器官方下载-太平洋下载中心...
  10. 全新红娘交友系统定制版源码 | 相亲交友小程序源码 全开源可二开