iPhone 屏幕分辨率

參考內(nèi)容:

  • iPhone
設(shè)備
Width

Height
對(duì)角線
Diagonal
邏輯分辨率
point
物理分辨率
physic pixel
邏輯縮放因子(UIKit Scale factor) 實(shí)際縮放因子(Native Scale factor) PPI
3GS 2.4inches
62.1mm
4.5inches
115.5mm
3.5-inch 320x480 320x480 @1x 1.0 163
4(s) 2.31inches
58.6mm
4.5inches
115.5mm
3.5-inch 320x480 640x960 @2x 2.0 326
5c 2.33inches
59.2mm
4.90inches
124.4mm
4-inch 320x568 640x1136 @2x 2.0 326
5(s) 2.31inches
58.6mm
4.87inches
123.8mm
4-inch 320x568 640x1136 @2x 2.0 326
6 2.64inches
67.1mm
5.44inches
138.3mm
4.7-inch 375x667 750x1334 @2x 2.0 326
6+ 3.07inches
77.9mm
6.23inches
158.2mm
5.5-inch 414x736 (1242x2208)>
1080x1920
@3x 2.608 401
7 2.64inches
67.1mm
5.44inches
138.3mm
4.7-inch 375x667 750x1334 @2x 2.0 326
7+ 3.07inches
77.9mm
6.23inches
158.2mm
5.5-inch 414x736 1080x1920 @3x 2.608 326
8 2.65inches
67.3mm
5.45inches
138.4mm
4.7-inch 375x667 750x1334 @2x 2.0 326
8+ 3.07inches
78.1mm
6.24inches
158.4mm
5.5-inch 414x736 1080x1920 @3x 2.608 401
X/XS 2.79inches
70.9mm
5.65inches
143.6mm
5.8-inch 375x812 1125x2436 @3x 3.0 458
XR 2.98inches
75.7mm
5.94inches
150.9mm
6.1-inch 414x896 828x1792 @2x 2.0 326
XS Max 3.05inches
77.4mm
6.20inches
157.5mm
6.5-inch 414x896 1242x2688 @3x 3.0 458
11 2.98inches
75.7mm
5.94inches
150.9mm
6.1-inch 414x896 828x1792 @2x 2.0 326
11 Pro 2.81inches
71.4mm
5.67inches
144.0mm
5.8-inch 375x812 1125x2436 @3x 3.0 458
11 Pro Max 3.06inches
77.8mm
6.22inches
158.0mm
6.5-inch 414x896 1242x2688 @3x 3.0 458
設(shè)備 狀態(tài)欄高度 底部安全距離 導(dǎo)航欄高度 tabbar高度
4(s) 20 - 44 49
5/5c/5s 20 - 44 49
6/6s/6sp 20 - 44 49
7/7p 20 - 44 49
8/8p 20 - 44 49
X/XS 44 34 44 83
XR 44 34 44 83
XS Max 44 34 44 83
11 44 34 44 83
11 Pro 44 34 44 83
11 Pro Max 44 34 44 83
  • 物理分辨率 VS 邏輯分辨率

解釋一:俗話說物理分辨率是硬件所支持的,邏輯分辨率是軟件可以達(dá)到的颅夺。
物理尺寸是指屏幕的實(shí)際大小滨溉。大的屏幕同時(shí)必須要配備高分辨率红选,也就是在這個(gè)尺寸下可以顯示多少個(gè)像素腰池,顯示的像素越多名眉,可以表現(xiàn)的余地自然越大
640x960弦讽、640x1136等這些都是物理尺寸或是物理分辨率污尉。
而下面的320x480、320x568等這些都是邏輯分辨率或是邏輯尺寸往产。
如果我們?cè)O(shè)計(jì)的時(shí)候用單位px被碗,可以說是物理分辨率尺寸。
如果我們?cè)O(shè)計(jì)的時(shí)候用單位pt仿村,可以說是邏輯分辨率尺寸锐朴。

需要注意的地方是,6(S)+/7+/8+的時(shí)候奠宜,實(shí)際的縮放因子并不等于邏輯上的縮放因子包颁。所以,他的屏幕分辨率是1080x1920而不是1242x2208压真。
第一個(gè)疑問是為什么iPhone6 Plus的邏輯分辨率要用414*736呢娩嚼,如果用360 x 640貌似也OK,放大三倍后正好是1080 x 1920滴肿,都可以省去后面那個(gè)downsample的步驟了岳悟。參考資料2詳細(xì)分析了iPhone6 Plus的邏輯分辨率這樣設(shè)置的原因,摘錄如下泼差,先看圖:

image
  • 如果邏輯分辨率用360 x 640贵少,放大3x后確實(shí)正好跟屏幕分辨率一致,省去了doansample的步驟堆缘。但是這樣帶來(lái)的問題是6P的邏輯分辨率 360x640 比 iPhone 6的 375x667 還低滔灶,6P的大屏幕雖然很精細(xì),但是可顯示的實(shí)際內(nèi)容比6還少吼肥,太不科學(xué)录平。打個(gè)比方就是:相同字號(hào)的情況下麻车,6如果一行顯示了25個(gè)字,而6P就會(huì)只能顯示24個(gè)字了斗这。
  • 如果邏輯分辨率為540 x 960动猬,放大2x就可以跟屏幕分辨率一致,這樣也就不用3x的圖片了表箭。但是這樣帶來(lái)的問題是6P的邏輯分辨率差不多是6的兩倍赁咙,確實(shí)可以顯示更多的內(nèi)容了,但是UI控件可以顯示的實(shí)際物理面積變小了免钻,標(biāo)簽欄或?qū)Ш綑诎粹o的物理高度只有原來(lái)的81.5%(163/200)彼水,點(diǎn)擊面積只有原來(lái)的66.4%(81.5% x 81.5%),這樣點(diǎn)擊就更加困難了极舔。
  • 因此最好的方案應(yīng)該是圖中的iPhone6 Plus(a)了猿涨,物理像素1242 x 2208,在5.5英寸的屏幕上這個(gè)ppi就要達(dá)到461了姆怪,而蘋果最終并沒有采用這個(gè)方案,而是縮放到了1080 x 1920澡绩』遥可能的原因是如果分辨率達(dá)到461ppi,則內(nèi)存消耗增大肥卡,電池消耗增大溪掀,工藝上可能也有難度。當(dāng)然如果后續(xù)技術(shù)提高后步鉴,克服了這些困難揪胃,則很可能不用downsample了。
  • 如果我們不用3x的圖片氛琢,而是將2x的圖片用在6P中喊递,則會(huì)出現(xiàn)明顯的鋸齒或模糊。
    上述數(shù)據(jù)阳似,可以通過代碼獲得骚勘。獲取邏輯縮放因子、邏輯屏幕寬度撮奏;實(shí)際縮放/物理因子俏讹、實(shí)際/物理屏幕寬度的方式:
//邏輯縮放因子
[UIScreen mainScreen].scale
//邏輯屏幕寬度
[UIScreen mainScreen].bounds
//實(shí)際/物理縮放因子
[UIScreen mainScreen].nativeScale
//實(shí)際/物理屏幕寬度
[UIScreen mainScreen].nativeBounds

iOS里面對(duì)于縮放因子有2個(gè)不同的概念。一個(gè)是其實(shí)際的縮放因子(Native Scale factor)畜吊,一個(gè)是UIKit上所表示的邏輯縮放因子(UIKit Scale factor)泽疆。當(dāng)UIKit Scale factor和Native Scale factor不相等的時(shí)候,系統(tǒng)會(huì)先使用邏輯上的factor(即UIKit Scale factor)來(lái)渲染玲献,渲染之后再把結(jié)果進(jìn)行縮放殉疼,使之符合Native Scale factor下渲染的樣子梯浪。在一些UI渲染計(jì)算量大的應(yīng)用(如游戲),這類多余的渲染是很耗費(fèi)資源的株依,應(yīng)該在渲染這類UI的時(shí)候指定使用Native Scale factor來(lái)做渲染驱证。MetalKit(新的系統(tǒng)接口,支持GPU加速3D繪圖的API恋腕。)里面有這個(gè)用法抹锄。詳情見官網(wǎng)。

參考:《為什么 iPhone 6 Plus 要將 3x 渲染的 2208x1242 分辨率縮小到 1080p 屏幕上荠藤?》

關(guān)于表格的一些說明:

  • 單位inch(英吋)
    1inch = 2.54cm = 25.4mm
  • 寬高(Width/Height)
    寬高(Width/Height)為手機(jī)的物理尺寸伙单,包括顯示屏和邊框。
    以iPhone4s的寬高為例:
    4S寬高
  • 屏幕尺寸
    我們通常所說的iPhone5屏幕尺寸為4英寸哈肖、iPhone6屏幕尺寸為4.7英寸吻育,指的是顯示屏對(duì)角線的長(zhǎng)度(diagonal)。
    iPhone5~6+屏幕尺寸
  • 像素密度PPI
    PPI(Pixel Per Inch by diagonal):表示沿著對(duì)角線淤井,每英寸所擁有的像素(Pixel)數(shù)目布疼。
    PPI數(shù)值越高,代表顯示屏能夠以越高的密度顯示圖像币狠,即通常所說的分辨率越高游两、顆粒感越弱。
    屏幕尺寸


    根據(jù)勾股定理漩绵,可以得知iPhone4(s)的PPI計(jì)算公式為:
    計(jì)算公式-事例

    計(jì)算結(jié)果稍有出入贱案,這是因?yàn)橄袼氐碾x散采樣有鋸齒效應(yīng)。
  • 縮放因子(scale factor between logic point and device pixel)
    (1) Scale起源
    早期的iPhone3GS的屏幕分辨率是320x480(PPI = 163)止吐,iOS繪制圖形(CGPoint/CGSize/CGRect)均以point為單位(measured in points):
    1point = 1pixel(Point Per Inch = Pixel Per Inch = PPI)
    后來(lái)在iPhone4中宝踪,同樣大小(3.5inch)的屏幕采用了Retina顯示技術(shù),橫碍扔、縱方向像素密度都被放大到2倍瘩燥,像素分辨率提高到(320x2)x(480x2)=640x960(PPI=326),顯像分辨率提升至iPhone3GS的4倍(1個(gè)Point被渲染成1個(gè)2x2的像素矩陣)不同。
    但對(duì)于開發(fā)者來(lái)說颤芬,iOS繪制圖形的API依然沿襲point(pt,注意區(qū)分印刷行業(yè)的“磅”)為單位。在同樣的邏輯坐標(biāo)系下(320x480):
    1point = scale*pixel(在iPhone4~6中套鹅,縮放因子scale=2站蝠;在iPhone6+中,縮放因子scale = 3)卓鹿。
    可以理解為:
    scale=絕對(duì)長(zhǎng)度比(point/pixel)=單位長(zhǎng)度內(nèi)的數(shù)量比(pixel/point)
    (2) UIScreen.scale
    UIScreen.h中定義了該屬性:
    // The natural scale factor associated with the screen.(read-only)
    @property(nonatomic,readonly)CGFloat scale  NS_AVAILABLE_IOS(4_0);

This value reflects the scale factor needed to convert from the default logical coordinate space into the device coordinate space of this screen.
The default logical coordinate space is measured usingpoints. Forstandard-resolution displays, the scale factor is 1.0 andone point equals one pixel. ForRetina displays, the scale factor is 2.0 and one point is represented by four pixels.

為了自動(dòng)適應(yīng)分辨率菱魔,系統(tǒng)會(huì)根據(jù)設(shè)備實(shí)際分辨率,自動(dòng)給UIScreen.scale賦值吟孙,該屬性對(duì)開發(fā)者只讀澜倦。

(3) UIScreen.nativeScale
iOS8新增了nativeScale屬性:

    // Native scale factor of the physical screen
   @property(nonatomic,readonly)CGFloat nativeScale NS_AVAILABLE_IOS(8_0);

以下是iPhone6+下的輸出聚蝶,初步看來(lái)nativeScale與scale沒有太大區(qū)別

(lldb)p (CGFloat)[[UIScreen mainScreen] scale]
(CGFloat) $1 = 3

(lldb) p(CGFloat)[[UIScreen mainScreen] nativeScale]
(CGFloat) $2 = 3

(4) 機(jī)型判別
在同樣的邏輯分辨率下,可以通過scale參數(shù)識(shí)別是iPhone3GS還是iPhone4(s)藻治。以下基于nativeScale參數(shù)碘勉,定義了探測(cè)機(jī)型是否為iPhone6+的宏:

    // not UIUserInterfaceIdiomPad
#defineIS_IPHONE(UI_USER_INTERFACE_IDIOM() ==UIUserInterfaceIdiomPhone)
    // detect iPhone6 Plus based on its native scale
#defineIS_IPHONE_6PLUS(IS_IPHONE && [[UIScreenmainScreen] nativeScale] == 3.0f)

那么,同樣的分辨率和scale桩卵,如何區(qū)分機(jī)型iPhone4與4s验靡、iPhone5與5s呢?通過[[UIDevice currentDevice] model]只能判別iPhone雏节、iPad胜嗓、iPod大類,要判斷iPhone具體機(jī)型型號(hào)钩乍,則需要通過機(jī)型型號(hào)獲取詳細(xì)的設(shè)備參數(shù)信息予以甄別辞州。

points
開始時(shí),所有圖形的坐標(biāo)都是以點(diǎn)為單位指定的寥粹。點(diǎn)是抽象的單位变过,它們只在這個(gè)數(shù)學(xué)坐標(biāo)空間中有意義。

Rendered Pixels 渲染像素
基于點(diǎn)的圖形被渲染成像素涝涤。這個(gè)過程被稱為光柵化牵啦。
點(diǎn)坐標(biāo)乘以比例因子得到像素坐標(biāo)。比例因子越高妄痪,細(xì)節(jié)層次越高。

Physical Pixels物理像素
設(shè)備屏幕的像素分辨率可能低于在上一步驟中渲染的圖像楞件。
在顯示圖像之前衫生,必須將其降采樣(調(diào)整大小)以降低像素分辨率土浸。

Physical Device物理設(shè)備
最后罪针,在物理屏幕上重新顯示計(jì)算像素。
PPI數(shù)字告訴您一英寸可以容納多少像素黄伊,從而告訴您像素在現(xiàn)實(shí)世界中的大小泪酱。




  • @2x/@3x以及高倍圖適配

(1)@2x

@2x means the same “double”retina resolution that we’veseen on all iOS devices with retina displays to date, where each virtual pointin the user interface is represented by twophysical pixels on thedisplayin each dimension, horizontal and vertical.

iPhone3GS時(shí)代,我們?yōu)橐粋€(gè)應(yīng)用提供圖標(biāo)(或按鈕提供貼圖)还最,只需要icon.png墓阀。針對(duì)現(xiàn)在的iPhone4~6 Retina顯示屏,需要制作額外的@2x高分辨率版本拓轻。
例如在iPhone3GS中斯撮,scale=1,用的圖標(biāo)是50x50pixel(logicalimage.size=50x50point)扶叉;在iPhone4~6中勿锅,scale=2帕膜,則需要100×100pixel(logical image.size=50x50point,乘以image.scale=dimensions in pixels)溢十,并且命名為icon@2x.png垮刹。
如果APP要同時(shí)兼容iPhone3GS~iPhone6,則需要提供icon.png/icon@2x.png兩種分辨率的圖片张弛。

(2) @3x

@3x means a new “triple” retina resolution, where eachuser interface point is represented by three display pixels. A single @2x pointis a 2?×?2 square of 4 pixels; an @3x point is a 3?×?3 square of 9 pixels.”
iPhone6+在實(shí)際渲染時(shí)荒典,downsampling/1.15(1242x2208->1080x1920),準(zhǔn)確的講乌庶,應(yīng)該是@2.46x种蝶。蘋果為方便開發(fā)者用的是@3x的素材,然后再縮放到@2.46x上瞒大。

參考:《為什么iPhone 6 Plus要將3x渲染的2208x1242分辨率縮小到1080p屏幕上螃征?》《詳解 iPhone 6 Plus 的奇葩分辨率》《iPhone 6 Plus屏幕分辨率

如果APP要同時(shí)兼容iPhone3GS~iPhone6+,則需要提供icon.png/icon@2x.png/icon@3x.png三種分辨率的圖片透敌。

需要注意的是盯滚,iOS APP圖標(biāo)的尺寸命名都需要遵守相關(guān)規(guī)范。

(3) 高倍圖文件命名

對(duì)于iPhone3酗电、4/5/6魄藕、6+三類機(jī)型,需要按分辨率提供相應(yīng)的高倍圖并且文件名添加相應(yīng)后綴撵术,否則會(huì)拉伸(stretchable/resizable)失真(模糊或邊角出現(xiàn)鋸齒)背率。

以下基于UIImage的兩類初始化API簡(jiǎn)介高倍圖的適配:

<1>+imageNamed:該方法使用系統(tǒng)緩存,適合表視圖重復(fù)加載圖像的情形嫩与。同時(shí)該API根據(jù)UIScreen的scale寝姿,自動(dòng)查找包含對(duì)應(yīng)高倍圖后綴名(@2x)的文件,如果找到二倍圖划滋,則image.scale=2.0饵筑,對(duì)應(yīng)邏輯size大小以point度量(pixel度量的一半);如果沒找到設(shè)置默認(rèn)image.scale=1.0处坪,對(duì)應(yīng)邏輯size大小同像素尺寸根资。因此,使用該方法同窘,無(wú)需特意指定高倍圖后綴玄帕。在實(shí)際運(yùn)行時(shí),系統(tǒng)如果發(fā)現(xiàn)當(dāng)前設(shè)備是Retina屏(scale=2)想邦,會(huì)自動(dòng)尋找"*@2x.png"命名格式的圖片桨仿,加載針對(duì)Retina屏的圖片素材,否則會(huì)失真案狠。

<2>+imageWithContentsOfFile/+imageWithData:(scale:)/-initWithContentsOfFile:/-initWithData:(scale:)
這組方法創(chuàng)建的UIImage對(duì)象沒有使用系統(tǒng)緩存服傍,并且指定文件名必須包含明確的高倍圖后綴钱雷。如果文件名包含@2x后綴,則image.scale=2.0吹零;否則默認(rèn)image.scale=1.0罩抗,同樣對(duì)于Retina屏將會(huì)失真。

<3>目前灿椅,適配iPhone6+時(shí)套蒂,除了一些鋪滿全屏的大圖(LogoIcon、LaunchImage)需提供三倍圖茫蛹,其他的小圖仍可沿用原有的二倍圖自適應(yīng)拉伸操刀。

iPhone圖標(biāo)尺寸

圖標(biāo)尺寸
  • Screen Bounds &Application Frame

(1)UIScreen.bounds

// Bounds of entire screen in points(本地坐標(biāo)系,起點(diǎn)為[0,0])

@property(nonatomic,readonly)CGRectbounds;

//考慮轉(zhuǎn)屏的影響婴洼,按照實(shí)際屏幕方向(UIDeviceOrientation)的寬高

#define SCREEN_WIDTH ([UIScreenmainScreen].bounds.size.width)

#define SCREEN_HEIGHT ([UIScreenmainScreen].bounds.size.height)

#define STATUSBAR_HEIGHT ([UIApplicationsharedApplication].statusBarFrame.size.height)

//不考慮轉(zhuǎn)屏的影響骨坑,只取豎屏(UIDeviceOrientationPortrait)的寬高

#define SCREEN_WIDTH MIN([UIScreenmainScreen].bounds.size.width, [UIScreenmainScreen].bounds.size.height)

#define SCREEN_HEIGHT MAX([UIScreenmainScreen].bounds.size.height, [UIScreenmainScreen].bounds.size.width)

#define STATUSBAR_HEIGHT MIN([UIApplicationsharedApplication].statusBarFrame.size.width, [UIApplicationsharedApplication].statusBarFrame.size.height)

(2)UIScreen.nativeBounds
iOS8新增了nativeBounds屬性,輸出豎屏像素級(jí)分辨率:

// The bounding rectangle of the physical screen,measured inpixels. (read-only)

// This rectangle is based on the device in a portrait-up orientation. This value does not change as the device rotates.

    @property(nonatomic,readonly)CGRectnativeBoundsNS_AVAILABLE_IOS(8_0);

以下是iPhone6+下的輸出:

(lldb) poNSStringFromCGRect([(UIScreen*)[UIScreen mainScreen] bounds])
{{0, 0}, {414, 736}}
(lldb) poNSStringFromCGRect([(UIScreen*)[UIScreen mainScreen] nativeBounds])
{{0, 0}, {1242, 2208}}

(3) UIScreen.applicationFrame

// Frame of application screen area in points (i.e.entire screenminusstatus bar if visible)

    // bounds除去系統(tǒng)狀態(tài)欄

    @property(nonatomic,readonly)CGRectapplicationFrame;


    // APPFRAME_WIDTH=SCREEN_WIDTH

    #defineAPPFRAME_WIDTH ([UIScreen mainScreen].applicationFrame.size.width)

    // APPFRAME_HEIGHT=SCREEN_HEIGHT-STATUSBAR_HEIGHT

    //注意:橫屏(UIDeviceOrientationLandscape)時(shí)柬采,iOS8默認(rèn)隱藏狀態(tài)欄欢唾,此時(shí)APPFRAME_HEIGHT=SCREEN_HEIGHT

    #define APPFRAME_HEIGHT ([UIScreen mainScreen].applicationFrame.size.height)

(4) bounds和frame的區(qū)別

下圖展示了bounds和frame的區(qū)別

image
  • 機(jī)型尺寸適配(Screen Scale Adaption)

從iPhone3GS/iPhone4(s)過渡到iPhone5(s)時(shí),在邏輯上寬度不變高度稍高粉捻,之前舊的素材和布局通過AutoresizingFlexible簡(jiǎn)單適配即可運(yùn)行得很好礁遣,但由于高寬比增大,上下兩端出現(xiàn)黑粗邊(典型如LaunchImage)肩刃。從分辨率的角度來(lái)看祟霍,除了需要提供LaunchImage這種滿屏圖,其他基本沿用二倍圖(@2x)盈包;從屏幕尺寸角度來(lái)看沸呐,需要對(duì)縱向排版略加調(diào)整。

從iPhone5(s)發(fā)展到iPhone6(+)续语,由于高寬比保持不變,iOS對(duì)圖標(biāo)厦画、圖片疮茄、字體進(jìn)行等比放大自適應(yīng),清晰度會(huì)有所降低根暑。同時(shí)力试,絕對(duì)坐標(biāo)布局會(huì)導(dǎo)致在大屏下出現(xiàn)偏左偏上的問題。從分辨率的角度來(lái)看排嫌,iPhone6沿用二倍圖(@2x)畸裳,但需為iPhone6+提供更高的三倍圖(@3x);從屏幕尺寸角度來(lái)看淳地,需要重新對(duì)UI元素尺寸和布局進(jìn)行適配怖糊,以期視覺協(xié)調(diào)帅容。

(1) 按寬度適配

我們先來(lái)看一下iPhone4~6(+)的屏幕高寬比:

   iPhone4(s):分辨率960*640,高寬比1.5

   iPhone5(s):分辨率1136*640伍伤,高寬比1.775

   iPhone6:分辨率1334*750并徘,高寬比1.779

   iPhone6+:分辨率1920*1080,高寬比1.778

可粗略認(rèn)為iPhone5(s)扰魂、6(+)的高寬比是一致的(16:9)麦乞,即可以等比例縮放。因此可以按寬度適配:

fitScreenWidth= width*(SCREEN_WIDTH/320)

這樣劝评,共有iPhone3/4/5姐直、6、6+三組寬度蒋畜,在iPhone6声畏、6+下將按比例橫向放大。
(2) 按高度適配

在同樣的寬度下百侧,iPhone4(s)的屏高比iPhone5(s)低砰识,若縱向排版緊張,可以iPhone5(s)為基準(zhǔn)佣渴,按高度適配:

fitScreenHeight= height*(SCREEN_HEIGHT/568)

共有iPhone3/4辫狼、5、6辛润、6+四組高度膨处,在iPhone3/4下將按比例縱向縮小,在iPhone6砂竖、6+下將按比例縱向放大真椿。

這里需要注意iPhone/iOS雙環(huán)上網(wǎng)的熱點(diǎn)欄對(duì)縱向布局的影響:iPhone作為個(gè)人熱點(diǎn)且有連接時(shí),系統(tǒng)狀態(tài)欄下面會(huì)多一行熱點(diǎn)連接提示欄"Personal Hotspot: * Connection"乎澄,縱向會(huì)下壓20pt突硝,[UIApplication sharedApplication].statusBarFrame高度變?yōu)?0pt;當(dāng)所有連接都斷開時(shí)置济,熱點(diǎn)欄消失解恰,縱向高度恢復(fù)正常為20pt。詳情可參考《iPhone/iOS開啟個(gè)人熱點(diǎn)的縱向適配小結(jié)》浙于。
(3) 按字體適配

另外护盈,iPhone的【設(shè)置】【通用】【輔助功能】中可以設(shè)置調(diào)節(jié)【更大字體】,APP也可以按字號(hào)適配:

例如適配表視圖(UITableView:UIScrollView)羞酗,無(wú)法左右滑動(dòng)腐宋,因此無(wú)論字號(hào)縮放比例多大,橫向都不應(yīng)超過SCREEN_WIDTH。注意限定控件元素內(nèi)容區(qū)域?qū)挾纫约伴g距胸竞,并設(shè)置適當(dāng)?shù)腖ineBreakMode欺嗤。表視圖支持上下滑動(dòng),因此縱向上的表格行高和內(nèi)容區(qū)域高度可按字號(hào)縮放撤师。

對(duì)于縱向也不支持滑動(dòng)的視圖剂府,在屏幕可見視區(qū)內(nèi)排版時(shí),最好不要隨字號(hào)縮放剃盾,否則可能超出既定寬高腺占。
  • UI相對(duì)布局

考慮到iPhone機(jī)型的多樣性,不可能針對(duì)iPhone4(s)痒谴、5(s)衰伯、6、6+四種屏幕尺寸出四套視覺交互稿积蔚,也不要基于某一機(jī)型從上往下意鲸、從左往右給絕對(duì)標(biāo)注,而應(yīng)該關(guān)注subView在superView中的相對(duì)位置(EdgeInsets/Frame/Center)以及siblingView之間的偏移(Offset)尽爆,盡量給出適合Autolayout的相對(duì)布局比例(理想情況是只給百分比)怎顾。假如交互按照iPhone5(s)下絕對(duì)標(biāo)注,則在iPhone4(s)上可能擠出屏幕底部漱贱,而在iPhone6(+)上則可能橫向偏左或縱向偏上槐雾。

開發(fā)人員基于與屏幕邊緣的間距(Margin/EdgeInsets),定位邊緣處的控件(釘釘子)作為參照幅狮,然后基于控件尺寸和間隙進(jìn)行相對(duì)計(jì)算排版募强。這樣,若釘子移動(dòng)崇摄,相鄰控件將順向偏移擎值,不會(huì)因?yàn)榫植空{(diào)整而出現(xiàn)凌亂。

我們截取 iPhone5s QQ 文件助手列表中的文件cell逐抑,使用SketchMeasure對(duì)其進(jìn)行測(cè)量標(biāo)注鸠儿。

打開[截圖.png]文件,由于不包含 Sketch 圖元對(duì)象厕氨,無(wú)法進(jìn)行 measure 標(biāo)注(提示:請(qǐng)?jiān)诋嫲逯惺褂迷摴δ埽┙俊R虼耍谝徊叫枰獙?duì)要相對(duì)標(biāo)注的各個(gè)UI元素進(jìn)行對(duì)象化腐巢。依次 Insert Artboard 創(chuàng)建圖層 frame品追、thumbnail冯丙、title、detail、source胃惜、button泞莉。

選中整個(gè)cell的frame(bounds),進(jìn)行 Measure size:width=640px(SCREEN_WIDTH)船殉,height=168px鲫趁。默認(rèn)橫向尺寸和縱向參考線都居中導(dǎo)致標(biāo)注重疊,將縱向參考線右移至合適位置利虫;也可選中WIDTH標(biāo)注圖層中的text和label元素挨厚,在不移動(dòng)參考線的前提下,利用鼠標(biāo)局部移動(dòng)標(biāo)注字面量糠惫。
(1) 縮略圖標(biāo)

在左側(cè)邊欄layer list中選中frame疫剃,再command選中文件類型縮略圖對(duì)象thumbnail,進(jìn)行 Measure spacing硼讽,丈量縮略圖左側(cè)相對(duì)frame的間距為24px巢价。

選中文件類型縮略圖對(duì)象thumbnail,進(jìn)行 measure size固阁,由于正方形等寬為112px*112px壤躲,故橫縱標(biāo)注重疊無(wú)影響。thumbnail在frame中縱向整體居中备燃,因此上下邊距計(jì)算均攤即可碉克,無(wú)需再給定標(biāo)注。

(2) 傳輸按鈕

對(duì) button 和 frame 進(jìn)行 Measure spacing赚爵,丈量按鈕右側(cè)相對(duì)frame的間距為24px棉胀。
選中按鈕button進(jìn)行 measure size,其寬高為144px*60px冀膝。橫縱標(biāo)注重疊影響視覺唁奢,將縱向參考線右移至合適位置。

button在frame中縱向整體居中窝剖,因此上下邊距計(jì)算均攤即可麻掸,無(wú)需再給定標(biāo)注。
(3) 文件信息
對(duì)thumbnail和detail(title赐纱、source等寬且左對(duì)齊)進(jìn)行 Measure spacing脊奋,丈量圖標(biāo)右側(cè)相對(duì)detail的間距為20px;對(duì)button和detail進(jìn)行 Measure spacing疙描,丈量按鈕左側(cè)相對(duì)detail間距為20px诚隙。這樣,左側(cè)釘住thumbnail起胰,右側(cè)釘住button久又,中間信息部分的寬度無(wú)需給定,計(jì)算被動(dòng)約束的橫向余量即可。具體編程時(shí)地消,調(diào)用 sizeWithFont/boundingRectWithSize 可動(dòng)態(tài)計(jì)算每行 label 的自然寬度炉峰,一般title都會(huì)超過約束寬度,因此需設(shè)置 lineBreakMode指定Wrapping省略或Truncating截?cái)喔袷健?/p>

選中文件信息第1行標(biāo)題title和第2行詳情detail脉执,進(jìn)行 Measure spacing疼阔,測(cè)量縱向相對(duì)間距10px;第2行詳情detail和第3行來(lái)源的縱向相對(duì)間距也為10px半夷。一般 UILabel 的文本在給定字體下的縱向自然顯示無(wú)約束婆廊,調(diào)用 sizeWithFont/boundingRectWithSize 可動(dòng)態(tài)計(jì)算每行 label 的自然高度,title的上間距和source的底間距無(wú)需給定巫橄,通過計(jì)算縱向余量均攤即可否彩。

可簡(jiǎn)單的基于屏寬橫縱比例進(jìn)行scale縮放,將以上測(cè)量出的標(biāo)注應(yīng)用到iPhone6(+)大屏下嗦随,當(dāng)然交互設(shè)計(jì)工程師最好還是針對(duì)特定機(jī)型都給定適配標(biāo)注列荔。蘋果在WWDC2012 iOS6中已提出了Auto Layout的概念,即使用約束條件來(lái)定義視圖的位置和尺寸枚尼,以適應(yīng)不同尺寸和分辨率的屏幕贴浙。

  • DEPRECATED API適配

    最后,除了對(duì)屏幕尺寸和分辨率進(jìn)行適配之外署恍,還需對(duì)iOS SDK中相關(guān)的DEPRECATED API進(jìn)行適配崎溃。典型的如:

(1)UILineBreakMode->NSLineBreakMode

(2)UITextAlignment->NSTextAlignment

(3)sizeWithFont:->boundingRectWithSize:

(4)stretchableImageWithLeftCapWidth:topCapHeight:->resizableImageWithCapInsets:

(5)...

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市盯质,隨后出現(xiàn)的幾起案子袁串,更是在濱河造成了極大的恐慌,老刑警劉巖呼巷,帶你破解...
    沈念sama閱讀 211,639評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件囱修,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡王悍,警方通過查閱死者的電腦和手機(jī)破镰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)压储,“玉大人鲜漩,你說我怎么就攤上這事〖铮” “怎么了孕似?”我有些...
    開封第一講書人閱讀 157,221評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)刮刑。 經(jīng)常有香客問我喉祭,道長(zhǎng)霸饲,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,474評(píng)論 1 283
  • 正文 為了忘掉前任臂拓,我火速辦了婚禮,結(jié)果婚禮上习寸,老公的妹妹穿的比我還像新娘胶惰。我一直安慰自己,他們只是感情好霞溪,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評(píng)論 6 386
  • 文/花漫 我一把揭開白布孵滞。 她就那樣靜靜地躺著,像睡著了一般鸯匹。 火紅的嫁衣襯著肌膚如雪坊饶。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,816評(píng)論 1 290
  • 那天殴蓬,我揣著相機(jī)與錄音匿级,去河邊找鬼。 笑死染厅,一個(gè)胖子當(dāng)著我的面吹牛痘绎,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播肖粮,決...
    沈念sama閱讀 38,957評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼孤页,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了涩馆?” 一聲冷哼從身側(cè)響起行施,我...
    開封第一講書人閱讀 37,718評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎魂那,沒想到半個(gè)月后蛾号,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,176評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡涯雅,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評(píng)論 2 327
  • 正文 我和宋清朗相戀三年须教,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片斩芭。...
    茶點(diǎn)故事閱讀 38,646評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡轻腺,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出划乖,到底是詐尸還是另有隱情贬养,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評(píng)論 4 330
  • 正文 年R本政府宣布琴庵,位于F島的核電站误算,受9級(jí)特大地震影響仰美,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜儿礼,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評(píng)論 3 313
  • 文/蒙蒙 一咖杂、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧蚊夫,春花似錦诉字、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至琅轧,卻和暖如春伍绳,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背乍桂。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工冲杀, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人睹酌。 一個(gè)月前我還...
    沈念sama閱讀 46,358評(píng)論 2 360
  • 正文 我出身青樓漠趁,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親忍疾。 傳聞我的和親對(duì)象是個(gè)殘疾皇子闯传,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容