iOS ) Label의 부분 글자 크기/폰트/색상 변경방법

안녕하세요 :) Zedd입니다.

오늘은 뭘 해볼거냐면

왼쪽은 Label의 Taxt에서 부분적으로 글자 크기를 키운거고,

오른쪽은 부분적으로 색깔을 바꿔준거죠? :)

시작할게요.

Label의 부분 글자 크기/색상 변경방법

---

IBOutlet을 따주세요. 

먼저 부분적으로 폰트 사이즈를 키우는 방법부터 합시다.

● 부분적으로 폰트 사이즈/폰트 조절하는 방법

//내가 적용하고싶은 폰트 사이즈
let fontSize = UIFont.boldSystemFont(ofSize: 30)

//label에 있는 Text를 NSMutableAttributedString으로 만들어준다.
let attributedStr = NSMutableAttributedString(string: myLabel.text)

//위에서 만든 attributedStr에 addAttribute메소드를 통해 Attribute를 적용. kCTFontAttributeName은 value로 폰트크기와 폰트를 받을 수 있음.
attributedStr.addAttribute(.font, value: fontSize, range: (text as NSString).range(of: "Zedd"))

//최종적으로 내 label에 속성을 적용
myLabel.attributedText = attributedStr

kCTFontAttributeName은 속성이 적용되는 텍스트의 "글꼴"이에요.

이 특성과 연결된 값은 CTFont객체여야 합니다. 기본값은 Helvetica 12입니다.

자..당연히 우리는 텍스트의 글꼴 크기를 바꾸고 싶으니, kCTFontAttributeName을 주고, value로는 우리가 아까 정해놓은 fontSize를 넘겨줍니다. 그리고 range에는 NSMakeRange로 값을 직접 줘서 줄 수 도 있는데, 이렇게 하니까 뭔가 이상하더라구요;;

이렇게 우리가 원하는 String만 줘서 Range로 만들 수 있어서 저렇게 줬습니다. 대신 Swift의 String에는 range라는 메소드가 없기때문에 NSString으로 꼭 캐스팅을 해줘야합니다!

자..이제 실행해보면

이렇게 Zedd부분만 커진 것을 볼 수 있죠.

자..응용이 가능한데요. kCTFontAttributeName에서 기본값은 Helvetica 12라고 그랬죠?

이 말은...폰트 크기뿐만 아니라 폰트까지 바꿀 수 있다는 소리 같죠?

맞습니다.

let font = UIFont(name:"Apple Color Emoji" , size: 50)

//label에 있는 Text를 NSMutableAttributedString으로 만들어준다.
let attributedStr = NSMutableAttributedString(string: myLabel.text)

//위에서 만든 attributedStr에 addAttribute메소드를 통해 Attribute를 적용. kCTFontAttributeName은 value로 폰트크기와 폰트를 받을 수 있음.
attributedStr.addAttribute(.font, value: font, range: (text as NSString).range(of: "Zedd"))

//최종적으로 내 label에 속성을 적용
myLabel.attributedText = attributedStr

폰트랑 폰트 크기 둘다 줘볼게요. 그리고 addAttribute의 value를 바꿔주면..!

짜잔 폰트와 폰트크기까지 바뀐 것을 볼 수 있습니다. 

자 다음으로 넘어갑시다.

● 부분적으로 색상 바꾸는 방법

let attributedString = NSMutableAttributedString(string: myLabel.text)

attributedString.addAttribute(.foregroundColor, value: UIColor.blue, range: (text as NSString).range(of:"Zedd"))

myLabel.attributedText = attributedString

위에서 폰트 바꾼거랑 거의 똑같죠?!

addAttribute에서, 첫번째 파라미터와 두번째 파라미터만 바뀌었네요.

NSForegroundColorAttributeName의 속성 값은 UIColor객체입니다. (value가 UIColor 객체여야 한다는 뜻) 이 속성을 지정하지 않으면, 텍스트가 검은색으로 렌더링 됩니다. 

NSForegroundColorAttributeName말고도

이렇게 다른 것들도 있으니까 입맛대로 사용해보세요 :)

저도 궁금해서 다 사용해봤답니댜.

하나씩 보여드리자면...

● NSStrokeColorAttributeName

NSStrokeColorAttributeName이름으로 봤을때는 Stroke의 색상을 지정해주는 애같네요.

스트로크..?얘가 무슨 기능하는거지..?

저렇게!!!! 이렇게 막 테두리만...막 암튼 이렇게 만드는 아이입니다.

Stroke를 적용할때는 NSStrokeColorAttributeName만 지정해서는 안됩니다.

즉 색상만 지정해주면 안되고, NSStrokeWidthAttributeName라는 속성도 같이 줘야합니다.

처음에 NSStrokeColorAttributeName했는데도 안되길래..뭐지..?했음..

정리하자면, 저렇게 속이 비어있고, 겉 테두리만 그려주는 속성은 NSStrokeWidthAttributeName입니다. 이것만 하면, 

attributedString.addAttribute(.storkeWidth, value:4.0, range: (text as NSString).range(of:"Zedd"))

이렇게 변하긴 합니다.

저 Zedd에 색상을 주는 방법은 2가지가 있습니다. 

1. NSStrokeColorAttributeName을 이용.

2. 저 위에서 배운 NSForegroundColorAttributeName를 이용.

attributedString.addAttribute(.strokeColor, value: UIColor.blue, range: (text as NSString).range(of:"Zedd"))

attributedString.addAttribute(.foregroundColor, value: UIColor.blue, range: (text as NSString).range(of:"Zedd"))

어느 코드를 적용하든

가 나오게 됩니다. 

● NSUnderlineColorAttributeName

자..이름만보면 언더라인. 즉 밑줄을 그어주는 기능을 할 것 같네요.

NSUnderlineColorAttributeName역시 혼자서는 아무것도 못합니다 ㅠ

바로 NSUnderlineStyleAttributeName이라는 것을 지정해줘야만

이렇게 밑줄이 그이게 된답니다. 

attributedString.addAttribute(.underlineStyle, value: NSUnderlineStyle.styleThick.rawValue, range: (text as NSString).range(of:"Zedd"))

attributedString.addAttribute(.underlineColor, value: UIColor.blue, range: (text as NSString).range(of:"Zedd"))

(.rawValue를 안해주면 앱이 죽더라구요..왜그러지..?)

● NSBackgroundColorAttributeName

이건!!!바로 알겠네요. 바로 배경색상을 지정해주는 거겠죠? 

혼자서도 잘 작동합니다. 

attributedString.addAttribute(.backgroundColor, value: UIColor.blue, range: (text as NSString).range(of:"Zedd"))

● NSForegroundColorAttributeName

는 배경색상이 아니고, 텍스트 색상을 바꿔주는 거였죠? 위에서 했으니 넘어가겠습니다 :)

● NSStrikethroughStyleAttributeName

여기에는 Color가 안들어가있으니, 색상과 관련된건 아니겠네요.

이게 뭐하는건지는 사진으로 보면 바로 이해가 가실거에요.

바로 이렇게 해주는 기능을 가지고 있답니다. 

NSStrikethroughStyleAttributeName역시 혼자 사용하면 아무런 기능을 하지 못하고,

NSBaselineOffsetAttributeName과 함께 사용해줘야합니다. 

위 사진처럼 하려면, NSBaselineOffsetAttributeName의 Value에는 0을 주면 됩니다. 

attributedString.addAttribute(.baselineOffset, value: 0, range: (text as NSString).range(of:"Zedd"))

attributedString.addAttribute(.strikethroughStyle, value: 1, range: (text as NSString).range(of:"Zedd"))

이렇게요.

NSBaselineOffsetAttributeName의 값을 크게 주면 줄수록,

이렇게 저 Zedd부분이 올라갑니다;;

NSStrikethroughStyleAttributeName은 저 그어진 줄의 굵기를 의미합니다.

 위 값은 5를 준 상태에요. 

제가 여러가지 값으로 실험해봤는데, 값이 커질수록 저 굵기가 굵어지는게 아닙니다. 

크게줘도 엄청얇게 될때가 있고, 아예 줄이 적용이 안되는 경우도 있어요;

왼쪽은 15를 준경우고

오른쪽은 16을 준 경우......ㅎ

뭔가 value로 받은 값을 받아서 연산을 한번 더 하는 것 같아요.

ㅎㅎ..급 실험실이 되었네요.

아무튼!! 도움이 되었으면 좋겠습니다 XD

오늘 코드는 제 github에 올려놓았으니 참고하세요!!!!