#130 模仿製作 iOS App 的首頁畫面

範例

• 全家 App

• Uber Eats

實作步驟

• 從 iPhone 螢幕截圖 App 畫面，將圖片用 AirDrop 傳到 Mac。(ps: 不要用 LINE，LINE 會壓縮改變圖片大小。)
• 查詢 App 畫面裡元件的大小位置。

方法1: 利用 preview App

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

方法2: 將圖片上傳到查詢座標顏色的網站 iview

搭配網站查詢圖片的座標畫圖

• 設定元件的顏色。

方法1: 從 preview 打開圖片，利用 Xcode 顏色視窗的選色筆點選圖片的某個區塊，將元件設成跟區塊一樣的顏色。

方法2: 將圖片上傳到查詢座標顏色的網站 iview

搭配網站查詢圖片的座標畫圖

基本版

App 畫面顯示的資料從 storyboard 設定，不寫任何程式。

進階版

App 畫面顯示的資料從網路抓取。

• 搭配程式。
• 使用 auto layout。
• 串接 API，比方搭配 Google Spreadsheet & Imgur API。

#100 利用 Google Spreadsheet 的 JSON & imgur 的圖片開發 iOS App，比方電影 App

作品集

模仿練習-Meowterest

# 5 作業: 模仿一頁精美的 app 畫面

Works 2 — 模仿精美的App：LINE

＃作業 模仿製作麥當勞App 的首頁畫面

#4模仿製作 iOS App Line首頁畫面、scroll view、Tab Bar Controller & Navigation Controller 的相關練習

#21 用 Storyboard 模仿全家 APP 首頁

[201110] 模仿Spotify的首頁頁面

#11 模仿 Uber Eats 首頁畫面（基本版）

#11 Xcode 簡單模仿IMDB App

#17 模仿製作 iOS App 的首頁畫面

[201120] 模仿製作 iOS App 表格頁面

Swift作業05：模仿Foodpanda APP頁面

用三竹股市App-模仿製作 iOS App 的首頁畫面（簡易版）

作業3#130 模仿製作 iOS App 的首頁畫面