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

weixin_34146805發表於2017-07-07

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

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

步驟

第一步就是截圖

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

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

5293487-aca3f7f6fae7c90e.png
Snip20170707_220.png
5293487-b440f7c04b7a7b75.png
Snip20170707_221.png

截到的手機圖片如下:

5293487-ee06b343d3e8a47a.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上雙擊開啟這張圖片,一般都是用預覽工具開啟的,那麼這個預覽工具是可以檢視圖片的大小的還可以改變圖片的大小:

5293487-d52fe1c1853e6f80.png
Snip20170707_223.png

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

5293487-cc3a6319d0258899.png
Snip20170707_224.png
5293487-90662a13805e536b.png
Snip20170707_225.png

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

第二步使用工具量點

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

工具截圖:

5293487-d6b6bec41716a510.jpg
MarkMan.jpg

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

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

5293487-44d15479b028a5ef.png
Snip20170707_227.png
5293487-33575c28bd250954.png
Snip20170707_226.png

修改完許可權之後,再次開啟,發現:

5293487-265f7f5afd910a17.png
Snip20170707_228.png

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

5293487-18bc51de5c0411c4.png
Snip20170707_232.png

下載完成之後安裝,然後再次開啟MarkMan,然後如下:

5293487-a34ee8dc38a87ae5.png
Snip20170707_234.png

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

5293487-02426ac54772fc59.png
Snip20170707_237.png

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

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

以上!!!

5293487-98bc9d6fbe76489a.gif
逗比.gif

相關文章