这是我参与11月更文挑战的第24天,活动详情查看:2021最后一次更文挑战
推荐阅读
大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦。
一、前言
前段时间分享了UGUI的每个组件的属性和使用方法,比如Text、Button、Image、Toggle、InputField、ScrollView等等。
接着分享了UGUI的一些原理,比如说UGUI的渲染模式、UGUI的缩放计算、UGUI的描点定位、UGUI的自动布局等等。
相信大家看完后会对UGUI有一个比较全面的认识了。
下面,就继续分享UGUI的UI组件进行应用的实例。
二、实现屏幕自适应
今天介绍一种实现屏幕自适应的方法。
首先,需要设置Canvas对象上的Canvas组件和CanvasScaler组件的属性。
Canvas组件属性设置如下:
RenderMode渲染模式设置为:Screen Space-Camera屏幕空间相机模式
Render Camera渲染相机:将设置好的UI相机拖进卡槽
CanvasScaler组件设置如下:
UIScaleMode缩放模式:Scale With Screen Size根据屏幕分辨率进行缩放
Reference Reolution默认分辨率:设置为960 X 640
三、编写代码
新建脚本,双击打开脚本,编辑代码:
void Start ()
{
float standard_width = 960f; //初始宽度
float standard_height = 640f; //初始高度
float device_width = 0f; //当前设备宽度
float device_height = 0f; //当前设备高度
float adjustor = 0f; //屏幕矫正比例
//获取设备宽高
device_width = Screen.width;
device_height = Screen.height;
//计算宽高比例
float standard_aspect = standard_width / standard_height;
float device_aspect = device_width / device_height;
//计算矫正比例
if (device_aspect < standard_aspect)
{
adjustor = standard_aspect / device_aspect;
}
CanvasScaler canvasScalerTemp = transform.GetComponent<CanvasScaler>();
if (adjustor == 0)
{
canvasScalerTemp.matchWidthOrHeight = 1;
}
else
{
canvasScalerTemp.matchWidthOrHeight = 0;
}
}
PS:根据获取来的屏幕默认分辨率,然后还有获取来的当前设备的宽高,计算出宽高比例,然后进行UI自适应。