UGUI父对象自适应子元素布局解决方案

问题描述

在UI开发中,难免会遇到需要父对象自适应子元素尺寸的问题,这通常是为了解决不同屏幕分辨率的UI自适应问题。实际上我们去仔细了解UGUI的布局组件的原理就能够合理配置组件来解决这个问题。

**案例问题:**例如我现在有一个背景面板,背景面板中包含一张图片和一段文字,要求图片和文字进行向左水平居中布局,图片对象根据Sprite自适应大小,文本框根据文字内容自适应大小,且背景面板始终根据二者的总尺寸进行自适应。

解决方案

根据上述案例问题,首先肯定能想到需要一个Horizontal Layout Group组件,那么这就解决了图片和文字向左水平居中的问题,其次背景面板需要自适应总尺寸,那么就需要一个Content Size Fitter组件。

接下来是图片和文本框,二者都属于布局元素,所以就各自加上Layout Element组件。图片则勾选Image组件的Preserve Aspect选项,LayoutElement组件保持默认;文本框的LayoutElement组件需要勾选Flexible Width和Flexible Height,二者的值可以都设置为1。

总结

如果对UGUI布局感兴趣,还可以去看看预设的布局组件的源代码,在Packages/Unity UI下,对于其它布局情况建议先看看能否通过UGUI的预设布局组件进行组合来解决,若解决不了再去考虑开发自定义的布局组件。

相关推荐
Thomas_YXQ2 小时前
Unity3D IK解算器技术分析
开发语言·搜索引擎·unity·全文检索·unity3d·lucene
星火撩猿10 小时前
常见游戏引擎介绍与对比
unity·ue5·游戏引擎·godot
sky_smile_Allen11 小时前
[Unity]-[UI]-[Prefab] 关于Unity UGUI 的布局及组件讲解
ui·unity·游戏引擎
太妃糖耶16 小时前
URP-利用矩阵在Shader中实现物体的平移和缩放
unity·矩阵
是阿根1 天前
unity使用iTextSharp生成PDF文件
unity·c#·游戏引擎
常城2 天前
Unity中通过TMP使用图片字体
unity·游戏引擎
惊鸿醉2 天前
⭐Unity 开发 | 如何通过 NTP 网络时间实现精准的跨平台时间同步【附完整源码 + UI 模块 + 偏差分析】
网络·unity·游戏引擎
海鸥-w2 天前
Unity中使用Cinemachine插件创建自由视角相机(freelookCamera)来实现第三人称漫游
数码相机·unity·游戏引擎
EQ-雪梨蛋花汤2 天前
【Unity笔记】Unity音效管理:ScriptableObject配置 + 音量控制 + 编辑器预览播放自动化实现
笔记·unity·编辑器
qq_431331352 天前
Unity ML-Agents + VScode 环境搭建 Windows
windows·vscode·unity·强化学习