UIKit架構（1）iOS App開發介紹

標籤：ios   ui   xcode   表徵圖   app   

• App中的UI元素

     650) this.width=650;" src="http://s4.51cto.com/wyfs02/M01/7C/85/wKioL1bSmXWyJrhAAAIV9KFnfqs864.png" title="screenshot.png" width="600" height="319" border="0" hspace="0" vspace="0" style="width:600px;height:319px;" alt="wKioL1bSmXWyJrhAAAIV9KFnfqs864.png" />

     

• 裝置的尺寸

iPhone裝置尺寸：

裝置	解析度	點座標	尺寸	狀態列高度	導覽列高度	標籤欄高度
iPhone 6s Plus & iPhone 6 Plus	1080×1920 px	540x960	5.5	40 px	88 px	98 px
iPhone 6s & 6	750x1334 px	375x667	4.7	40 px	88 px	98 px
iPhone 5 & 5s & 5c	640x1136 px	320x568	4.0	40 px	88 px	98 px
iPhone 4 & 4s	640x960 px	320x480	3.5	40 px	88 px	98 px
iPhone & 3G & 3GS & iPod Touch	320x480 px	320x480	3.5	20 px	44 px	49 px

關於解析度與點座標：

     解析度是指螢幕上的像素陣列

     點座標是在開發過程中使用的座標

     自iPhone4開始，蘋果裝置的螢幕採用retina視網膜屏，原來的一個像素點可以顯示4個像素

     即：解析度的寬高分別為點座標寬高的2倍

iPad裝置尺寸：

裝置	解析度	點座標	尺寸	狀態列高度	導覽列高度	標籤欄高度
iPad Pro	2732x2048 px	1366x1024	12.9	40 px	88 px	98 px
iPad 3 & 4 & 5 & 6 & Air & Air2	2048x1536 px	1024x768	9.7	40 px	88 px	98 px
iPad & 2	1024x768 px	1024x768	9.7	20 px	44 px	49 px
iPad Mini 2 & 3 & 4	2048x1536 px	1024x768	7.9	40 px	88 px	98 px
iPad Mini	1024x768 px	1024x768	7.9	20 px	44 px	49 px

     iPad2及之前、iPad Mini不是retina螢幕

所有裝置的狀態高度均為20，導覽列高度均為44，標籤欄高度均為49     （點座標）

自iOS7.0開始，蘋果開始採用扁平化的風格，在有導覽列的情況下，狀態列的背景由導覽列管理

     即：導覽列的背景高度應為64

• App表徵圖的使用

哪些地方用到App的表徵圖？

     Home Screen  

     App list in iTunes

     Spotlight

     Settings

     

不同的裝置如何顯示同一個表徵圖？

     iOS開發中，通過表徵圖檔案的名字，區分這個表徵圖應當顯示那個裝置上，如：

          icon.png             用在非retina螢幕的裝置上

          [email protected]      用在retina螢幕的裝置上

          [email protected]      用在iPhone 6/6s Plus上

     這一規則同樣適用於任何在iOS開發中使用的圖片資源

如何設定App的表徵圖？

     建立項目後，會包含一個 .xcassets 檔案，該檔案用於管理表徵圖資源

     650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/7C/87/wKiom1bSme_y3VHHAACjVcqncWw692.png" title="screenshot.png" width="300" height="224" border="0" hspace="0" vspace="0" style="width:300px;height:224px;" alt="wKiom1bSme_y3VHHAACjVcqncWw692.png" />

     預設情況下，該檔案會有一個名字為AppIcon的Image Set

     650) this.width=650;" src="http://s5.51cto.com/wyfs02/M01/7C/85/wKioL1bSmorA1VlvAAAc3OjB33g384.png" title="screenshot.png" width="201" height="41" border="0" hspace="0" vspace="0" style="width:201px;height:41px;" alt="wKioL1bSmorA1VlvAAAc3OjB33g384.png" />

     選擇之後，可以將所有的App表徵圖檔案拖到其中，會自動進行適配

     650) this.width=650;" src="http://s1.51cto.com/wyfs02/M00/7C/87/wKiom1bSmjfTt9HPAADiuu-er2w794.png" title="screenshot.png" width="599" height="254" border="0" hspace="0" vspace="0" style="width:599px;height:254px;" alt="wKiom1bSmjfTt9HPAADiuu-er2w794.png" />

     適配的原理是，App表徵圖有統一的命名規範。

附iPhone Only應用的表徵圖說明：     

    650) this.width=650;" src="http://s5.51cto.com/wyfs02/M01/7C/87/wKiom1bSmnOA4xaEAAPtSCfWHmo367.png" title="screenshot.png" width="700" height="398" border="0" hspace="0" vspace="0" style="width:700px;height:398px;" alt="wKiom1bSmnOA4xaEAAPtSCfWHmo367.png" />

附iPad Only應用的表徵圖說明：

     650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/7C/87/wKiom1bSmq7jKxXAAAHIRdmrAsM554.png" title="screenshot.png" width="701" height="285" border="0" hspace="0" vspace="0" style="width:701px;height:285px;" alt="wKiom1bSmq7jKxXAAAHIRdmrAsM554.png" />

附Universal應用的表徵圖說明：

     650) this.width=650;" src="http://s4.51cto.com/wyfs02/M00/7C/85/wKioL1bSm23CEcTJAAJg3ChBXLk466.png" title="screenshot.png" width="700" height="398" border="0" hspace="0" vspace="0" style="width:700px;height:398px;" alt="wKioL1bSm23CEcTJAAJg3ChBXLk466.png" />

本文出自 “teacherAn” 部落格，請務必保留此出處http://annmeng.blog.51cto.com/3321237/1745758

UIKit架構（1）iOS App開發介紹