同一個 label 當中不同的文字效果

想改變同一個string字串當中不同字體顏色、字型、大小等等效果，可以透過NSMutableAttributedString設定樣式。

在介面設計的時候時常需要於label當中的文字呈現不同的效果，像是之前做猜數字的時候需要強調剩餘幾次機會以及猜測數字的範圍，則可以透過 NSMutableAttributedString 當中兩個方式 .addAttribute 各別增加樣式或是一次性 .setAttributes 設定樣式或一次性增加多種樣式 .addAttributes。

(左) 統一樣式『無重點』、(右) 不同樣式 『有重點』

方法：NSMutableAttributedString

設定所需的參數

〖 改變的樣式 〗key: value:

文字字體、大小 〖 key: .font, value: UIFont(name: size:)

attributedString.addAttribute(.font, value: UIFont(name: "Chalkduster", size: 25.0)!, range: NSMakeRange(0, 1))

文字顏色 〖 key: .foregroundColor, value: UIColor 〗

attributedString.addAttribute(.foregroundColor, value: UIColor.red, range: NSMakeRange(0, 1))

文字背景顏色 〖 key: .backgroundColor, value: UIColor 〗

attributedString.addAttribute(.backgroundColor, value: UIColor.red, range: NSMakeRange(4, 3))

文字底線刪除線

• 顏色：
  刪除線〖 key: .strikethroughColor, value: UIColor 〗
  底線：〖 key: .underlineColor, value: UIColor 〗
• 樣式：
  刪除線〖 key: .strikethroughStyle, value: 〗
  底線〖 key: .underlineStyle, value: 〗
  【 樣式種類 value】
  單一條細線：NSUnderlineStyle.single.rawValue
  單一條粗線：NSUnderlineStyle.thick.rawValue
  雙線：NSUnderlineStyle.double.rawValue

attributedString.addAttribute(.strikethroughStyle, value: NSUnderlineStyle.thick.rawValue, range: NSMakeRange(9, 3))
attributedString.addAttribute(.strikethroughColor, value: UIColor.green, range: NSMakeRange(9, 3))
        attributedString.addAttribute(.strikethroughStyle, value: NSUnderlineStyle.double.rawValue, range: NSMakeRange(13, 3))
        attributedString.addAttribute(.strikethroughColor, value: UIColor.green, range: NSMakeRange(13, 3))
        attributedString.addAttribute(.underlineStyle, value: NSUnderlineStyle.single.rawValue, range: NSMakeRange(4, 3))
        attributedString.addAttribute(.underlineColor, value: UIColor.red, range: NSMakeRange(4, 3))

文字陰影

• 先建立 名為shadow 的NSShadow()
  〖 key: .shadow, value: shadow〗
• 設定shadow 陰影屬性
  陰影顏色 .shadowColor ，型別為UIColor
  陰影位置位移 .shadowOffset，型別為CGSize(width:height:) 以右和下為正。
  陰影暈染模糊程度 .shadowBlurRadius，數值必須大於或等於0，0為預設值(清晰)，數字過於大的時候看起來像沒有效果。

let shadow = NSShadow()
shadow.shadowColor = UIColor.red // 陰影顏色
shadow.shadowOffset = CGSize(width: 10, height: 10) // 陰影位移位置
shadow.shadowBlurRadius = 5 // 陰影暈染模糊程度
attributedString.addAttribute(.shadow, value: shadow, range: NSMakeRange(0, 7))

文字邊框

• 顏色：〖 key: .strokeColor, value: UIColor 〗
• 外框線寬度：〖 key: .strokeWidth, value: 〗
  預設為0，大於0為中空外框字體，小於0則為中間為原本字體描邊框。

外框寬度：(左上) value = 3、(右上) value = 1、(左下) value = -1、(右下) value = -8

// 加入外框寬度
attributedString.addAttribute(.strokeWidth, value: -3, range: NSMakeRange(4, 3)) // 試試 3,1,0,-1,-8
                
// 加入外框顏色
attributedString.addAttribute(.strokeColor, value: UIColor.yellow , range: NSMakeRange(4, 3))

文字斜體〖 key: .obliqueness, value: 〗

• 向右 value 大於0、向左 value 小於0

// 往右斜 value大於0
attributedString.addAttribute(.obliqueness, value: 0.4, range: NSMakeRange(4, 3))
// 往左斜 value小於0
attributedString.addAttribute(.obliqueness, value: -0.4, range: NSMakeRange(9, 3))

文字間距〖 key: .kern, value: 〗

• 預設為0，小於0則字會重疊擠在一塊，大於0表示字之間的間距。

(左) value < 0、(右) value > 0

// 文字間距
attributedString.addAttribute(.kern, value: 5 , range: NSMakeRange(9, 3)) // value 試試 -5, 0, 5

〖 改變的範圍 〗range:

• NSMakeRange(loc:len:)
  loc: 從第幾個位置開始：從字串第一個字開始則設為0，第二個字開始則設為1。
  len: 改變的長度
  注意：
  超過範圍會顯示error，還有換行符號( \n)算一個位置

三種方式設定

• .addAttribute(key, value, range)
• .setAttributes([key: value], range)：透過dictionary型別 [key:value]
• .addAttributes([key: value], range)：透過dictionary型別 [key:value]

若同一個範圍想要多種樣式綜合，可以透過第二種和第三種方式，例如想要同時改變字體大小、顏色字型或是改變外㑌和陰影。

// .setAttributes([key: value], range)
attributedString.setAttributes([.font: UIFont(name: "Chalkduster", size: 30.0)!, .foregroundColor: UIColor.red], range: NSMakeRange(136, 4))
// .addAttributes([key: value], range)
attributedString.addAttributes([.shadow: shadow, .strokeColor: UIColor.yellow, .strokeWidth: 3], range: NSMakeRange(161, 4))

GitHub

patty1208/NSMutableAttributedString

參考

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