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

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的地方。

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,125评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,293评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,054评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,077评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,096评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,062评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,988评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,817评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,266评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,486评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,646评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,375评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,974评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,621评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,642评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,538评论 2 352

推荐阅读更多精彩内容