#11 模仿一頁精美的 App 畫面 (含各種研究,作業2:UILabel、UITextField、用 view 拼湊漂亮的圖案、 scroll view、UIImageView 的 Content Mode、研究App Store上App的每個畫面,分析用到哪些元件,分析優缺點 (最好挑至少2個App研究))

總共7大項,文長慎入

1. 模仿一頁精美的 App 畫面

作業目的: 學習使用 storyboard 設計 App 畫面。

使用view、ImageView、TextFeild等拼湊出一個騙人的畫面

Step1. 網路上下載素材

Step2. 使用Sketch(須先下載安裝到電腦)打開檔案

Step3. 選好喜歡的畫面,開始輸出,要注意不能直接comm+A全選喔!這樣只會存到一張完整的APP畫面,必須要從左邊的物件列選取,有一個小技巧可以全部一起輸出,就是把他們檔名改不一樣,否則最後同個類別只會存到一張

確認需要的東西都輸出了

Step4. 開一個空白專案,將剛剛輸出的物件全部放到Assets.xcassets裡面

Step5. 開始排列組合,設定按鈕

完成

2. 研究顯示文字的 UILabel

Line Break:總共有六種

Autoshrink

Fixed Font Size:上面字型設定,如果label寬度小於文字長度時,文字大小會固定,不自動縮放。

Minimum Font Scale:調整Scale Factor,設定最小收縮比例,如果Label寬度小於文字長度時,文字進行收縮,收縮超過比例後,停止收縮。

Minimum Font Size:在固定框框內盡可能把文字塞進去的調整。

Shadow (文字的陰影)

調整文字的陰影,還有陰影位移的程度。

3. UITextField研究

Text field

(1) Placeholder:提示輸入文字內容

(2) Border Style:邊界樣式

(3) Clear Button:是否顯示清除的按鈕

(4) Min Font Size & Adjust to Fit:預設格式size的意思

Text Input Traits

(5) Content Type:預設輸入文字內容,可能swift很智慧有很多配套,選就對了

(6) Capitalization:是否大寫

(7) Keyboard Type:跳出的鍵盤類別

(8) Keyboard Look:選擇暗色或是亮色的鍵盤

(9) Return Key:鍵盤的確認鍵,可以選擇其他動作的提示字

(10) Auto-enable Return Key:沒有輸入內容無法按下Return Key的按鈕

(11) Secure Text Entry:不能複製輸入的文字

研究模擬器 Menu 的 I/O> Keyboard > Toggle Software Keyboard 功能。( 快速鍵 cmd + k )

4. 用 view 拼湊漂亮的圖案

目的:熟悉Storyboard的view

首先找到自己喜歡卡通圖(最好線條簡單),或是搜尋“拼豆”

在來到這個網站轉成像素圖

開始拼吧!

Alpha值調一下,讓要組的圖顯示在背景
好療癒,但是非常不整齊XD

5. scroll view

6. UIImageView 的 Content Mode

研究以下 Content Mode 的顯示效果。

Scale To Fill:圖片照著UIImageView的框架大小,圖片比例會很奇怪

Aspect Fit:圖案原本比例,去掉在框框外的部分

Aspect Fill:圖案原本比例,填滿框框後,去掉框框外的部分,圖可能剩中間那一塊

Center:以下幾種都是顯示圖片的中、上、下、左、右等等的不同區塊

Top、Bottom、Left、Right、Top Left、Top Right、Bottom Left、Bottom Right

7. 研究App Store上App的每個畫面,分析用到哪些元件,分析優缺點 (最好挑至少2個App研究)

Foodie

label, button, image view, photo, scroll view, view, slider

Spotify

text field, button, label, image view, view, navigation controller, Tab Bar controller, scroll view, Table view controller,

--

--