UI自适应 Unity

最新推荐文章于 2025-06-09 10:12:37 发布
原创 最新推荐文章于 2025-06-09 10:12:37 发布 · 651 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#unity

本文介绍了一种解决UI自适应问题的方法，通过计算屏幕相对于原始屏幕的缩放比及实际屏幕宽度，调整GridLayoutGroup组件下的cellSize，确保经验条等元素在不同屏幕尺寸下能够平滑缩放。

最近学习遇到了一个UI自适应的问题
如下图:
1335*750
在这里插入图片描述
当切换到free aspect下
在这里插入图片描述

经验条因为没有设置两边对齐就会出现间隙问题

这几个小格子我是用的grid layout Group 来调整的，所以在自适应的时候，随着屏幕变化，只需要更改这个组件下的cellSize即可。
首先看第一张图
在这里插入图片描述
因为除经验条外其他的宽度都是固定大小的可以在其UI的rect transform组件下计算出其总宽度，然后再加上这十个经验条的总宽度就==屏幕的总宽度。然后就是小学生解方程就可以得出每个经验条的cellSize宽度大小。

  • 注意这里的画布的UI Scale Mode模式是Scale With Screen 因为这样UI的缩放才会随着屏幕的变化而变化。也正是这样才引出我这个问题的出现

下面来看代码的实现

private void ScreenAdaptation(
最低0.47元/天 解锁文章
一_叶子
关注
【Unity】 UI自适应案例
灵境引路人
05-23 1075
案例一：背包自动布局 案例二：文字自适应高度
【UGUI】学会Unity中UGUI中UI元素自适应问题
leoysq的博客
09-19 3718
就像画一幅画，首先我们需要一张什么也没有的白纸贴在画板上（这个画板就是：Canvas）,有了画板以后，我们就可以一层层的铺上画面元素了，这些画面元素就是具体的UI元素（包括：一个图、按钮、滚动条、勾选框、文本框等等）而且，在层级面板的UI名称列表中（大纲列表）排在上面的就会被放在图层下方，后面创建的UI会遮住早先创建的，就像一层层的画画一样，后面刷的颜色肯定是在最前方。但是UI元素的锚点定位好了,我UI元素本身呢，这还不好说吗，就像任何图像在设计软件在都会围绕锚点，并且跟随锚点。UI元素本身也会跟随锚点。
Unity UI自适应
qq_43511290的博客
04-19 2095
Unity UI自适应一级目录 一级目录 Canves的设置 左上角的UI设置 左下角的UI设置 右上角的UI设置 有下角的UI设置
【Unity】UI自适应-可变形
HG2131的博客
01-16 2308
文章目录前言一、功能代码1.锚点重置2.场景备份3.场景还原4.UI自适应二、代码总览三、知识点1.anchorMin 与 anchorMax2.offsetMin 与 offsetMax3.localPosition4.sizeDelta5.rect6.GetWorldCorners()四、知识点说明文章链接 前言 本文内容为UI控件，水平、垂直方向均变化的自适应处理。即UI与屏幕大小同比例变形。 同时包含：锚点重置、场景备份与还原功能 一、功能代码 1.锚点重置 代码如下： private vo.
Unity实现Ui自适应屏幕
qq_62893047的博客
06-01 1819
实现Ui自适应屏幕：无论屏幕如何缩放，对应的UI总是始终保持在相对屏幕的位置。
[UnityUI]UGUI自适应
热门推荐
宏哥的博客
03-12 2万+
参考链接： http://www.jianshu.com/p/96fd1fbe8409 http://blog.sina.com.cn/s/blog_4148e8630102vji9.html http://www.xuanyusong.com/archives/3278 关键点： 0.自适应的测试：通过设置多种的屏幕大小进行测试，测试时最好要打开Maximize o
精选资源
Unity3d UI自适应CanvasScaler测试工程
06-10
总的来说，Unity3d UI自适应CanvasScaler是一个复杂但至关重要的主题，掌握其使用技巧对于创建高质量、多平台兼容的UI至关重要。通过TestCanvasScaler项目，我们可以实践并深入理解CanvasScaler的各种设置，提升开发...
Unity 实现UI自适应
slf_tragon的博客
05-29 906
5.下面的Match是已上门为基础 （建议 如果是横屏已高为主 竖屏相反 方形建议在中间看个人需求）但是在这样设置完后会发现很多的UI的子集部分或者很多UI还是原本大小这样就需要用代码来自适应。在做UI功能的时候都要注意对屏幕的自适应 应为不同的手机设备都拥有不同的分辨率。2.Canvas自带的Canvas Scaler组件。先看看Unity 自带的自适应功能。所以自适应的分辨率是必不可少的。4.是宽和高已上门分辨率为基础。3.选择具体如图所示。也可以封装方法来使用。
Unity UGUI 自适应
weixin_44439733的博客
12-01 1818
UGUI自适应
unity3d中UI自适应
oyang_mrong的博客
09-12 1694
unity3d中针对UI界面的自适应问题，其内嵌了自己的算法，如何使用它的算法呢？ 很简单！！！ 找到Canvas的属性界面中的Canvas Scaler 其中将UI Scale Mode设置为：Scale With Screen Size，将Reference Resolution中x，y设置为主流分辨率（如1920*1080）（Reference Resolution的作用为：当buil...
在Unity中实现UI屏幕自适应
vjsopmh
10-26 3580
如果适配高度，则应承受UI放大所造成的影响如果适配宽度，则应使用更大高度的背景图片，避免上下黑边的产生如果适配高度，则应使用宽度更大的背景图片，避免上下黑边的产生如果适配宽度，则应承受UI放大所造成的影响无论是PC端、移动端还是其他，除了开启屏幕分辨率缩放和正确设置锚点外，还要根据项目的具体情况，选择最优的适配方式6*2%3D12。
unity中设置UI自适应的方法
m0_52801429的博客
05-23 894
unityUI自适应
UNITY 屏幕UI自适应
钢筋混凝土石头人的博客
04-15 566
1.主要就是根据屏幕的选择根据尺寸 和UI的锚点和中心点来选择，也可以通过代码来动态修改。
UI自适应
qq_43271176的博客
12-23 587
考虑横屏或竖屏游戏，我们可以调整不同的屏幕缩放模式，比如横屏游戏，一般是以高为缩放标准，竖屏游戏，一般以宽为缩放标准。一开始的分辨率设定取决于游戏素材，从而选择一个最合适的分辨率。在开发游戏过程中，怎么解决UI自适应问题。根据UI面板窗口，设定合适的锚点。
UNITY UI自适应问题
NL的博客
07-26 2913
今天用UNITY开发游戏，游戏发布后，总是出现游戏画面与测试时画面不符的情况，进行过各种钻研，以及从网上收集资料，终于解决了问题，下面把总结的知识分享一下： 1.所谓的自适应，就是： a.保持相对位置不变。例如UI设计在屏幕的左上角，那么在各种的分辨率下都应该在左上角 b.保持宽高比例不变。由于分辨率有很多种，所以保持宽高等比例缩放是做不到的，要么是宽拉伸缩放的程度大些，要么是高拉伸缩放的程...
Unity3D UI自适应技术：CanvasScaler测试与应用
最新发布
weixin_35734408的博客
06-09 917
Unity3D 是一款强大的游戏开发引擎，它为开发者提供了一整套用于创建二维和三维游戏的工具和功能。自从2005年由Unity Technologies推出以来，它已成为游戏设计领域的行业标准之一，支持多平台发布，包括PC、游戏机、移动设备和Web。Unity3D以C#作为主要编程语言，支持可视化脚本系统，降低了游戏开发的门槛，使得即使是编程新手也能快速上手。
Unity Ui自适应
01-23
### Unity UI 自适应布局方法 #### 锚点设置 对于UI控件（如Button, Image等），可以通过调整锚点来实现自适应效果。根据UI控件所需固定的不同位置，合理配置锚点能够使界面元素在不同分辨率下维持预期的视觉表现[^1]。 ```csharp // 设置按钮的矩形变换组件属性以响应不同的屏幕尺寸变化 RectTransform buttonRect = GetComponent<RectTransform>(); buttonRect.anchorMin = new Vector2(0.5f, 0.5f); // 中心对齐 buttonRect.anchorMax = new Vector2(0.5f, 0.5f); ``` #### Canvas适配策略 Canvas作为承载所有UI元素的基础容器，其自身的缩放模式决定了整个场景内UI的表现形式。为了确保跨设备的一致性体验，应选择合适的Canvas Scaler组件参数来进行全局性的比例调节。 ```csharp // 获取CanvasScaler组件并应用特定的比例计算逻辑 CanvasScaler scaler = canvas.GetComponent<CanvasScaler>(); scaler.uiScaleMode = CanvasScaler.ScaleMode.ScaleWithScreenSize; Vector2 referenceResolution = new Vector2(1920, 1080); scaler.referenceResolution = referenceResolution; scaler.matchWidthOrHeight = 1; // 更倾向于匹配宽度还是高度 ``` #### 布局组与元素接口的应用 利用`LayoutGroup`及其派生类可定义一组子对象间的排列规则；而`ILayoutElement`则允许单独控制某个具体项目的行为特性，两者协同工作能有效简化复杂页面结构的设计流程[^2]。 ```xml <!-- 使用HorizontalLayoutGroup创建水平分布的内容区域 --> <HorizontalLayoutGroup> <!-- 子项会按照从左至右顺序依次摆放 --> </HorizontalLayoutGroup> <!-- 定义单个项目的最小尺寸和其他约束条件 --> <script src="CustomLayoutElement.cs"></script> ``` #### 动态调整方案实例 针对特殊需求场合下的即时反馈机制设计，可通过编程手段实时监测视窗大小变动事件，并据此作出相应处理措施，比如按比例缩小放大整体UI或是重新定位某些关键部件[^5]。 ```csharp void OnEnable() { Screen.orientationChanged += HandleOrientationChange; } void HandleOrientationChange() { float ratioX = (float)Screen.width / baseScreenWidth; float ratioY = (float)Screen.height / baseScreenHeight; float scaleRatio = Mathf.Min(ratioX, ratioY); transform.localScale = new Vector3(scaleRatio, scaleRatio, 1); } ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值