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
时间: 2024-12-13 14:35:53

NGUI之UIRoot——屏幕的自适应分辨率的计算的相关文章

NGUI之UIRoot屏幕分辨率自适应

来自:http://blog.csdn.net/oneRain88/article/details/11713299 NGUI在Unity3D游戏开发中非常常用,而NGUI对于每一个UI场景,都是以一个UIRoot为UI游戏对象树的根的,那么这个UIRoot是起什么作用的呢? 先简单看一下UIRoot中的基本属性 UIRoot游戏对象的属性只有4个,分别是缩放规则,手动高度,最小高度和最大高度 而正是这4个属性,将影响整个UI场景中整体的缩放比例,当设置好这4个属性之后,UIRoot游戏对象的相

Unity3D开发(一):NGUI之UIRoot屏幕分辨率自适应

原地址:http://blog.csdn.net/onerain88/article/details/11713299 NGUI在Unity3D游戏开发中非常常用,而NGUI对于每一个UI场景,都是以一个UIRoot为UI游戏对象树的根的,那么这个UIRoot是起什么作用的呢? 先简单看一下UIRoot中的基本属性 UIRoot游戏对象的属性只有4个,分别是缩放规则,手动高度,最小高度和最大高度 而正是这4个属性,将影响整个UI场景中整体的缩放比例,当设置好这4个属性之后,UIRoot游戏对象的

iPhone屏幕尺寸、分辨率及适配

目录(?)[+] 1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS 2.4 inches (62.1 mm) 4.5 inches (115.5 mm) 3.5-inch 320x480 @1x 320x480 163 4(s) 2.31 inches (58.6 mm) 4.5 inches (115.2 mm) 3.5-inch 320x480

iosiPhone屏幕尺寸、分辨率及适配

iosiPhone屏幕尺寸.分辨率及适配 1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS 2.4 inches (62.1 mm) 4.5 inches (115.5 mm) 3.5-inch 320x480 @1x 320x480 163 4(s) 2.31 inches (58.6 mm) 4.5 inches (115.2 mm) 3.5-

【转】iPhone屏幕尺寸、分辨率及适配

原文网址:http://blog.csdn.net/phunxm/article/details/42174937 1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS 2.4 inches (62.1 mm) 4.5 inches (115.5 mm) 3.5-inch 320x480 @1x 320x480 163 4(s) 2.31 inches

自适应分辨率

3.xx 以上 绑定到UIRoot using UnityEngine; namespace Com.Xyz.UI { [ExecuteInEditMode] [RequireComponent(typeof(UIRoot))] public class UIScreenAdaptive : MonoBehaviour { public int aspectRatioWidth = 1280; public int aspectRatioHeight = 720; public bool run

转: iPhone屏幕尺寸、分辨率及适配

1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS 2.4 inches (62.1 mm) 4.5 inches (115.5 mm) 3.5-inch 320x480 @1x 320x480 163 4(s) 2.31 inches (58.6 mm) 4.5 inches (115.2 mm) 3.5-inch 320x480 @2x 640x

WinForm窗体自适应分辨率

我们自己编写程序的界面,会遇到各种屏幕分辨率,只有自适应才能显的美观.实际上,做到这点也很简单,就是首先记录窗体和它上面控件的初始位置和大小,当窗体改变比例时,其控件的位置和大小也按此比例变化即可.因为窗体上控件的位置和大小是相对于自己所在的窗体的,也就是所谓的窗口坐标. 在这里我们只考虑相对于自己窗体的窗口坐标更简单,也就是成比例变化.为了多个窗体共用,我在这里创建一个类AutoSizeFormClass ,1.使用它去记录窗体和其控件的初始位置和大小,2.判断窗体中的控件是否为容器控件,如果

iPhone屏幕尺寸、分辨率及适配 (转)

1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS 2.4 inches (62.1 mm) 4.5 inches (115.5 mm) 3.5-inch 320x480 @1x 320x480 163 4(s) 2.31 inches (58.6 mm) 4.5 inches (115.2 mm) 3.5-inch 320x480 @2x 640x