Unity UI适配,处理水滴屏,异形屏

原理的话,就是处理市面上的各种各样不同型号的手机屏幕,然后有些屏幕会有前置摄像头的小圆孔挡在前面,如图:

像这种情况,如果不处理的话,就会有UI被遮挡住的后果,所以我们就需要去处理他们;

原理就是:通过计算这些摄像头的位置的偏移量,然后让画布躲开这些位置即可,实现效果如下:

第一步:项目布局,Canvas设置如下:

创建Canvas画布对象,把Render Mode设置为Screen Space-Camera,摄像机就是场景中的Main Camera;

设置Canvas画布对象中的Canvas Scaler组件,

1、把UI Scale Mode 选项设置为Scale With Screen Size,该选项的作用是随屏幕尺寸进行缩放;

2、把Reference Resolution设置为1920 ,1080;这是个Vector2的变量;

3、Screen Match Mode ,设置为Match Width Or Height,该作用是匹配宽度或高度,这个就是UI对象是随着宽度适配还是随着高度适配;

然后创建Panel对象,作用背景图颜色为红色,区分效果;

复制第一个Panel对象,颜色为绿色,再该Panel对象下创建三个Text,分别放置在上中下,别忘了设置三个Text不同的描点,设置描点的快捷键是Alt + Shift,如图:

好的项目布局基本完毕;

第二步,创建脚本对象UIAdaptBase,可以自行取其他名字,Adapt就是实现效果的函数,该脚本作用基类,可以让子类继承,不了解基类子类的可以去了解一下C#的面向对象封装、继承、多态;

创建第二个脚本SefaAreaUIAdapt,该脚本挂载到第二个Panel对象中,即绿色颜色的Panel对象;

思路是:首先获取Canvas Scaler组件,和绿色Panel对象的位置,然后在Awake中通过Init方法找到场景中的Canvas Scaler组件对象赋值给scaler;

然后rectTransform就是绿色Panel的位置,脚本会挂载到绿色Panel对象下的,所以通过GetComponent来获取即可;

然后在Adapt函数中,先获取屏幕安全区域,然后通过算法计算需要躲避的水滴屏和异形屏的位置偏移量,然后给绿色Panel对象的位置重新赋值。

update的作用就是调试,可以时刻看看测试结果;

脚本内容如下:

画质不清晰的话,打开这个:

https://shimo.im/docs/473QM7wEWytp03wP/ 《Unity UI适配,处理水滴屏,异形屏》,可复制链接后用石墨文档 App 打开

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值