從 preview (預覽程式) 查詢 App 畫面裡元件的大小位置

現在開發 iOS App 有很多方便的設計工具，比方 sketch, photoshop，zeplin 等，方便我們查詢畫面裡元件的大小位置。不過有些時候美術給我們的只是一張 App 畫面截圖，難道是要我們用火眼金睛看出裡面元件的大小位置嗎 ?

沒關係，使用 Mac 內建的 preview 開啟圖片後，我們只要拖曳長方形框框，即可大概取得它的大小和位置。如下圖所示，照片的大小為 1125 * 1400。

取得 x, y 座標有個特別的小技巧。請按住想取得座標的位置往左上拖曳，直到超出圖片，此時顯示的數字即為它的 x, y，比方下圖箭頭的座標是 185, 344。

得到數字後，還要記得考慮 App 畫面截圖對應的 iPhone 解析度，比方 iPhone 8 App 的畫面是 2x 解析度，大小是 750 * 1334 pixel，因此取得的數字要再除以 2，才是以 point 為單位的數字。

關於各個 iPhone 機型是 2x 或 3x 的解析度，可參考以下連結。

Screen Sizes

如果因為 2x、3x 解析度的關係，需要自己除 2 或除 3，但又擔心數學不好的話，沒關係，我們也可以用 preview (預覽程式) 將圖片的大小改成 1x 的大小。

1 點選 Tools > Adjust Size 。

將單位選到 pixels，設定 1x 的寬高。