iOS - UIKit | 顯示文字的UILabel

UILabel 是用來顯示文字的元件,在 Apple Developer 官方網站定義如下:

A view that displays one or more lines of informational text.

從字面上可得知,UILabel本身是個 View,本身會繼承 View 的相關屬性,另外可以顯示單行或多行的文字內容。

如果要新增一個 UILabel 元件,可以按下 cmd + shitt + L,輸入Label,可看到左側欄有對應的Label元件:

找到左側對應的Label後,按兩下新增至View,或是點選拖移至View裡面的指定位置,回到 storyboard 即可看到新增的Label。

點選畫面上的Label,右側會出現Label的相關屬性,如下圖:

關於Label的屬性,以下做簡單介紹:

Text

設定所顯示的文字內容。

Color

設定文字的顏色。

Font

設定文字的字體。

Alignment

設定文字的位置,由左至右分別為向左對齊置中向右對齊最後一行對齊預設

Lines

文字可顯示的行數,設定為0代表任意行數。

Behavior

1.Enable : 如果未打勾,文字顏色會呈現灰色,因為此時的 Label 無法對應到預設顏色。

2.Highlighted : 如果有勾選,當元件被長按點選時,會顯示設定的 Highlighted 顏色。

Line Breaks

設定文字斷行,使用時須確認Label元件的空間,確保多行的內容都能被全部顯示,主要有6種斷行類型:

Line Breaks

1.Clip : 依照 Label 的 size 來顯示文字,超過Label長度的文字則會被裁切無法顯示。

Clip

2.Character Wrap : 文字會依照 Label 的 Size 自動換行,英文換行以「英文字母」為單位,所以英文單字會被截斷,中文則不影響。

Character Wrap

3.Word Wrap : 文字會依照 Label 的 Size 自動換行,英文換行以「英文單字」為單位,英文單字不會被截斷。

Word Wrap

4.Truncate Head : 縮減開頭,開頭會變成…

Truncate Head

5.Truncate Middle : 縮減中間,中間會變成…

Truncate Middle

6.Truncate Tail : 縮減結尾,結尾會變成…

Truncate Tail

Autoshrink

設定文字縮放,有3種縮放形式:

Autoshrink

1.Fixed Font Size : 預設值,固定文字 size,不會縮放。

Fixed Font Size

2.Minimum Font Scale : 當字串過長時,會依最小縮放倍數來縮小文字,以顯示全部文字(倍數範圍為0~1)。

Minimum Font Scale

3.Minimum Font Size : 當字串過長時,會依設定的字型大小來縮小文字,以顯示全部文字。

Minimum Font Size

Shadow

設定文字陰影效果,可自行指定陰影的顏色。

Shadow Offset

設定陰影距離,可指定寬度和高度的數值。

  • Width:距離文字的X軸,數字越大越往右移動。
  • Height:距離文字的Y軸,數字越大越往下做移動。
設定灰色陰影,offset為 (5,5)

--

--

Nick Lu
彼得潘的 Swift iOS / Flutter App 開發教室

軟體工程師。擁有牡羊座的熱情,以及工程師的理性。寫作初心者,紀錄每一次的學習。