NGUI之UIRoot——屏幕的自适应分辨率的计算

//原来写在其他博客上的东西，搬迁

预备知识：

• 要明确的三个概念：
• 设计分辨率：在编辑器上开发UI使用的分辨率。我们所有的UI都是在这个分辨率下设计制作的。
• 显示区域分辨率：设备上所显示的UI区域在编辑器中的分辨率。
• 屏幕分辨率：设备实际的分辨率。
• 已知设计分辨率，屏幕分辨率，求区域分辨率的计算方法
• 设置变量

• 设计分辨率 ContentWidth * ContentHeight，以下简写为 CW * CH
• 屏幕分辨率 width * height，以下简写 W * H
• 区域分辨率 TargetWidth * TargetHeight，以下简写 TW * TH （这两个是未知量）
• 所求区域分辨率用 Target 表示
• 求解
• 模式一：保持各个UI在屏幕中所占的百分比（保持宽高比）

	不留黑边	留黑边
CW / CH < W / H	CW / TH = W / H Target = CW * TH	TW / CH = W / H Target = TW * CH
CW / CH > W / H	TW / CH = W / H Target = TW * CH	CW / TH = W / H Target = CW * TH

黄色的公式：以宽度为基准自适应 （所用公式记为：公式一）

绿色的公式：以高度为基准自适应 （所用公式记为：公式二）

 

• 模式二：保持各个UI的像素大小不变（保持宽高比）

Target = W * H

• 模式三：保证UI元素在单方向上的比例不变，即自由拉伸（不保持宽高比）

Target = CW * CH（此时 CW 和 CH 是随着屏幕分辨率变化的）

UIRoot

 

• Flexible 即，上文所说的模式二。但有个地方要额外注意下：
• 这种模式下有两个参数，MinHeight 和 MaxHeight。
• 当屏幕分辨率在 MinHeight 和 MaxHeight 之间时，此时按照模式二正常显示；
• 当屏幕分辨率小于 MinHeight 或者大于 MaxHeight 时，会对整体UI进行缩放，缩放比例为(H / MinHeight) 或者（H / MaxHeight）
• Constrained 即， 上文所说的模式一。
• 这种模式下有四个参数，ContentWidth 与 ContentHeight 以及对应的 Fit
• ContentWidth 与 ContentHeight 填我们的设计分辨率
• Fit 有四种选择模式，不同的模式有不同的自适应方案。为了便于理解，从NGUI网站上找到了一张示意图&自己总结了一下计算所需的公式：

　　

 

Fit Width	No	Yes	No	Yes
Fit Height	No	No	Yes	Yes
显示&对应计算公式	保证设备不显示黑边	保证左右无黑边 （公式一）	保证上下无黑边 （公式二）	保证设计分辨率内所有UI全部显示

 

• 额外的计算：计算某个UI（比如图片）在设备上的分辨率
• 图片分辨率大小 PW * PH
• 图片在设备上显示的分辨率大小 TPW * TPH（未知量）
• 计算：需要一个方程组
• (PW * PH) / (TW * TH) = (TPW * TPH) / (W * H)
• PW / PH = TPW / TPH