利用 label 的 Attributed Text 調整行距,好好地呈現五月天的好好

五月天的新歌”好好”歌如其名,歌詞寫得好好,為了學唱這首歌,參加 Swift 偶像歌唱大賽,彼得潘決定做個 App,將歌詞以 UILabel 呈現,天天看天天唱。

如下圖所示, 將 UILabel 的 Lines 欄位設為 0 後,顯示多行的歌詞完全難不倒它。

Image for post
Image for post
Image for post
Image for post

唯一美中不足的,排版不是很好看。行距不夠大,感覺歌詞全都擠在一起。

Image for post
Image for post

山不轉路轉,幸好 Label 可設為 Attributed Text,對文字進行更細微的調整,比方設定行距。以下就讓我們一步步地施行細緻的間距調整手術。

1 將Label 的 Text 屬性從 Plain 改為 Attributed。

Image for post
Image for post

2 點選下圖圓圈標示的 … (more) 按扭,顯示更多細節的設定視窗。

Image for post
Image for post

3 將 Spacing 欄位設為 5 ,將行距設為 5。

Image for post
Image for post

執行 App:

五月天的好好歌詞,終於可以搭配適當的間距,好好地呈現 ~

Image for post
Image for post

彼得潘的iOS App程式設計入門,文組生的iOS App程式設計入門講師,彼得潘的 Swift 程式設計入門,App程式設計入門作者,http://apppeterpan.strikingly.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store