美文网首页
[UGUI]适配不同分辨率和机型

[UGUI]适配不同分辨率和机型

作者: 想变的很强的日向彻 | 来源:发表于2019-11-13 11:05 被阅读0次

1.原理

一个UI界面可能被放大或者缩小,如果缩放的比例,即长宽比例和原分辨率一样,那么直接乘以缩放系数即可。更为复杂和普遍的情况,长宽的缩放比例不同,比如宽高比2:1,放大到3:1或者缩小到1:1

(1)对于缩放到3:1,由于高的比例相同,实际上就是把2:1的画布放到3:1的画布正中间,而两边各多出0.5则是扩展背景图片

(2)对于缩放到1:1,先把2:1长宽均乘以0.5,变为1:0.5的画布,然后放到1:1的screen中,上下扩充背景图片

核心在于把长和宽其中之一缩放到新的尺寸,那么是长还是宽呢,可以看出为了保证新的仍然可以被画布完全包住,我们要选择比例小的那个方向进行对齐,2:1到3:1,高比例变小了,所以向高对齐,即宽度自适应,而2:1到1:1,宽的比例变小了,向宽对齐变为1:0.5,高度留白。

2.Canvas Scaler (画布定标器)

the Canvas Scaler component is used for controlling the overall scale and

pixel density of UI elements in the Canvas. This scaling affects

everything under the Canvas, including font sizes and image borders

Scale With Screen Size模式可以实现上述原理的屏幕分辨率自适应

3.刘海屏

正常的刘海屏,水滴屏,穿孔屏,最上面的区域都是状态栏拿刘海屏来说,刘海在正中间,左右两边显示状态栏信息,下面方方正正无需进行操作,对于游戏或者开发app来说,拿很多app来说进入到应用也是会显示状态栏的,所以无需进行适配,屏幕大小相当于去除了刘海区域的新的分辨率的屏幕,按照正常的屏幕分辨率来进行适配就好,然而对于游戏来说,进入游戏以后一般是不会显示状态栏信息的,所以这个时候如果我们的最上方区域正中间有元素,那么就需要对元素进行下移,避免关键的按键或者UI在刘海区域而无法正常显示。

还有一点刘海屏手机虽然是只有一端有刘海,但是为了保持对称性(旋转手机后仍然是合理的UI),还有保持用户旋转屏幕后UI的位置不会发生变化,保证用户体验,所以,要保持手机上下的留白区域相同,拿iphone来说分辨率是1125 x 2436。

4.UGUI中的锚点和轴点

轴点pivot:旋转和坐标都是根据轴点计算的范围[0,1],轴点是相对于自身的,也就是我和别人计算位置,坐标时从哪里算,比如(0, 0)用我的左下角来算,(1,1)用我的右上角来算

锚点:用于计算和父物体的位置,当四个锚点在一起的时候,UI的实际位置是锚点位置到轴点位置的坐标显示在position的地方。

当四个锚点不在一块,而是一个矩形区域的时候,锚框,这时候的位置是轴点相对于锚框四边的距离

相关文章

  • [UGUI]适配不同分辨率和机型

    1.原理 一个UI界面可能被放大或者缩小,如果缩放的比例,即长宽比例和原分辨率一样,那么直接乘以缩放系数即可。更为...

  • React native之封装 LED数字

    如果有更好的书写方式,欢迎提出废话不多说,直接上代码!! 由于不同手机机型分辨率不同,先写个适配比例不同机型的方法...

  • UGUI分辨率适配方案

    1. 目标 项目 UI 模块基于 UGUI 来实现,希望能够适配不同分辨率的移动平台。项目总体是竖屏,所以希望能够...

  • Android TV 开发之屏幕适配

    前言 Android 的屏幕适配是指适配不同机顶盒 UI 框架层输出的分辨率和 dpi,而不是适配不同分辨率的电视...

  • iOS屏幕适配概述

    [toc] 1 屏幕适配简介 1.1 屏幕发展历史 手机型号 |屏幕大小 | 分辨率------------ | ...

  • Android 屏幕适配

    由于android的碎片化严重,我们需要适配各种机型,各种不同大小,不同分辨率的屏幕,来保持我们界面的一致性,这一...

  • h5中的字体大小自适应;

    750px是iphone6的物理像素,也叫屏幕分辨率;设计稿中通常750作为宽度; 为了适配不同的像素的机型;我们...

  • 安卓屏幕分辨率

    话不多说,推荐几篇有关安卓屏幕适配文章,以后会不定时更新: 分辨率概念 Android屏幕适配(不同的屏幕分辨率和...

  • UE4 UMG屏幕适配

    1、设计分辨率的选择 一般选择市场主流机型进行参考(分辨率,内存等参数),分辨率越高占用内存越大 2、适配策略...

  • Android多屏幕适配之字体大小、行间距和字间距

    今天要说的是屏幕适配字体这块,为什么要选这么个主题呢,大家都知道Android机型众多,不同的手机屏幕分辨率也是千...

网友评论

      本文标题:[UGUI]适配不同分辨率和机型

      本文链接:https://www.haomeiwen.com/subject/ftcevctx.html