寫APP那件事・圖片與文字的小秘密(UILabel, UIText Field, UIImageView)

圖文並茂的大前提,你要筆記常用的小功能

Daisy
彼得潘的 Swift iOS / Flutter App 開發教室
5 min readJul 21, 2020

--

標籤、文字框、圖片畫面

1.UILabel

1-1.Line Breaks(需調整line的數字,才能分行)

Clip:於邊界處直接切除文字,如下圖:文字會被切割
Character Wrap:以字母為單位,邊界處字母完整,但單字不連續
Word Wrap:以單字為單位,若邊界處單字過長,則會移至下一行開始
Truncate Head:以整段為單位,省略開頭…
Truncate Middle:以整段為單位,省略中間…
Truncate Tail:以整段為單位,省略後段…

1-2.Autoshrink

Fixed Font Size:字型尺寸固定,若邊界過窄,文字被切到(不管邊界,只做自己)
Minimum Font Sc
ale :字型縮放最小比,調整範圍0–1間,因應邊界寬窄而縮小化字體(在乎邊界,努力委屈自己)
Minimum Font Size:字型有自身的最小尺寸,根據邊界寬窄,有一定可改變的幅度(尊重邊界,也有自己的堅持)

1-3.Shadow
文字陰影,色彩自訂,移動範圍亦可調整

範例圖示

2.UIText Field

2-1. Placeholder
文字框空白,未輸入文字時,內存的字符(可自行設定)

提醒使用者,可輸入什麼內容

2–2.Border Style
四種模組,可挑選

從無、邊框、背景皆能選擇

2–3.Clear Button(清除鍵)
四種模組(從不出現、編輯時才出現、無編輯時才出現、一直出現)

2–4.Min Font Size & Adjust to Fit
字型有自己原先大小(假設為Font=30),可設定字型最小值(假設為20),且要勾選Adjust to Fit(有勾才會調降),那麼隨著30逐漸調降時,字型會縮小,未滿20時,大小就為固定(無論Font多小)

同樣有設定最小值,上(無勾選)下(有勾選)

2–5. Content Type(預期的文字內容)
如:姓名、工作職稱、公司名稱….等。

2–6.Capitalization(大寫)
如:無、單詞開頭、句子開頭、每個字母。

2–7.Keyboard Type(鍵盤樣式)
如:點選文字框,怎麼決定下方跳出鍵盤的樣式呢?選擇keyboard Type將會有高達12種選項,試試玩玩看吧!

2–8.Keyboard Look(鍵盤外觀)
雖說有三種選擇,但內設(Default)的外觀是Light,實務需調整的時間點,應是設定變成夜間模式時,鍵盤外觀也需調整成Dark。

2–9. Return Key(返回鍵)
無論你輸入了什麼,最後都由右下角決定執行的動作,共有12種選項可選擇。

左欄位(選go); 右下角(出現對應的go)

2–10.Auto-enable Return Key(2–9 的附加選項)
為何上方的go是透明的選項呢?因為文字欄中並無輸入任何文字
(這就是Auto-enable Return Key的附加貼心服務呦,為了確保使用者有輸入內容)

3.UIImageView

從左欄開始,上到下分別是UIImageView(原始長寬畫面)
常用選項
-Scale To Fill(圖案全展開於畫面內,圖案比例不固定)
-Aspect Fit(圖案縮放於畫面內,圖案比例固定)
-Aspect Fill(圖案全展開於畫面內,圖案比例固定)
其他則依照選項的內容而呈現圖片的部分,如:Center(呈現中央),Top,Bottom,Left,Right,Top Left,Top Right,Bottom Left,Bottom Right。

Scale To Fill、Aspect Fit、Aspect Fill、
Centerl、Topl、Bottoml、eftl、Rightl、Top Left

打完收工,理解畫面中的每一個小功能,好體現『魔鬼就在細節中』這句話,真的好多眉角要知道。

--

--