導言

在第一周，我們學會了如何使用 Storyboard 設計多重結局的互動應用，並透過 Auto Layout 讓 UI 在不同的裝置上能夠正確顯示。本週的焦點將放在深入探討常見 UI 元件的進階應用上，特別是在開發互動故事書或文字密集型的應用中，UILabel 扮演了至關重要的角色。透過掌握 UILabel 的進階功能，開發者可以靈活控制文字排版，提升 UI 的動態適應性，並與第七天所學的 Auto Layout 技巧協同運作，優化應用的使用體驗。

UILabel 不僅僅是一個用來顯示文字的元件，透過進階屬性設定，我們可以靈活地控制文字的排版、顯示效果，甚至是互動反應。今天，我們將探索 UILabel 的進階功能，如文字換行（Line Breaks）、自動縮小字體（Autoshrink）、文字陰影效果（Shadow）以及點擊強調（Highlighted）等，這些技巧能讓文字顯示更具視覺吸引力，也能提升應用的可用性與互動性。

學習目標

• 探索 UILabel 進階屬性，靈活掌控文字顯示效果。
• 學會使用多種文字效果來優化應用介面。
• 深入理解 UILabel 在互動應用中的作用，提升用戶體驗。

UILabel 設置與應用步驟

1. Line Breaks - 換行方式

UILabel 的 lineBreakMode 屬性決定了當文字過長無法顯示在同一行時，應如何處理換行或截斷。這裡我們將深入探討 lineBreakMode 的多種模式，並透過範例說明其效果。

換行模式

Character Wrap：以字母為單位進行換行。如果一行顯示不下整個單字，文字會在字母間進行換行。例如，當顯示 "iPhone" 時，若 "e" 無法容納於當前行，"e" 會自動被移至下一行，保持單字完整顯示。

Word Wrap：以單詞為單位進行換行。當一整個單詞無法顯示在當前行的剩餘空間中，該單詞會被移動到下一行。這種模式適合文字密集型的應用，保持語意的連續性，確保不會在字母中斷造成閱讀障礙。

換行裁切模式

Clipping：這種模式會直接裁切掉放不下的文字，無論是在單詞或單字的中間。例如，若顯示的文字中有"業"這個字，當其一部分無法容納於行內，部分字形將被裁切。這種模式下，只有最末行會發生內容裁切。

省略模式

Truncate Head：這種模式下，當文字過長時，省略號會顯示在開頭，保留最後部分的內容。這在需要重點突出末尾資訊的場合特別有用。

Truncate Middle：當文字超出可顯示範圍時，省略號會顯示在中間，保留文字的開頭與尾端部分。這種模式適合需要同時顯示開頭和結尾資訊，而可以忽略中間部分的情境。

Truncate Tail：當文字過長時，在最後一行末尾處顯示省略號（…），保留前面的內容。這是 UILabel 的預設行為，適合需要完整顯示開頭部分但可以略過尾端的情況。

相關 API：NSLineBreakMode

lineBreakMode 屬性背後使用的是 NSLineBreakMode，其中包含了上述所有換行和裁切選項。這些設定可以根據不同的 UI 需求靈活應用，確保文字排版在各種裝置和情境下都能保持最佳效果。

2. Autoshrink - 自動縮小字體

當我們遇到長文字無法完全顯示在 UILabel 中時，Autoshrink 提供了一個方便的解決方案：自動縮小字體大小以適應標籤的寬度，確保文字不會被截斷而無法完整顯示。

Interface Builder 使用：

在 Interface Builder 中啟用 adjustsFontSizeToFitWidth 很簡單，你只需在屬性檢視器中找到「自動縮小」選項，然後選擇「Minimum Font Scale」來設定最小字體比例。

在設計國際化應用或動態內容更新的場景下，Line Breaks 和 Autoshrink 屬性能幫助開發者靈活調整文字顯示。比如，當標題長度不定或需要適應不同語言時，Autoshrink 可以確保文字不會超出範圍，同時保持良好的可讀性。

關鍵屬性：

• adjustsFontSizeToFitWidth：開啟此屬性即可啟用自動縮小功能。當文字超出標籤的顯示範圍時，UILabel 會自動調整字體大小，直到文字完全適合標籤的邊界範圍。adjustsFontSizeToFitWidth 僅在 numberOfLines 屬性設為 1 時生效，也就是當 UILabel 僅限顯示單行文字時，該功能才會自動運作。
• minimumScaleFactor：此屬性允許我們設定字體縮小的最小比例。這確保文字在縮小時不會過小而影響可讀性。例如，將 minimumScaleFactor 設定為 0.5，表示字體可縮小到原始大小的一半。與過去的 minimumFontSize 屬性相比，蘋果建議開發者使用更新的 minimumScaleFactor 來設定最小字體比例，這樣可以更靈活地控制字體縮小的行為。

應用情境：

這項功能特別適用於單行文字標籤，尤其是在動態內容如標題或數據顯示時，它能避免文字超出邊界或被截斷。例如，在設計用戶界面時，你可能會遇到不同語言或字數不同的動態內容，這時 Autoshrink 能自動調整字體大小以適應標籤。

3. Shadow - 陰影效果

為文字加上陰影，增強文字的層次感和可讀性。在背景較為單調或文字需要突出的情境下，陰影可以讓文字更具視覺吸引力，特別適合於標題或重點內容。

屬性：

• shadowColor：設定陰影的顏色。
• shadowOffset：設定陰影的偏移量，通常會設定微小的偏移來讓文字有立體感。

4. Highlighted - 點擊強調效果

功能：當 UILabel 被嵌入 UITableView 或 UICollectionView 的 cell 中時，可以使用點擊強調效果來增強互動性。在列表或互動場景中，這個屬性可以強化用戶與介面的互動，讓點擊事件更直觀。

屬性：

• isHighlighted：設定是否啟用高亮效果。
• highlightedTextColor：設定選中狀態下的文字顏色。

回顧重點

• 熟悉 UILabel 的進階屬性，靈活運用換行、自動縮小字體、陰影及強調效果。
• 根據不同需求，透過這些屬性提升介面美觀與用戶體驗。
• 特別在文字密集或需要互動的應用中，這些技巧能讓文字顯示更靈活且更具吸引力。

總結

UILabel 的進階功能不僅能讓文字顯示更加精緻，也能提升應用的可讀性與互動性。透過這些技巧，你可以更靈活地應用 UILabel，尤其在開發互動故事書或文字密集型的應用時，這些設定能極大地提高用戶體驗。

此外，Line Breaks（換行方式） 和 Autoshrink（自動縮小字體） 與第7天教學中提到的 Auto Layout 屬性，如 Content Hugging Priority 和 Content Compression Resistance Priority，有密切的關聯。在第7天的文章中，我們深入探討了這些 Auto Layout 屬性如何控制 UI 元件在壓縮與擴展時的表現。現在，在 UILabel 中，這些屬性可以協同運作，確保文字在動態佈局中不會出現過度壓縮或溢出，並能根據需要自動縮放以適應不同的螢幕大小。

透過結合這些屬性，開發者能更靈活地控制 UILabel 的排版與大小，從而提升 UI 的整體表現，確保在不同裝置上都能獲得一致且精緻的用戶體驗。

參考

• 【Day 07】Auto Layout 修練 - 2 - Content Hugging 與 Compression Resistance 的深入解析

附錄：已接觸的 UIKit 元件

第2周
UILabel （Day 09）– 顯示文字，設定換行（Line Breaks）、自動縮小字體（Autoshrink）、陰影（Shadow）、強調效果（Highlighted）。