【UGUI容器】中Content Size Fitter组件-使 UI 元素适应其子内容的大小

这篇具有很好参考价值的文章主要介绍了【UGUI容器】中Content Size Fitter组件-使 UI 元素适应其子内容的大小。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

官方文档:使 UI 元素适应其内容的大小 - Unity 手册

必备组件:Content Size Fitter

通常,在使用矩形变换定位 UI 元素时,应手动指定其位置和大小(可选择性地包括使用父矩形变换进行拉伸的行为)。

但是,有时可能希望自动调整矩形的大小来适应 UI 元素的内容。为此,可添加名为内容大小适配器 (Content Size Fitter) 的组件。

例如文本字体变大、内容变多,都需要增大UI矩形来显示内容

content size filter,ugui,ui

适应文本大小

为了使带有文本组件的矩形变换适应文本内容,请将内容大小适配器组件添加到具有文本组件的同一游戏对象。然后将 Horizontal Fit 和 Vertical Fit 下拉选单设置为 Preferred 设置。

工作原理

此处的工作原理是文本组件充当布局元素,可提供有关最小大小和偏好大小的大小信息。在手动布局中,不会使用此信息。内容大小适配器是一种布局控制器,可监听布局元素提供的布局信息,并根据此信息控制矩形变换的大小。

注意轴心

当 UI 元素自动调整大小来适应其内容时,应特别注意矩形变换的轴心。当元素调整大小时,轴心将保持在原位,因此通过设置轴心位置,可控制元素扩展或收缩的方向。例如,如果轴心位于中心,则元素将在所有方向上均匀扩展,如果轴心位于左上角,则元素将向右和向下扩展。

适应具有子文本的 UI 元素的大小

如果 UI 元素(比如按钮)具有一个背景图像和一个带有文本组件的子游戏对象,这种情况下可能会希望整个 UI 元素适应文本的大小 - 可能还需要一些填充。

为此,首先将水平布局组 (Horizontal Layout Group) 添加到 UI 元素,然后也添加内容大小适配器。将 Horizontal Fit 和/或 Vertical Fit 设置为 Preferred 设置。此外,可使用水平布局组中的填充属性来添加和调整填充。

为什么使用水平布局组?其实,也可以是垂直布局组 (Vertical Layout Group),只要只有一个子项,两者的结果就是相同的。

工作原理

水平(或垂直)布局组既可用作布局控制器,也可用作布局元素。首先,布局组会监听该组内的子项(在本示例中为子文本组件)提供的布局信息。然后,布局组将确定该组必须为多大(最小大小和偏好大小)才能够包含所有子项,并充当布局元素来提供这些有关最小大小和偏好大小的信息。

内容大小适配器会监听同一游戏对象上的任何布局元素提供的布局信息 - 在本示例中由水平(或垂直)布局组提供。根据设置,内容大小适配器随后会基于此信息控制矩形变换的大小。

一旦设置了矩形变换的大小,水平(或垂直)布局组将确保根据可用空间来定位其子项并调整大小。请参阅有关水平布局组的页面,详细了解如何控制其子项的位置和大小。

使布局组的子项适应各自的大小

如果有一个布局组(水平或垂直)并希望该组中的每个 UI 元素都适应其各自的内容,该怎么做?

这种情况下不能为每个子项添加内容大小适配器。原因是内容大小适配器想要控制自己的矩形变换,但父布局组也想要控制子矩形变换。因此会产生冲突,结果是不明确的行为。

但是,也没有必要这样做。父布局组已经可以使每个子项适应内容的大小。需要做的是禁用布局组上的 Child Force Expand 开关。如果子项本身也是布局组,可能还需要禁用这些子项上的 Child Force Expand 开关。

一旦子项不再以灵活宽度进行扩展,便可使用 Child Alignment 设置在布局组中指定子项的对齐方式。

如果希望某些子项进行扩展以便填充额外的可用空间,而其他子项不扩展,该怎么办?向需要扩展的子项添加布局元素组件并在这些布局元素上启用 Flexible Width 或 Flexible Height 属性,即可轻松控制此行为。父布局组仍应禁用 Child Force Expand 开关,否则所有子项将灵活扩展。

工作原理

一个游戏对象可以有多个组件,每个组件都提供有关最小大小、偏好大小和灵活大小的布局信息。优先级系统将确定哪些值优先于其他值。布局元素组件的优先级高于文本、图像和布局组组件,因此可用于覆盖它们提供的任何布局信息值。

布局组监听子项提供的布局信息时,还会考虑覆盖的灵活大小。然后,在控制子项的大小时,布局组不会让子项的大小超过偏好大小。但是,如果布局组启用了 Child Force Expand 选项,则始终会使所有子项的灵活大小至少为 1。

更多信息

本页面介绍了一些常见用例的解决方案。如需了解自动布局系统的更深入说明,请参阅 UI 自动布局页面。文章来源地址https://www.toymoban.com/news/detail-815043.html

到了这里,关于【UGUI容器】中Content Size Fitter组件-使 UI 元素适应其子内容的大小的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity UGUI的ContentSizeFitter(内容尺寸适应器)组件的介绍及使用

    ContentSizeFitter是Unity UGUI中的一个组件,用于自动调整UI元素的大小,以适应其内容的大小变化。它可以根据内容的大小自动调整UI元素的宽度和高度,确保内容不会被截断或溢出。 ContentSizeFitter组件通过监听UI元素的子元素的大小变化,自动调整UI元素的大小。它可以根据子元

    2024年02月08日
    浏览(35)
  • CSS的background 背景图片自动适应元素大小,实现img的默认效果 background-size:100% 100%;

    CSS的background 背景图片自动适应元素大小,实现img的默认效果 background-size:100% 100%; 关键是 background-size:100% 100%; background-size:100% 100%; background-size:contain; 保持纵横比, 容器部分可能空白 background-size:cover; 保持纵横比, 图像可能指显示部分 background-size:100% 100%; 不保持纵横比, 背景图像

    2024年02月20日
    浏览(39)
  • Unity UGUI的LayoutElement(布局元素)组件的介绍及使用

    LayoutElement是Unity UGUI中的一个布局元素组件,用于控制UI元素在布局中的大小和位置。它可以用于自动调整UI元素的大小,以适应不同的屏幕分辨率和布局需求。 LayoutElement组件通过设置一些属性来控制UI元素的布局,包括最小和最大宽度、最小和最大高度、宽度和高度的优先级

    2024年02月16日
    浏览(64)
  • 【Unity-UGUI控件全面解析】| Panel 容器组件详解

    🎬 博客主页:https://xiaoy.blog.csdn.net 🎥 本文由 呆呆敲代码的小Y 原创,首发于 CSDN 🙉 🎄 学习专栏推荐:Unity系统学习专栏 🌲 游戏制作专栏推荐:游戏制作

    2024年02月02日
    浏览(40)
  • 【unity之UI专题】—UI如此简单之UGUI六大组件(GIF思维导图详解)

    👨‍💻个人主页 :@元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏 : unity常用API 👽 ScreenSpace —overlay(覆盖模式) UI组件一直显示在屏幕前,覆盖所有 对应图示: 👽 ScreenSpace—Camera 摄像机模式 摄像机不

    2023年04月11日
    浏览(58)
  • 【Unity 3D】UI系统中UGUI各个组件的详细讲解(附源码 超详细)

    UI设计又称界面设计,是指对软件的人机交互、操作逻辑、界面美观的整体设计,UI就相当于人可以看到的界面,并且可以对UI进行交互。 Unity  3D的UI,分为UGUI和GUI,UGUI主要是图形渲染界面,搭建方便,学习比较容易,GUI主要是代码渲染界面,需要在编写代码时就思考如何完

    2024年02月03日
    浏览(40)
  • 【unity插件】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件

    一般的shader无法直接使用在UI上,需要在shader中定义特定的面板参数,今天就来推荐github上大佬做的一套开源的一系列UGUI,Shader实现的特效——UIEffect 为 Unity UI 提供视觉效果组件。 https://github.com/Ankh4396/UIEffect 让我们用效果来装饰你的UI!您可以根据需要从脚本和检查器中控

    2024年02月04日
    浏览(43)
  • elment-ui部分ui组件在移动端也能实现自适应

    javascript 好久没更新了 ,来更新一下自己的笔记 最近有移动端的项目迁移到pc端,pc端那一套用的是element-ui的后台框架,所以难免有一些样式不兼容的问题,之前很久的时候也处理过这些,但是很久没处理忘了==, 所以之后再遇到兼容的会更新到这篇笔记上,供之后翻阅 1. el-dialog 借助

    2024年02月04日
    浏览(51)
  • Element UI 中的Table表格组件自定义行高与整个表格自适应高度

    1、:header-row-style=\\\"{height:\\\'30px\\\'}\\\" 设置表格列标题的高度为30像素。 2、:header-cell-style=\\\"{background:\\\'#f5f7fa\\\',padding:\\\'0px\\\'}\\\" 设置表格列标题的背景颜色。 3、:row-style=\\\"{height:\\\'30px\\\'}\\\" 设置每行的高度为30像素。 4、height=\\\"calc(100vh - 150px)\\\" 设置整个表格的高度。因为要自适应所以这个高度要用

    2024年02月12日
    浏览(48)
  • 【element UI 中的af-table-column组件】el-table-column如何自适应调整列宽,简单高效!!!

    在element UI框架中,组件el-table-column代表table的一列,有时候我们不想让里面的内容换行,网上的方法一般是需要给自适应列宽的column写一个动态的width,比较麻烦。 af-table-column是基于 element-ui 组件库的 el-table-column 组件, 支持自适应列宽功能 使用前得先导入,对于第二行“V

    2024年02月08日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包