#15 研究 Swift 顯示文字的 UILabel

研究這三個項目

• Line Breaks （文字換行）
• Autoshrink （文字縮放）
• Shadow (文字的陰影）

新增 UILabel 元件

Label 預設只能顯示一行文字

首先了解顯示多行文字的條件：

• 輸入較多的文字
• 把 Label 的框框拉大
• 到屬性面板變更 Lines 的數字，例如三行就輸入 3，就會顯示三行

就用小鹿斑比來示範吧

1. Line Breaks 文字斷行設定

• Clip：依照 Label 的長度顯示文字，超過長度的文字會被裁切看不到

• Character Wrap：在 Label 寬度內自動換行，以「英文字母」為單位換行，英文單字會被打斷，中文沒影響

• Word Wrap 單字換行
  在 Label 寬度內自動換行，以「英文單字」為單位換行，英文單字會保持完整不斷行

• Truncate Head 縮減開頭，開頭會變 …
• Truncate Middle 縮減中間，中間會變 …
• Truncate Tail 縮減結尾，結尾會變 …

縮減的效果分別對照下圖三行，太長的部分會略過變成…

Truncate

縮減效果用在多行文字時，效果只會產生在最後一行

所以，多行文字時只適合用 Truncate Tail 縮減結尾

2. Autoshrink 文字縮放

• Fixed Font Size ：預設值，文字固定尺寸，不縮放
• Minimum Font Scale：字串過長時會設定最小的縮放倍數縮小字體，以顯示全部文字(0~1)
  Minimum Font Scale：字串過長時會設定最小的縮放倍數縮小字體，以顯示全部文字(0~1)

下圖四個文字區塊分別為 Minimum Font Scale 搭配 四種文字換行設定Minimum Font Scale + Clip
Minimum Font Scale + Character Wrap
Minimum Font Scale + Word Wrap
Minimum Font Scale + Truncate Tail

• Minimum Font Size：字串過長時，系統會依設定的字型大小縮小文字，以顯示全部文字

3. Shadow 文字陰影

• Shadow : 預設 Default 沒有陰影

Shadow Offset 陰影距離

• Width: 距離文字的X軸，數字越大越往右移動
• Height : 距離文字的Y軸，數字越大越往下做移動
  因為原點是以左上角為(0,0)開始向右( x 軸)跟向下( y 軸)

小鹿斑比的陰影 (5,5) 灰色

參考文章

研究顯示文字的 UILabel