iOS開發之尺寸(二)：仿寫App截圖獲取控制元件大小位置

我們在開發過程中經常會遇到這樣的需求：
產品經理拿來一個App的介面過來說我們的App也要做成這樣，然後你腦海中是不是有千萬只草泥馬在奔騰，那這個時候怎麼辦呢？有人會說UI，但如果沒有UI呢，你怎麼去知道這個尺寸呢？

那麼今天我就跟大家講講如何去知道別人App中各個控制元件或者檢視的佈局位置大小等。

步驟

第一步就是截圖

截圖分為真機截圖和模擬器截圖，如果要用是仿寫別人的App的話那肯定是真機截圖，但是如果是大家想多學一個姿勢的話那可以瞭解一下模擬器截圖：

1>真機截圖:
開啟模擬器,然後->hardware->device->manage devices->選中自己的手機->Take Screenshot,就可截圖在桌面

Snip20170707_220.png

Snip20170707_221.png

截到的手機圖片如下：

Screen Shot 2017-07-07 at 下午3.14.21.png

2>模擬器截圖
模擬器顯示在視窗最前,按住command + s:截圖出來的是畫素點:"我們程式程式碼算的是點,UI算的是畫素點"
->其中如果是iPhone5/iPhone5s(320 * 568)的截圖出來的大小是640 * 1136 (@2x)
->其中如果是iPhone6/iPhone6s(375 * 667)的截圖出來的大小是750 * 1334 (@2x)
->其中如果是iphoneSE(320 * 568)的截圖出來的大小是640 * 1136 (@2x)
->其中如果是iPhone7(375 * 667)的截圖出來的大小是750 * 1334 (@2x)
->其中如果是iPhone7P(414 * 736)的截圖出來的大小是1242 * 2208 (@3x)
->其中如果是iPhone6P/iPhone6sP(414 * 736)的截圖出來的大小是1242 * 2208 (@3x)

截完圖 之後大家可以在自己的MAC上雙擊開啟這張圖片，一般都是用預覽工具開啟的，那麼這個預覽工具是可以檢視圖片的大小的還可以改變圖片的大小：

Snip20170707_223.png

點選調整大小之後我們一般要把照片的畫素調成點的大小，這樣的話一會兒通過工具算出來的點的距離才是直接能使用的，要不然還要換算

Snip20170707_224.png

Snip20170707_225.png

PS: 我們一般是按照點來修改的

第二步使用工具量點

那麼我們將圖片調整成375667(這是因為我的手機是6系列的，如果是7系列的那麼就是414736了，請參見iOS開發之尺寸(一)：各種機型尺寸附表)

工具截圖：

MarkMan.jpg

下載軟體的渠道：MAC系統使用之推薦軟體下載網站

當然下載並安裝完成之後，首次使用的時候會彈出說來自身份不明的第三方之後的，不讓開啟，那麼這個你到你的偏好設定安全與隱私修改下許可權就可以了：

Snip20170707_227.png

Snip20170707_226.png

修改完許可權之後，再次開啟，發現：

Snip20170707_228.png

這是個依賴軟體，我們把這個下載下來就完事兒，這個在我上面提到的網站上也都沒有資源下載，我直接百度下載了:

Snip20170707_232.png

下載完成之後安裝，然後再次開啟MarkMan，然後如下：

Snip20170707_234.png

然後我們把對應的截圖圖片點選按住往裡面託就行了:

Snip20170707_237.png

PS: 這個去色器可以把十六進位制直接顯示在介面上

iOS開發之尺寸(一)：各種機型尺寸

以上！！！

逗比.gif