iOS ) UIButton / UILabel에 이미지추가

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

요새 바쁘고 그래서 ㅎㅎㅎㅎ...글을 잘 못썼어요 흐규

오늘은... UIButton과 UILabel에 이미지를 추가하는 법을...알아볼게요 :)

UIButton / UILabel에 이미지추가

---

● UIButton

 

굳이.. UIButton을 먼저 하는 이유는.....아주 감사하게도..

이미지를 Inspector에서 넣을 수 있죠

이미지를 하나 넣어볼까욘

이렇게 앞으로  이미지가 들어가게 되죠!!

※ 아ㅡㅡ나는 이미지 뒤에 넣고 싶은데..."일단" 두가지 방법이 있습니다. 

1. Attribute Inspector의 View의 Semantic수정

지금 이런상태일건데, 저 Semantic을 누르고, Force Right-to-Left를 눌러주면

이렇게 이미지가 오른쪽으로 가게댐 ㅎ

2. Size Inspector에서 Image Insets수정

Button을 누르고 Size Inspector를 보시면

이런 Image Insets이 있습니다.

느낌이...오실텐데....저 각각 insets를 조절하면 이미지를 조정할 수 있습니다.

ㅎㅎ

저는 쓴다면, 위 두가지 방법을 합쳐서 씁니다. 그래서 "일단" 두가지 방법이 있다고 한거에요! 그냥 밑에 방법은..뭔가 미세한 조정이 필요할때? 그때 쓰는편...ㅎㅎ

Left이외에도 다른방향들도 있으니까, 뭐 이미지를 조금 위/아래로 보내고 싶다 이러시면 저 프로퍼티들에 적절한 값을 주시면 될 것 같아요 :)

뭐 이건 예시고..이런식으로 이미지를 버튼 안의 어느곳이든 보낼 수 있답니다 XD

이렇게 버튼은 끝~.~

다음은 UILabel.

● UILabel

네...UILabel은.......Inspector로 이미지 못넣음ㅋ.ㅎㅋㅎㅋㅎ...

그럼 Label에 어떻게 이미지를 넣느냐!!!!

여러분 한가지만 생각하세요. 

"아 내가 Label에 Attribute를 주고싶다" 하면 무조건!!! NSMutableAttributedString를 하나 만들어야 합니다. 예전에 < Label의 글자 글자크기/폰트/색상 변경 방법 >글에서도 Label의 특정 문자에 뭐 볼드체나 폰트나 사이즈를 주고싶으면 NSMutableAttributedString를 만들어서 Label에 넣어줬었죠.

똑같아요.

if let text = myLabel.text{
            
            let attributedString = NSMutableAttributedString(string: text)
 
            .....
 
            myLabel.attributedText = attributedString
}

자..일단 3번째줄 코드에서 String을 하나 만드는데, NSMutableAttributedString을 만들죠. 이게 무슨뜻이냐? 아 ㅇㅇ 나는 Mutable(수정가능한) 속성을 추가한 String을 하나 만들어주면,

7번째줄에서 attributedText에 우리가 만든 attributedString을 넣어주죠.

그냥 우리 원래 myLabel.text = "스트링~~"이런거랑 똑같아요.

다만 NSMutableAttributedString에서는 말그대로 String에 Attribute를 줄 수 있게 됩니다. 

서론이 길었지만, Label에 이미지 넣는 방법 == String에 이미지를 넣는 방법인것입니다.

이것은 

let imageAttachment = NSTextAttachment()

NSTextAttachment라는 클래스를 통해서 가능해요!

이 NSTextAttachment의 프로퍼티에는 

image라는게 있어서.

let imageAttachment = NSTextAttachment()
imageAttachment.image = UIImage(named: "heart")

이렇게 image를 줄 수 있습니다.

아직 우리가 아까 만든 attributedString에는 아직 이미지가 추가가 안된상태겠죠?

그러니까 방금 만든 NSTextAttachment인스턴스를 attributedString에 "추가"해줘야 합니다.

attributedString.append(NSAttributedString(attachment: imageAttachment))

이렇게요. append니까 뒤에 차곡차곡 append하는 그런 느낌이죠?

그러니까 내 label에 text가 뭐 "안녕하세요 Zedd입니다"였으면

Zedd입니다 뒤에 이미지가 append된다는거에요. 

이렇게 하고

let attributedString = NSMutableAttributedString(string: "")
let imageAttachment = NSTextAttachment()
imageAttachment.image = UIImage(named: "heart")
attributedString.append(NSAttributedString(attachment: imageAttachment))
attributedString.append(NSAttributedString(string: "안녕하세요 Zedd입니다."))
myLabel.attributedText = attributedString

이렇게하면, 이미지를 "먼저" append하고 string을 그 다음에 append한 것을 볼 수 있죠?

이렇게 하면 결과는??!

이렇게되는 걸 볼 수 있습니당 ㅎㅎ

간단..?하죠?

bounds라는 프로퍼티도 있어서 ㅎㅎ

imageAttachment.bounds = CGRect(x: 0, y: 0, width: 60, height: 60)

이렇게 지정해주면 이미지 크기도 키울 수 있어요.

이러케 하지만 이렇게 bounds를 지정해줄 경우에는 sizeToFit()을 꼭!!!!!해주세요!!!

전체 코드도 첨부할게요 :)

let attributedString = NSMutableAttributedString(string: "")
let imageAttachment = NSTextAttachment()
imageAttachment.image = UIImage(named: "heart")
imageAttachment.bounds = CGRect(x: 0, y: 0, width: 60, height: 60)
attributedString.append(NSAttributedString(attachment: imageAttachment))
attributedString.append(NSAttributedString(string: "안녕하세요 Zedd입니다."))
myLabel.attributedText = attributedString
myLabel.sizeToFit()

 

UIButton에 비해 조금? 복잡하긴 하지만...(코드로 줘야하니까) 그렇게 어려운건 아니니까 ㅎㅎ..

아무튼 도움이 되었으면 좋겠어요 XD