iOS分辨率的那些事兒

 

都說作iOS開發比Android省心，那麼iOS是如何作到這一點的呢？咱們今天就來分析一下，但願對作iOS的界面設計的同窗有點幫助。

 

1 iOS設備的分辨率

iOS設備，目前最主要的有3種（Apple TV等不在此討論），按分辨率分爲兩類

iPhone/iPod Touch

普屏分辨率    320像素 x 480像素

Retina分辨率 640像素 x 960像素

iPad,iPad2/New iPad

普屏        768像素 x 1024像素

Retina屏  1536像素 x 2048像素

 

2  iOS設計時用的點與分辨率的關係

儘管有上面列出的4種分辨率狀況，不過細心的人會發現，對於Retina屏的分辨率始終保持爲普屏的2倍，這對於iOS的設計仍是開發的時候提供的莫大的方便，天然能夠想到對於界面設計而言，只須要設計一套，而後進行等比例放大縮小便可。實際進行設計與開發的時候，也確實是這樣，Apple爲了防止在交流過程當中（尤爲對於編程實現）分辨率對思惟的迷惑，統一使用點（Point）對界面元素的大小進行描述，例如： 

iPhone/iPod Touch

界面描述    320點 x 480點

iPhone/iPad

界面描述    768點 x 1024點

換算關係 

普屏       1點 = 1像素 

Retina屏 1點 = 2像素 

這樣，無論咱們是在爲普屏仍是Retina屏進行設計與開發，咱們均可以清楚地，而且統一地使用點對界面元素的大小進行描述了。

 

3  iOS界面圖片的命名

如今咱們可以用統一的語言描述兩種屏幕的界面元素的大小，可是咱們如何針對不一樣屏幕設置不一樣分辨率的圖片素材呢？難道說開發的時候咱們要在每個圖片加載的地方進行，添加判斷當前設備是不是Retina屏的語句，而後加載對應的圖片嗎？固然能夠這樣作，可是iOS有一套更簡便的方法進行自動加載，即經過規範的文件名命名。例以下面這條加載圖片的語句：

[UIImage imageNamed:@"pic.png"]] 

在實際運行時，若是發現當前的設備是Retina屏，會自動尋找圖片"pic@2x.png" ，自動加載針對Retina屏的圖片素材，是否是很方便呢？

因此，咱們在製做iOS設備時，能夠仿照下面這樣，對圖片文件進行分類，對於640x960文件夾裏的圖片，文件命名添加"@2x"便可。

 

4  iOS應用經常使用圖標的命名規範

能夠參考下面兩個文檔：

Apple對此問題的Q&A 

Apple的官方說明文檔

請務必按照文檔中描述的規範進行圖標的命名！！

 

PS：一些額外的圖標參考

a 圖標會自動添加高亮效果，若是不須要，能夠在plist中明確指定UIPrerenderedIcon的鍵值去掉

b 57像素的普屏的iPhone圖標，圖標圓角的半徑爲10像素

c 114像素Retina屏的iPhone圖標，圖標圓角的半徑爲20像素

d 512像素的用於iTunes/App Store的圖標，在實際顯示是會被縮放到175像素進行顯示（但提交是不能夠提交175像素）

e 72像素的普屏iPad圖標，圖標圓角的半徑爲13像素

f 144像素Retina屏iPad圖標，圖標圓角的半徑爲26像素

g 50像素iPad的Spotlight搜索圖標的最終視覺大小是48像素，緣由是iOS會對圖標的每一個邊去掉1個像素，添加陰影效果

h 100像素Retina屏的Spotlight搜索圖標的最終視覺大小是96像素，緣由同上，此次是每邊減2個像素