[iOS] NSMutableAttributedString : 문자열 특정 부분 색 바꿔주고 싶을 때

노션에서 보면 더 편해요 -> 🦋🦋🦋

😊 NSMutableAttributedString : 문자열 특정 부분 색 바꿔주고 싶을 때

 

 

📚 사용 방법

사진처럼 이런 유아이를 만들어 주려고 합니당.

@마켓컬리 부분만 보라색인 라벨을 만들 겁니다!

 

제가 공부한 결과... 방법이 크게 2가지 정도 있는 것 같아여

이건 우선 1번째 방법인데 전 이걸 더 자주 쓰게 될 것 같습니다!

 

 

 

1-1. (첫 번째 방법) 특정 문자 색깔에 변화를 주고 싶은 경우

let footerLabel : UILabel = {
    let label = UILabel()
    label.text = "카카오톡 @마켓컬리 친구 추가하고 소식과 혜택을 받아보세요."
    label.font = UIFont.systemFont(ofSize: 12, weight: .medium)
    label.textColor = UIColor.gray

    let attributtedString = NSMutableAttributedString(string: label.text!)
    attributtedString.addAttribute(NSAttributedString.Key.foregroundColor, value: UIColor.purple, range: (label.text! as NSString).range(of:"@마켓컬리"))
        
    label.attributedText = attributtedString
        
    return label
}()

우선 풀코드를 한 번 보시져!

코드를 위에서부터 찬찬히 살펴보면

→ label.text / label.font / label.textColor를 하나하나 설정해줬어요.

 

 

let attributtedString = NSMutableAttributedString(string: label.text!)

1️⃣ 아래에 attributedString을 선언해서 어떤 문자열에 NSMutableAttributedString을 사용해줄지 입력해줍니다.

label.text = "카카오톡 @마켓컬리 친구 추가하고 소식과 혜택을 받아보세요."

 요놈 선배에게 변화를 줄 거니까 string에 입력해주세요!

 

→ label.text 에 강제 언래핑을 한 이유는 대놓고 label.text에 값을 준 게 보이기 때문에.. nil 값이 아니란 걸 알잖아여?

 

 

attributtedString.addAttribute(NSAttributedString.Key.foregroundColor, value: UIColor.purple, range: (label.text! as NSString).range(of:"@마켓컬리"))

2️⃣  addAttribute를 통해서 ( 바꿔줄 옵션 / 값 / 어느 영역 ) 에 대한 값을 주면 됩니다.

 

→ NSAttributedString.Key.foregroundColor ( .foregroundColor 라고 적어도 가능 ) ⇒ 글자색 옵션을 바꿀 것이다!

→ value: UIColor.purple ⇒ 보라색으로 변경할 것이다!

→ range: (label.text! as NSString).range(of:"@마켓컬리") ⇒ label.text 중에서 "@마켓컬리" 부분에만 적용할 것이다!

 

여기서 range를 보면 label.text!를 NSString으로 변환하고 range(of:)를 통해 범위를 지정해줍니다.

(as 연산자를 통해 타입캐스팅)

 

🤔 hoxy... NSString에 대해 궁금하다면? (링크 첨부)

 

 

 

label.attributedText = attributtedString

3️⃣ 위 코드와 같이 attributedText를 통해 label에 attributedString값을 적용해주면 됩니다!

 

 

 

---

1-2. (두 번째 방법) 특정 문자 폰트에 변화를 주고 싶은 경우

 두 번째 방법을 알려드릴라구.. 

 폰트 변화로 설명해드릴라구.. 합니다!

 보면 카카오톡 부분만 크기가 작잖아유?

 

 

 

 

전체 코드는 이렇습니다!

let sentenceLabel : UILabel = {
    let label = UILabel()
    label.numberOfLines = 0
    label.text = "카카오톡 @마켓컬리 친구 추가하고 소식과 혜택을 받아보세요."
    let attributedString = NSMutableAttributedString(string: (label.text!), attributes: [.font: UIFont.systemFont(ofSize: 20, weight: .medium), .foregroundColor: UIColor.black, .kern: -1.0]) // kern은 자간
        
    attributedString.addAttribute(.font, value: UIFont.systemFont(ofSize: 10, weight: .bold), range: (label.text! as NSString).range(of: "카카오톡"))
        
	label.attributedText = attributedString
        
    return label

}()

첫 번째 방식과 다른 점은 attributedString을 선언해주고 

NSMutableAttributedString을 사용해 줄 문자열만 입력한 게 아니라 

attributes를 통해서 label.text에 적용할 속성도 미리 설정하는 것입니다.

 

→ 긍까 따로 label.textColor / label.font 를 안한다는 거져..

폰트 바꿀 거니까 .foregroundColor 대신 .font 써주고~

UIColor.purple 대신 적용해 줄 font 값 작성해주면 됩니다~

 

 

그리고 나머지는 같슴다.

 

---

2. 문단에 변화를 주고 싶을 때 (예를 들어, 행간 / indent 등등)

 

문단에 변화를 주려고 하면 이렇게 스보에서도

Label 선택해서 Attributed로 변경해서 설정할 수 있습니다.

 

그런데 마이너스 값을 줄 수 없기 때문에 이런 경우에는 코드로 줘야 겠져?

그래서 우리는 이걸 공부해야 한다 이 말이야,,,

 

 

 

 

 

 

 

 

먼저 전체 코드 보시져!!!!!!

 

let footerTextView : UITextView = {
    let textView = UITextView()
    textView.text = "주식회사 컬리 | 대표자 : 김슬아\n개인정보보호책임자 : 이원준\n사업자등록번호 : 261-81-23567 사업자 정보확인\n통신판매업 : 제 2018-서울강남-01646 호\n주소 : 서울특별시 강남구 도산대로 16길 20, 이래빌딩 B1 ~ 4F"
    
	let attributedString = NSMutableAttributedString(string: textView.text!)
    let paragraphStyle = NSMutableParagraphStyle()
    paragraphStyle.lineSpacing = 3

    attributedString.addAttribute(NSAttributedString.Key.paragraphStyle, value: paragraphStyle, range: NSMakeRange(0, attributedString.length))
        
	textView.attributedText = attributedString
       
    return textView

}()

 

우선 attributedString 선언해주고

어떤 문자열에 NSMutableAttributedString 적용해줄 건지 값을 설정해 주는 것까지는 위와 똑같슴다.

 

 

그 담부터가 다른데.... (hoo 나도 어려워.. 설명)

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineSpacing = 3

 

NSMutableParagraphStyle() 인스턴스를 하나 생성해주고 lineSpacing (= 줄 간격) 값을 적용해주세요.

→ NSMutableParagraphStyle 클래스는 NSParagraphStyle 클래스를 상속하고 있는 클래스로

문단 스타일 속성을 변경해줄 때 사용합니다.

→ lineSpacing 이외에도 공식문서를 보면 indent 값을 변경해줄 수 있고 alignment 등 다양한 문단 스타일을 변경할 수 있어요!

 

 

attributedString.addAttribute(NSAttributedString.Key.paragraphStyle, value: paragraphStyle, range: NSMakeRange(0, attributedString.length))

 

→ 줄 간격을 조정하는 NSAttributedString의 Key는 paragraphStyle입니다!!

(앞부분 NSAttributedString.Key 생략하고 그냥 .paragraphStyle 이라고 써도 됩니다.)

→ value (적용해 줄 값) : 위에서 상수로 선언 후 lineSpacing 값을 준 paragraphStyle을 입력해주고

→ range (변화를 줄 영역) : NSMakeRange를 통해서 영역을 지정해줍니다.

 

 

NSMakeRange는 공식문서를 보면 특정 값으로부터

NSRange를 만들어주고 NSRange를 반환한다고 나와 있어여

 

 

긍까...

• NSRange는 문자열 내의 특정 범위를 가리키기 위해 사용합니다.→ len은 length : Range의 길이 - [Int 타입]
• ⇒ NSRange가 나타내는 범위는 [location, location + length) 입니다.
• → loc은 location : 시작점 - [Int 타입]

 

 

textView.attributedText = attributedString

마지막으로 textView에 속성을 적용시켜주면 끝입니다!!