從 Interface Builder 的 Attributed 設定文字的多種樣式
想要文字顯示多種不同的樣式,比方不同的顏色和大小,除了可用多個元件實現,其實也可搭配 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 設定行距。
結果
,