Unity-UI(UGUI详解)03 UI How Tos

UI的常用解决方案:

针对不同分辨率的解决方案

现代游戏应用需要支持不同的屏幕和分辨率,UI布局需要去适应这些。Unity中的UI系统包括丰富的工具针对这个问题。

1.锚点
第一种解决方案,使用锚点设置图片相对屏幕的角落的相对位置。当当前分辨率是游戏设计的布局的时候使用这种方式是正确的。
当屏幕分辨率变得更大或者更小的时候,按钮保持被锚在他们之前设定的角落。然而,他们还保持着他们的原始大小,这可能使这些元素看起来很大或者很小,这样他们就不能被正确的绘制出来。
为了解决屏幕分辨率变大或者变小的时候图片不能跟随变大变小的情况,使用Canvas Scaler来解决问题。

2.缩放屏幕大小
Canvas Scaler组件被添加在Canvas的根节点
可以将UI Scale Mode设置为 Scale With Screen Size,在这个模式下可以如果分辨率增多大或者减小,Canvas Scaler将自动进行调整。

需要注意:
从竖屏变到横屏的时候,如果使用上面的方式会出现一些问题,这是由于Canvas Scaler的原理引起的问题,Canvas Scaler对比宽度通过宽度的变化得到Canvas Scaler

有一个属性叫Match从0(Width)到1(Height),默认情况下设置为0,表示完全通过宽度比较作为Canvas Scaler的值。
如果Match 的值被设置为0.5,那么将同时比较宽度和高度,在两个值之间进行选择。

UI element与他们内容的大小适配

通常情况下我们通过Rect Transform对UI元素的位置大小进行设置,然而我们希望自动进行适配UI元素,这个问题可以通过添加Content Size Fitter解决

Fit to size of Text
为了使Text组件与文本内容大小进行适配,使用Content Size Fitter组件进行控制
原理:
text组件作为layout element提供信息它minimum的大小和preferred的大小。Content Size Fitter是一个Layout Controller,使用Layout element的信息对Rect Transform的大小进行控制
注意中心:
当文本框进行大小重新布局的时候,中心的位置将影响layout element的缩放扩大的方向,需要额外注意pivot的位置

Fit to size of UI element with child Text

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值