Unity UGUI的LayoutElement(布局元素)组件的介绍及使用

1. 什么是LayoutElement组件?

LayoutElement是Unity UGUI中的一个布局元素组件,用于控制UI元素在布局中的大小和位置。它可以用于自动调整UI元素的大小,以适应不同的屏幕分辨率和布局需求。

2. LayoutElement组件的工作原理

LayoutElement组件通过设置一些属性来控制UI元素的布局,包括最小和最大宽度、最小和最大高度、宽度和高度的优先级等。当UI元素所在的布局组件(如HorizontalLayoutGroup或VerticalLayoutGroup)进行布局计算时,会根据LayoutElement的属性来确定UI元素的最终大小和位置。

3. LayoutElement组件的常用属性

  • Min Width(最小宽度):UI元素的最小宽度。
  • Min Height(最小高度):UI元素的最小高度。
  • Preferred Width(首选宽度):UI元素的首选宽度。
  • Preferred Height(首选高度):UI元素的首选高度。
  • Flexible Width(可伸缩宽度):UI元素的宽度可以根据布局需求进行伸缩。
  • Flexible Height(可伸缩高度):UI元素的高度可以根据布局需求进行伸缩。
  • Layout Priority(布局优先级):UI元素在布局计算中的优先级,用于确定UI元素的大小和位置。

4. LayoutElement组件的常用函数

  • CalculateLayoutInputHorizontal():计算UI元素在水平方向上的布局输入。
  • CalculateLayoutInputVertical():计算UI元素在垂直方向上的布局输入。

5. 例子代码

例子1:设置UI元素的最小宽度和最小高度

  1. LayoutElement layoutElement = GetComponent<LayoutElement>();
  2. layoutElement.minWidth = 100;
  3. layoutElement.minHeight = 50;

操作步骤:

  1. 获取LayoutElement组件。
  2. 设置最小宽度为100。
  3. 设置最小高度为50。

注意事项:

  • 最小宽度和最小高度的值应根据实际需求进行调整。

例子2:设置UI元素的首选宽度和首选高度

  1. LayoutElement layoutElement = GetComponent<LayoutElement>();
  2. layoutElement.preferredWidth = 200;
  3. layoutElement.preferredHeight = 100;

操作步骤:

  1. 获取LayoutElement组件。
  2. 设置首选宽度为200。
  3. 设置首选高度为100。

注意事项:

  • 首选宽度和首选高度的值应根据实际需求进行调整。

例子3:设置UI元素的可伸缩宽度和可伸缩高度

  1. LayoutElement layoutElement = GetComponent<LayoutElement>();
  2. layoutElement.flexibleWidth = 1;
  3. layoutElement.flexibleHeight = 1;

操作步骤:

  1. 获取LayoutElement组件。
  2. 设置可伸缩宽度为1。
  3. 设置可伸缩高度为1。

注意事项:

  • 可伸缩宽度和可伸缩高度的值应根据实际需求进行调整。

例子4:设置UI元素的布局优先级

  1. LayoutElement layoutElement = GetComponent<LayoutElement>();
  2. layoutElement.layoutPriority = 1;

操作步骤:

  1. 获取LayoutElement组件。
  2. 设置布局优先级为1。

注意事项:

  • 布局优先级的值越大,UI元素在布局计算中的优先级越高。

例子5:计算UI元素的布局输入

  1. LayoutElement layoutElement = GetComponent<LayoutElement>();
  2. layoutElement.CalculateLayoutInputHorizontal();
  3. layoutElement.CalculateLayoutInputVertical();

操作步骤:

  1. 获取LayoutElement组件。
  2. 调用CalculateLayoutInputHorizontal()函数计算水平方向上的布局输入。
  3. 调用CalculateLayoutInputVertical()函数计算垂直方向上的布局输入。

注意事项:

  • 在需要手动触发布局计算时,可以调用CalculateLayoutInputHorizontal()和CalculateLayoutInputVertical()函数。

参考资料

Unity UGUI的LayoutElement(布局元素)组件的介绍及使用的更多相关文章

  1. Unity UGUI

    超详细的基础教程传送门:(持续更新中) Unity UGUI之Canvas&EventSystem:http://blog.csdn.net/qq992817263/article/detai ...

  2. Unity UGUI Layout自动排版组件用法介绍

    Unity UGUI布局组件 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享 ...

  3. Unity3D UGUI强制刷新Layout(布局)组件

    UGUI的Layout布局组件确实节省了我们很多代码 如果不使用Layout组件 那么光在计算UI的布局上就要花费很大的功夫 特别是动态生成其组件的时候 当然,Layout组件在大多数时候是非常好用的 ...

  4. Unity ugui屏幕适配与世界坐标到ugui屏幕坐标的转换

    我们知道,如今的移动端设备分辨率五花八门,而开发过程中往往只取一种分辨率作为设计参考,例如采用1920*1080分辨率作为参考分辨率. 选定了一种参考分辨率后,美术设计人员就会固定以这样的分辨率来设计 ...

  5. Android开发1:基本UI界面设计——布局和组件

    前言 啦啦啦~本学期要开始学习Android开发啦~ 博主在开始学习前是完完全全的小白,只有在平时完成老师要求的实验的过程中一步一步学习~从此篇博文起,博主将开始发布Android开发有关的博文,希望 ...

  6. Unity UGUI —— 无限循环List

    还记得大学毕业刚工作的时候是做flash的开发,那时候看到别人写的各种各样的UI组件就非常佩服,后来自己也慢慢尝试着写,发现其实也就那么回事.UI的开发其实技术的成分相对来说不算多,但是一个好的UI是 ...

  7. 基于Unity·UGUI实现的RecycleList循环列表UI容器

    在UI功能开发实践中,列表UI容器是我们经常使用一种UI容器组件.这种组件就根据输入的数据集合生成对应数据项目.从显示的方向来说,一般就分为水平排布和垂直排布的列表容器两种.列表容器为了在有限的界面空 ...

  8. Unity UGUI图文混排源码(三) -- 动态表情

    这里是根据图文混排源码(二)进一步修改的,其他链接也不贴了,就贴一个链接就好了,第一次看这文章的同学可以先去看看其他几篇文章 Unity UGUI图文混排源码(二):http://blog.csdn. ...

  9. Unity UGUI之Canvas&EventSystem

    最近想写一套关于UGUI所有控件的基础使用教程系列,主要是根据本人的使用心得来写的,所以其中可能难以避免会有不正确的地方. 好了进入主题,既然是第一篇,我觉得我有必要先介绍一下UGUI必不可缺的两个组 ...

  10. Unity UGUI图文混排源码(二)

    Unity UGUI图文混排源码(一):http://blog.csdn.net/qq992817263/article/details/51112304 Unity UGUI图文混排源码(二):ht ...

随机推荐

  1. Gradio入门到进阶全网最详细教程[二]:快速搭建AI算法可视化部署演示(侧重参数详解和案例实践)

    Gradio入门到进阶全网最详细教程[二]:快速搭建AI算法可视化部署演示(侧重参数详解和案例实践) 相关文章:Gradio入门到进阶全网最详细教程[一]:快速搭建AI算法可视化部署演示(侧重项目搭建 ...

  2. class(类)和构造函数(原型对象)

    构造函数和class的关系,还有面向对象和原型对象,其实很多人都会很困惑这些概念,这是第二次总结这些概念了,之前一次,没有class类,其实了解了构造函数,class也就很容易理解了 一. 构造函数和 ...

  3. Prism Sample 15-FilteringEvents

    例14演示了怎样事件聚合器怎样发布与接收信息. 例15增加了一个事件的过滤功能,即设定一个条件,符合的才接收. _ea.GetEvent<MessageSentEvent>().Subsc ...

  4. vscode取消“禁用错误波形曲线”

    刚刚不小心点到了vscode的禁用错误波形曲线,导致现在没有报错提醒了,上网查了一下,重新打开错误曲线的方法是 1.按住Cctrl+shift+p 2.搜索 启用错误波形曲线,选择打开,就可以了

  5. 音视频八股文(7)-- 音频aac adts

    AAC介绍 AAC(Advanced Audio Coding)是一种现代的音频编码技术,用于数字音频的传输和存储领域.AAC是MPEG-2和MPEG-4标准中的一部分,可提供更高质量的音频数据,并且 ...

  6. 2020-11-15:手写代码:行有序、列也有序的二维数组中,找num,找到返回true,否则false?

    福哥答案2020-11-15: 此题来源于leetcode240和剑指 Offer(第 2 版)面试题4.1.线性查找.从二维数组的坐下角开始查找.如果当前元素等于目标值,则返回 true.如果当前元 ...

  7. Github Copilot Chat 初体验

    最近因为阳了的缘故一直躺在床上.今天终于从床上爬起来了.不是因为好透了,而是因为我收到了申请Copilot Chat preview 权限通过的邮件.实在忍不住,于是起床开电脑在咳嗽声中进行了一番体验 ...

  8. drf——序列化之source(了解)、定制字段的两种方式(重要)、多表关联反序列化保存、反序列化字段校验、ModelSerializer使用

    1 序列化高级用法之source(了解) # 1.创建了5个表(图书管理的5个) # 2.对book进行序列化 # 总结:source的用法 1.修改前端看到的字段key值--->source指 ...

  9. Java的CAS操作

    介绍 CAS 技术是为了解决问题而生的,通过 CAS 我们可以以无锁的方式,保证对共享数据进行 "读取 - 修改 - 写回" 操作序列的正确性. CAS 是乐观锁设计思想的实现.C ...

  10. WPF入门教程系列二十四——DataGrid使用示例(2)

    WPF入门教程系列目录 WPF入门教程系列二--Application介绍 WPF入门教程系列三--Application介绍(续) WPF入门教程系列四--Dispatcher介绍 WPF入门教程系 ...