iOS Task#25 | Sketch & Zeplin — Imitate an App
課程結束了，可以有時間慢慢的一點一點把趕不上的內容補起來，邊學邊複習，剛好趁這時候，穿插一個之前沒做的作業吧。
要模仿一個現成的 App，為了不花太多時間在模仿上，直接選用 Peter 教學中的 Health App 做練習。
Pre-Processing
Download Sketch App
Find GUI
UI Kit Sketch Resource
以下 UI Kit 的網站中也可尋找適合的素材取用。
Download Zeplin App
Export the Images
- 下載後，用 Sketch App 打開下載好的 GUI 檔，並找到要模仿的畫面 — Health
- 將 Health App 畫面加到 Zeplin 專案中
先在 Zeplin 建立好專案
- 利用 Zeplin 將圖片加到 Assets
由於在 Sketch 並非把圖片都預設為可輸出的狀態，所以要先選擇圖片並修改設定值
選擇好腳踏車的圖片後，按下右邊最底下 Make Exportable，讓圖片可輸出
把所有需要輸出的圖片都設定完成後，就可以輸出到 Zeplin 了
來到 Zeplin，選好要輸出的圖片，右邊可以先改好圖片的名稱，選擇 PNG 按下右側的下載圖示，儲存到要輸出的專案 Assets 資料夾，選擇 Export 輸出
一次輸出畫面所有圖片
點一下畫面以外的空白處，打開右下角的 Assets 清單
Download all assets，在選擇右邊的下載圖是把 PNG 圖片都下載下來
Export the Icon/Symbol
看完剛剛輸出好的圖片，會發現有些小圖示沒有出現在 Assets 裡。
這時候可以回到Sketch，找找這些圖示是否為 Symbol/Icon類型的圖示。
是的話，按下 Icon2 旁邊的小箭頭
然後找到要輸出的 Icon ➔ Make Exportable
Set the Color Set
- 在 Assets.xcassets 新增 App 使用的顏色
先在 Zeplin 中找到要取得的顏色色塊，點選後右側 Colors 會顯示色號
回到 Storyboard，在空白處按右鍵 ➔ New Color Set
Any Appearance — 在 iPhone 上任何模式顯示的顏色
Dark — 在 iPhone 上 Dark Mode 顯示的顏色
➔ 如果不需要 Dark Mode，可在右側 Attribute Inspector 的 Appearance 改選成 None
左側可以先設定好顏色的名稱
右側 Attribute Inspector 在 Input Method 將輸入色好的方法設定成 Floating Point 後，將底下的 RGB 色號換算 Floating 填入。
Input Method
- 8-bit Hexadecimal : 16 進位
用 6 碼 Hex#色號填入 - 8-bit (0–255) : 10 進位
用 RGB 色號填入 - Floating point (0.0–1.0) : 浮點數
用 RGB 色號換算成浮點數後填入
就會看到相對應的顏色顯示出來囉！
回到 Storyboard 看看，就會發現色盤裡面出現了剛剛設定的顏色
取完所有顏色和圖片之後，開始安排畫面的架構吧！
Main.Storyboard 製作畫面
Zeplin 給了整個架構、座標、尺寸的參考，可以一邊對照
先把 Tab bar controller/Navigation Controller 架構拉好
Tab Bar Item/Bar Item
Navigation Bar
- Prefer Large Titles
- Set the Title of Navigation bar and bar button item
- Table ➔ Static Cells
設定放置四格圖片的 Table View Header 的位置
先回到 Zeplin 確認 Navigation 大標題原尺寸和座標
➔ W: 375, H: 116 / x: 0, y: 0
以及下面表格的第一欄尺寸及座標
➔ W: 375, H: 44 / x: 0, y: 470
底下的 y 軸座標 470 減掉 Navigation Bar 的 y 軸高度 116 = 354，得出中間需要 375 * 354 的空間放四格圖片
接下來回到 Storyboard，從 Library 新增一個 View 後拖曳到 Table View 和 Table View Section 之間，並把 View 尺寸調整為 375 * 354 作為等等要用來放四格圖片用的空間
製作四格圖片，放置於剛剛建立的 View
建立一個 Button 物件，一個 Image View，參照 Zeplin 相對應的座標和尺寸來設定位置
在 Button 的物件設定好背景、字型、大小、顏色、文字位置
- Background : 用前置作業時已經抓好的顏色
- Tint：左上角文字的顏色
- 將按鈕 Title 設定為 Attribute，拿修改文字樣式 (數據參照 Zeplin)
- Alignment : 文字貼齊格線設定為左上角
- Title Inset：設定文字與方格之間的間距 (數據參照 Zeplin)
- 設定 Button 圓角 (數據參照 Zeplin)
- 最後在 UIImageView 插入圖片
製作 Cell 內容
- 確認 Cell 的尺寸及位置
在 Cell 中用 Library 加入一個 Image View & 一個 Label，等等放置內容用
再將 Table View Cell 的 Accessory 設定為 Disclosure Indicator
再到 Zeplin 去參照尺寸座標，把 Image View 和 Label 定位好
- 調整分隔線間距
點選 Zeplin 的分隔線，會顯現出間距
再回到 Storyboard ，在 Table View 底下將 Separator Inset 調整為 Custom，並設定左邊間距
總寬度是 375，減掉右邊 305，左邊圖示長度為 70
這時候完成了，但出現了一個問題…
我的四格圖片底下多了一塊空白，讓最下面的清單被切掉了。
求救彼得後，參考了這篇做 Header/Footer 的調整：
yeah! 完成
中間研究的時候學了這個，所以也記錄一下：
用 Preview 來抓距離和座標的方式
Step 1. Screenshot the view of the app
先 ScreenShot 了幾個 Spotify 首頁的畫面，並 Airdrop 丟到 Mac 上。(用 Airdrop 才不會壓縮到圖檔)
Step 2. Open ScreenShot Photo by “Preview”
截圖可以看得到各個元件的位置，但要怎麼量測尺寸和距離呢？
取得尺寸大小：
這時候可以用上 Mac 的 Preview (預覽程式)，選取後會自動測量物件的大小。例如 Liked Songs 這幾個長方形框式 508 * 171。
取得 x, y 座標：
選取欲知座標的點，往左上超出圖片最上緣方向拉，就會看到 Liked Songs 左上角點的 X, Y 座標 (50, 369)
因為不同 iPhone 機型有不同的解析度，所以要將座標再除以 2 來對應@2x 的機型，除以 3 來對應@3x的機型。
預防計算錯誤或是忘記計算的小技巧
➔ 先用 Preview 將圖片的大小改成 1x 大小。
現在是使用 11 Pro，所以將尺寸調整為 375 * 812 的寬高。
就可以看到正確的座標。
參考教學：
