從 Interface Builder 的 Attributed 設定文字的多種樣式
Published in
Jul 29, 2018
想要文字顯示多種不同的樣式，比方不同的顏色和大小，除了可用多個元件實現，其實也可搭配 attributedText 用一個元件搞定。不管是 label，text field 還是 text view，都可以搭配 attributedText。
我們可從程式和 Interface Builder 設定 attributedText ，接下來就讓我們直接從 storyboard 設定 label，從 Attributes inspector 為利綺愛太遠的歌詞設定不同的文字大小，顏色，背景顏色，底線，外框和行距。
1 將 label 的 Text 從預設的 Plain 改成 Attributed，Lines 設為顯示多行文字的 0
2 輸入文字內容，利綺的愛太遠歌詞
3 歌詞"永遠有多遠" 寫得很好，我們想將它變大。
選取永遠有多遠後，點選右上角的 T，將字體大小設為 24。
結果
4 歌詞”你曾是我的地平線" 令彼得潘想到了過去，想將它換成她最愛的橘色。
選取你曾是我的地平線後，點選右上角 --- 右邊的長方形按鈕設定 Text Color，將顏色改成橘色。
結果
5 設定歌詞”想圍繞你”的背景顏色。
我們還可以設定文字的背景顏色，從右上方的按鈕 a 設定。
結果
6 將歌詞”永遠有多遠”加上底線和外框樣式。
選取永遠有多遠後，從右鍵清單選擇 Font，點選 Underline(底線)和Outline(外框)。
結果
7 將文字間的行距設為 10。
將文字全選後，點選右上方的 ... 按鈕。
此時我們可針對文字做一些進階的設定，比方從 Spacing 設定行距。
結果
，
