- iPhone尺寸規(guī)格
設備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 | 640x960 | 326 |
5c | 2.33 inches (59.2 mm) | 4.90 inches (124.4 mm) | 4-inch | 320x568 | @2x | 640x1136 | 326 |
5(s) | 2.31 inches (58.6 mm) | 4.87 inches (123.8 mm) | 4-inch | 320x568 | @2x | 640x1136 | 326 |
6 | 2.64 inches (67.0 mm) | 5.44 inches (138.1 mm) | 4.7-inch | 375x667 | @2x | 750x1334 | 326 |
6+ | 3.06 inches (77.8 mm) | 6.22 inches (158.1 mm) | 5.5-inch | 414x736 | @3x | (1242x2208->)1080x1920 | 401 |
2. 單位inch(英吋)
1 inch = 2.54cm = 25.4mm
3.iPhone手機寬高
上表中的寬高(width/height)為手機的物理尺寸柔吼,包括顯示屏和邊框筝尾。
以下為iPhone4s的寬高示意圖:
4. 屏幕尺寸
我們通常所說的iPhone5屏幕尺寸為4英寸、iPhone6屏幕尺寸為4.7英寸卧惜,指的是顯示屏對角線的長度(diagonal)厘灼。
以下為iPhone5~6+的屏幕尺寸規(guī)格示意圖:
5. 像素密度PPI
PPI(Pixel Per Inch by diagonal):表示沿著對角線,每英寸所擁有的像素(Pixel)數(shù)目咽瓷。
PPI數(shù)值越高设凹,代表顯示屏能夠以越高的密度顯示圖像,即通常所說的分辨率越高茅姜、顆粒感越弱闪朱。
根據(jù)勾股定理,可以得知iPhone4(s)的PPI計算公式為:
計算結果稍有出入钻洒,這是因為像素的離散采樣有鋸齒效應奋姿。
6. 縮放因子(scale factor between logic point and device pixel)
- Scale起源
早期的iPhone3GS的屏幕分辨率是320*480(PPI=163),iOS繪制圖形(CGPoint/CGSize/CGRect)均以point為單位(measured in points):
- 1 point = 1 pixel(Point Per Inch=Pixel Per Inch=PPI)
后來在iPhone4中素标,同樣大谐剖(3.5 inch)的屏幕采用了Retina顯示技術,橫头遭、縱向方向像素密度都被放大到2倍寓免,像素分辨率提高到(320x2)x(480x2)= 960x640(PPI=326), 顯像分辨率提升至iPhone3GS的4倍(1個Point被渲染成1個2x2的像素矩陣)计维。
但是對于開發(fā)者來說袜香,iOS繪制圖形的API依然沿襲point(pt,注意區(qū)分印刷行業(yè)的“磅”)為單位鲫惶。在同樣的邏輯坐標系下(320x480):
1 point = scale*pixel(在iPhone4~6中蜈首,縮放因子scale=2;在iPhone6+中欠母,縮放因子scale=3)
可以理解為:
scale=絕對長度比(point/pixel)= 單位長度內(nèi)的數(shù)量比(pixel/point)
- 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 using **points**. For standard-resolution displays, the scale factor is 1.0 and one point equals one pixel. For Retina displays, the scale factor is 2.0 and one point is represented by four pixels.
為了自動適應分辨率欢策,系統(tǒng)會根據(jù)設備實際分辨率,自動給UIScreen.scale賦值赏淌,該屬性對開發(fā)者只讀猬腰。
- UIScreen.nativeScale
iOS8新增了nativeScale屬性:
// Native scale factor of the physical screen
@property(nonatomic,readonly) CGFloat ***nativeScale ***NS_AVAILABLE_IOS(8_0);
以下是iPhone6+下的輸出,初步看來nativeScale與scale沒有太大區(qū)別:
(lldb)p (CGFloat)[[UIScreen mainScreen] scale] (CGFloat) $1 = 3 (lldb) p(CGFloat)[[UIScreen mainScreen] nativeScale] (CGFloat) $2 = 3
- 機型判別
在同樣的邏輯分辨率下猜敢,可以通過scale參數(shù)識別是iPhone3GS還是iPhone4(s)。以下基于nativeScale參數(shù),定義了探測機型是否為iPhone6+的宏:
// not UIUserInterfaceIdiomPad
#define **IS_IPHONE** (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
// detect iPhone6 Plus based on its native scale
#define **IS_IPHONE_6PLUS** (IS_IPHONE && [[UIScreenmainScreen] nativeScale] == 3.0f)
那么缩擂,同樣的分辨率和scale鼠冕,如何區(qū)分機型iPhone4與4s、iPhone5與5s呢胯盯?通過`[[UIDevice currentDevice] model]只能判別iPhone懈费、iPad、iPod大類博脑,要判斷iPhone具體機型型號憎乙,則需要通過sysctlbyname("hw.machine")獲取詳細的設備參數(shù)信息予以甄別。
7. Resolutions &Rendering
8.@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 two physical pixels on thedisplay in each dimension, horizontal and vertical.*
iPhone3GS時代叉趣,我們?yōu)橐粋€應用提供圖標(或按鈕提供貼圖)泞边,只需要icon.png。針對現(xiàn)在的iPhone4~6 Retina顯示屏疗杉,需要制作額外的@2x高分辨率版本阵谚。
例如在iPhone3GS中,scale=1烟具,用的圖標是50x50pixel(logicalimage.size=50x50point)梢什;在iPhone4~6中,scale=2朝聋,則需要100×100pixel(logical image.size=50x50point嗡午,乘以image.scale=dimensions in pixels),并且命名為icon@2x.png冀痕。
如果APP要同時兼容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+在實際渲染時金度,downsampling/1.15(1242x2208->1080x1920)应媚,準確的講,應該是@2.46x猜极。蘋果為方便開發(fā)者用的是@3x的素材中姜,然后再縮放到@2.46x上。
參考:《為什么iPhone 6 Plus要將3x渲染的2208x1242分辨率縮小到1080p屏幕上跟伏?》《詳解 iPhone 6 Plus 的奇葩分辨率》《iPhone 6 Plus屏幕分辨率》
如果APP要同時兼容iPhone3GS~iPhone6+丢胚,則需要提供icon.png/icon@2x.png/icon@3x.png三種分辨率的圖片。
需要注意的是受扳,iOS APP圖標的尺寸和命名都需要遵守相關規(guī)范携龟。
** (3)高倍圖文件命名**
對于iPhone3、4/5/6勘高、6+三類機型峡蟋,需要按分辨率提供相應的高倍圖并且文件名添加相應后綴坟桅,否則會拉伸(stretchable/resizable)失真(模糊或邊角出現(xiàn)鋸齒)。 以下基于UIImage的兩類初始化API簡介高倍圖的適配: <1>+imageNamed:該方法使用系統(tǒng)緩存蕊蝗,適合表視圖重復加載圖像的情形仅乓。同時該API根據(jù)UIScreen的scale,自動查找包含對應高倍圖后綴名(@2x)的文件蓬戚,如果找到二倍圖夸楣,則image.scale=2.0,對應邏輯size大小以point度量(pixel度量的一半)子漩;如果沒找到設置默認image.scale=1.0豫喧,對應邏輯size大小同像素尺寸。因此幢泼,使用該方法紧显,無需特意指定高倍圖后綴。在實際運行時旭绒,系統(tǒng)如果發(fā)現(xiàn)當前設備是Retina屏(scale=2)鸟妙,會自動尋找"@2x.png"命名格式的圖片,加載針對Retina屏的圖片素材挥吵,否則會失真重父。 <2>+imageWithContentsOfFile/+imageWithData:(scale:)/-initWithContentsOfFile:/-initWithData*:(scale:) 這組方法創(chuàng)建的UIImage對象沒有使用系統(tǒng)緩存,并且指定文件名必須包含明確的高倍圖后綴忽匈。如果文件名包含@2x后綴房午,則image.scale=2.0;否則默認image.scale=1.0丹允,同樣對于Retina屏將會失真郭厌。 <3>目前,適配iPhone6+時雕蔽,除了一些鋪滿全屏的大圖(LogoIcon折柠、LaunchImage)需提供三倍圖,其他的小圖仍可沿用原有的二倍圖自適應拉伸批狐。
9.Screen Bounds **& **Application Frame
- UIScreen.bounds
// Bounds of entire screen in points(本地坐標系扇售,起點為[0,0])
@property(nonatomic,readonly) CGRect ***bounds***;
//考慮轉屏的影響,按照實際屏幕方向(UIDeviceOrientation)的寬高
#define ***SCREEN_WIDTH ***([UIScreenmainScreen].bounds.size.width)
#define ***SCREEN_HEIGHT ***([UIScreenmainScreen].bounds.size.height)
#define ***STATUSBAR_HEIGHT ***([UIApplicationsharedApplication].statusBarFrame.size.height)
//不考慮轉屏的影響嚣艇,只取豎屏(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)
- UIScreen.nativeBounds**
iOS8新增了nativeBounds屬性承冰,輸出豎屏像素級分辨率:
// The bounding rectangle of the physical screen,measured in ***pixels***. (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) CGRect ***nativeBounds*** NS_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}}
- UIScreen.applicationFrame
// Frame of application screen area in points (i.e.entire screen **minus** status bar if visible)
// bounds除去系統(tǒng)狀態(tài)欄
@property(nonatomic,readonly) CGRect ***applicationFrame***;
// APPFRAME_WIDTH=SCREEN_WIDTH
#define ***APPFRAME_WIDTH****** ***([UIScreen mainScreen].applicationFrame.size.width)
// APPFRAME_HEIGHT=SCREEN_HEIGHT-STATUSBAR_HEIGHT
//注意:橫屏(UIDeviceOrientationLandscape)時,**iOS8默認隱藏狀態(tài)欄**食零,此時APPFRAME_HEIGHT=SCREEN_HEIGHT
#define ***APPFRAME_HEIGHT ***([UIScreen mainScreen].applicationFrame.size.height)
- bounds和frame的區(qū)別**
下圖展示了bounds和frame的區(qū)別:
10.機型尺寸適配(Screen Scale Adaption**)
從iPhone3GS/iPhone4(s)過渡到iPhone5(s)時困乒,在邏輯上寬度不變高度稍高,之前舊的素材和布局通過AutoresizingFlexible簡單適配即可運行得很好贰谣,但由于高寬比增大娜搂,上下兩端出現(xiàn)黑粗邊(典型如LaunchImage)迁霎。從分辨率的角度來看,除了需要提供LaunchImage這種滿屏圖百宇,其他基本沿用二倍圖(@2x)欧引;從屏幕尺寸角度來看,需要對縱向排版略加調整恳谎。
從iPhone5(s)發(fā)展到iPhone6(+),由于高寬比保持不變憋肖,iOS對圖標因痛、圖片、字體進行等比放大自適應岸更,清晰度會有所降低鸵膏。同時,絕對坐標布局會導致在大屏下出現(xiàn)偏左偏上的問題怎炊。從分辨率的角度來看谭企,iPhone6沿用二倍圖(@2x),但需為iPhone6+提供更高的三倍圖(@3x)评肆;從屏幕尺寸角度來看债查,需要重新對UI元素尺寸和布局進行適配,以期視覺協(xié)調瓜挽。
- 按寬度適配
我們先來看一下iPhone4~6(+)的屏幕高寬比:
iPhone4(s):分辨率960640盹廷,高寬比1.5* iPhone5(s):分辨率1136640,高寬比1.775* iPhone6:分辨率1334750久橙,高寬比1.779* iPhone6+:分辨率19201080俄占,高寬比1.778* 可粗略認為iPhone5(s)、6(+)的高寬比是一致的(16:9)淆衷,即可以等比例縮放缸榄。因此可以按寬度適配: fitScreenWidth= width*(SCREEN_WIDTH/320) 這樣,共有iPhone3/4/5祝拯、6甚带、6+三組寬度,在iPhone6鹿驼、6+下將按比例橫向放大欲低。 - 按高度適配
在同樣的寬度下,iPhone4(s)的屏高比iPhone5(s)低畜晰,若縱向排版緊張砾莱,可以iPhone5(s)為基準,按高度適配: fitScreenHeight= height*(SCREEN_HEIGHT/568) 共有iPhone3/4凄鼻、5腊瑟、6聚假、6+四組高度,在iPhone3/4下將按比例縱向縮小闰非,在iPhone6膘格、6+下將按比例縱向放大。
這里需要注意iPhone/iOS雙環(huán)上網(wǎng)的熱點欄對縱向布局的影響:iPhone作為個人熱點且有連接時财松,系統(tǒng)狀態(tài)欄下面會多一行熱點連接提示欄"Personal Hotspot: * Connection"瘪贱,縱向會下壓20pt,[UIApplication sharedApplication].statusBarFrame高度變?yōu)?0pt辆毡;當所有連接都斷開時菜秦,熱點欄消失间雀,縱向高度恢復正常為20pt翠储。詳情可參考《iPhone/iOS開啟個人熱點的縱向適配小結》衙熔。 - 按字體適配
另外宙项,iPhone的【設置】【通用】【輔助功能】中可以設置調節(jié)【更大字體】拼弃,APP也可以按字號適配: 例如適配表視圖(UITableView:UIScrollView)吮廉,無法左右滑動讽营,因此無論字號縮放比例多大亿乳,橫向都不應超過SCREEN_WIDTH鲫售。注意限定控件元素內(nèi)容區(qū)域寬度以及間距共螺,并設置適當?shù)腖ineBreakMode。表視圖支持上下滑動龟虎,因此縱向上的表格行高和內(nèi)容區(qū)域高度可按字號縮放璃谨。
對于縱向也不支持滑動的視圖,在屏幕可見視區(qū)內(nèi)排版時鲤妥,最好不要隨字號縮放佳吞,否則可能超出既定寬高。
11. UI相對布局
考慮到iPhone機型的多樣性棉安,不可能針對iPhone4(s)底扳、5(s)、6贡耽、6+四種屏幕尺寸出四套視覺交互稿衷模,也不要基于某一機型從上往下、從左往右給絕對標注蒲赂,而應該關注subView在superView中的相對位置(EdgeInsets/Frame/Center)以及siblingView之間的偏移(Offset)阱冶,盡量給出適合Autolayout的相對布局比例(理想情況是只給百分比)。假如交互按照iPhone5(s)下絕對標注滥嘴,則在iPhone4(s)上可能擠出屏幕底部木蹬,而在iPhone6(+)上則可能橫向偏左或縱向偏上。
開發(fā)人員基于與屏幕邊緣的間距(Margin/EdgeInsets)若皱,定位邊緣處的控件(釘釘子)作為參照镊叁,然后基于控件尺寸和間隙進行相對計算排版尘颓。這樣,若釘子移動晦譬,相鄰控件將順向偏移疤苹,不會因為局部調整而出現(xiàn)凌亂。
我們截取 iPhone5s QQ 文件助手列表中的文件cell敛腌,使用 Sketch Measure 對其進行測量標注卧土。
打開[截圖.png]文件,由于不包含 Sketch 圖元對象像樊,無法進行 measure 標注(提示:請在畫板中使用該功能)夸溶。因此,第一步需要對要相對標注的各個UI元素進行對象化凶硅。依次 Insert Artboard 創(chuàng)建圖層 frame、thumbnail扫皱、title足绅、detail、source韩脑、button氢妈。
選中整個cell的frame(bounds),進行 Measure size:width=640px(SCREEN_WIDTH)段多,height=168px首量。默認橫向尺寸和縱向參考線都居中導致標注重疊,將縱向參考線右移至合適位置进苍;也可選中WIDTH標注圖層中的text和label元素加缘,在不移動參考線的前提下,利用鼠標局部移動標注字面量觉啊。
(1)縮略圖標
在左側邊欄layer list中選中frame拣宏,再command選中文件類型縮略圖對象thumbnail,進行 Measure spacing杠人,丈量縮略圖左側相對frame的間距為24px勋乾。
選中文件類型縮略圖對象thumbnail,進行 measure size嗡善,由于正方形等寬為112px*112px辑莫,故橫縱標注重疊無影響。thumbnail在frame中縱向整體居中罩引,因此上下邊距計算均攤即可各吨,無需再給定標注。
(2)傳輸按鈕
對 button 和 frame 進行 Measure spacing蜒程,丈量按鈕右側相對frame的間距為24px绅你。
選中按鈕button進行 measure size伺帘,其寬高為144px*60px。橫縱標注重疊影響視覺忌锯,將縱向參考線右移至合適位置伪嫁。
button在frame中縱向整體居中,因此上下邊距計算均攤即可偶垮,無需再給定標注张咳。
(3)文件信息
對thumbnail和detail(title、source等寬且左對齊)進行 Measure spacing似舵,丈量圖標右側相對detail的間距為20px脚猾;對button和detail進行 Measure spacing,丈量按鈕左側相對detail間距為20px砚哗。這樣龙助,左側釘住thumbnail,右側釘住button蛛芥,中間信息部分的寬度無需給定提鸟,計算被動約束的橫向余量即可。具體編程時仅淑,調用 sizeWithFont/boundingRectWithSize 可動態(tài)計算每行 label 的自然寬度称勋,一般title都會超過約束寬度,因此需設置 lineBreakMode指定Wrapping省略或Truncating截斷格式涯竟。
選中文件信息第1行標題title和第2行詳情detail赡鲜,進行 Measure spacing,測量縱向相對間距10px庐船;第2行詳情detail和第3行來源的縱向相對間距也為10px银酬。一般 UILabel 的文本在給定字體下的縱向自然顯示無約束,調用 sizeWithFont/boundingRectWithSize 可動態(tài)計算每行 label 的自然高度筐钟,title的上間距和source的底間距無需給定捡硅,通過計算縱向余量均攤即可。
可簡單的基于屏寬橫縱比例進行scale縮放盗棵,將以上測量出的標注應用到iPhone6(+)大屏下壮韭,當然交互設計工程師最好還是針對特定機型都給定適配標注。蘋果在WWDC2012 iOS6中已提出了Auto Layout的概念纹因,即使用約束條件來定義視圖的位置和尺寸喷屋,以適應不同尺寸和分辨率的屏幕。
12. DEPRECATED API適配
最后瞭恰,除了對屏幕尺寸和分辨率進行適配之外屯曹,還需對iOS SDK中相關的DEPRECATED API進行適配。典型的如:
(1)UILineBreakMode->NSLineBreakMode
(2)UITextAlignment->NSTextAlignment
(3)sizeWithFont:->boundingRectWithSize:
(4)stretchableImageWithLeftCapWidth:topCapHeight:->resizableImageWithCapInsets:
(5)...
參考:
《iOS設備的屏幕尺寸、分辨率及其屏幕邊長比例》
《iOS判斷設備屏幕尺寸恶耽、分辨率》
《iOS8中的UIScreen》
《Detecting iPhone 6/6+ screen sizes in point values》
《iOS8已出密任,@3x圖讓我們何去何從?》
《在Xcode 6中用矢量化PDF(vectorized PDF)來支持各種尺寸的iPhone》
《iOS8適配須知》《適配iOS8備忘錄》
《iOS界面適配(一)(二)(三)》
《iPhone 6/6+適配心得》
《iOS8/Xcode6/iPhone6(+)適配》
《APP適配iOS8偷俭,iPhone6(+)截圖簡要說明》
《按比例快速兼容適配iPhone6/6 Plus》
《iOS的APP如何適應iPhone 5s/6/6+三種屏幕的尺寸浪讳?》