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的预设布局组件进行组合来解决,若解决不了再去考虑开发自定义的布局组件。

相关推荐
_ZHOURUI_H_13 小时前
MyFramework: 同样是 Unity 游戏开发框架,和 HTFramework 的设计取向有什么不同?(下)
unity·游戏引擎·游戏开发·游戏ui·手游开发
丁小未2 天前
基于MVVM框架的XUUI 扩展的UI管理系统教程
unity·mvvm·ui框架·xuui·ui管理器
丁小未3 天前
基于MVVM框架的XUUI HelloWorld 新手教程
unity·性能优化·c#·游戏引擎
丁小未3 天前
基于MVVM框架的XUUI MoreComplex案例
unity·c#
EQ-雪梨蛋花汤3 天前
【Unity笔记】VR 一体机画面锯齿、模型边缘闪烁、接缝抖动排查:MSAA、Mipmap、Render Scale、Z-Fighting 全流程记录
笔记·unity·vr
YigAin3 天前
Unity Spine 资源出现白边的解决办法
unity·游戏引擎·spine
郝学胜-神的一滴4 天前
中级OpenGL教程 013:渲染器类架构设计与逐帧渲染流程详解
开发语言·c++·unity·游戏引擎·图形渲染·opengl·unreal
真鬼1235 天前
【Unity WebGL】内嵌网页与双向通信
unity·游戏引擎·webgl
zyh______6 天前
C#语法糖(按照实用性排序)
unity·c#
avi91116 天前
[AI教做人]CinemachineCamera 各项调整配置参数入门 + Profiler
unity·游戏开发·camera·cinemachine·visual camera·镜头配置