UILabel不同的顏色與字型 — NSMutableAttributedString屬性應用

Anny
Oct 17, 2020

--

如何在同一行,也就是同一個 UILabel 中,顯示不同字體顏色、大小、字型等,或者是在文字中加入刪除線。

你可以使用多個 UILabel 來達成,但是這樣寫起來你應該也覺得既不美觀又不專業吧XD!

就讓我們來看看,在同一個 UILabel 該如何指定不同的形式吧~~~

本篇內容會提到:

  • NSMutableAttributedString 常見屬性與用法
  • 如何顯示不同字型大小、顏色?
  • 如何在文字中加入刪除線、底線?
  • 如何在文字當中加入陰影、外框顏色?
  • 如何讓文字斜體以及調整間距?

NSMutableAttributedString 常見屬性

NSMutableAttributedString 常見屬性

NSMutableAttributedString 用法

func addAttribute(NSAttributedString.Key, value: Any, range: NSRange)

這種 addAttribute方式呢,每次可以增加一種設定屬性。

以下使用addAttribute為例:

  1. 文字設定為Hello Youtube
  2. 將 Youtube 字體改為紅色
  3. 將 Youtube 改為特殊字型以及放大文字為50

成果如下:

如果我們需要修改很多項目就必須一直 addAttribute

func setAttributes([NSAttributedString.Key : Any]?, range: NSRange)

這種 setAttributes方式呢,每次可以增加多種設定屬性,可以使用 [NSAttributedString.Key : Value] 在其中增加多種設定屬性。

那現在我們使用setAttributes一次增加多種設定屬性。

以下使用setAttributes為例:

接下來開始對個別屬性做介紹吧~~~

如何顯示不同字型大小、顏色?

  1. 字體大小 — .font, Value: UIFont
  2. 字體顏色 — .foregroundColor, value: UIColor
  3. 背景顏色 — .foregroundColor, value: UIColor

range: NSMakeRange — 調整想要在文字當中哪裡到哪裡有更改

range: NSMakeRange(0, attributedString.length) 代表全部文字都做更改

成果如下:

如何在文字中加入刪除線、底線?

  1. 刪除線 — .strikethroughStyle
  2. 刪除線顏色 — .strikethroughColor
  3. 底線 — .underlineStyle
  4. 底線顏色 — .underlineColor

成果如下:

如何在文字當中加入陰影、外框顏色?

  1. 文字陰影 須建立NSShadow()
  • 陰影顏色 —shadowColor
  • 陰影寬高度 —shadowOffset = CGSize(width: , height: )
  • 陰影暈染程度 —shadowBlurRadius
  • 陰影寬高度、暈染程度 數值不同,效果不同,可以自行試試玩玩~~~

成果如下:

  1. 外框顏色 — .strokeColor
  2. 外框寬度 — .strokeWidth
  • 寬度需>0才會有效果
  • 如果只有設定顏色而寬度為0則無效
  • 寬度 正數與負數 皆可,效果不同,可以自行試試玩玩~~~
  • 通常寬度<5 文字會有中空效果,數值越大字體越粗。

成果如下:

如何讓文字斜體以及調整間距?

  1. 字體斜體 — .obliqueness
  • 正值右斜,負值左斜, 預設0不傾斜
// Hello 往右斜
attributedString.addAttribute(.obliqueness, value: 1, range: NSMakeRange(0, 5))
// Youtube 往左斜
attributedString.addAttribute(.obliqueness, value: -1, range: NSMakeRange(6, 7))

成果如下:

  1. 文字間距 — .kern
//文字間距
attributedString.addAttribute(.kern, value: 20 , range: NSMakeRange(6, 6))

成果如下:

在文字中加入插圖&網址連結

  1. 文字附件(圖)
  2. 文字網址連結

這部分可以看下篇文章

完整Github專案

--

--

Anny
Anny

Written by Anny

If You Think You Can, You Can!

Responses (1)