iOS 15.0 이상에서 UIButton 안에 있는 이미지 사이즈 조절하기

반갑습니다 집주인들 팀원 박효준입니다 !

 

본 편에서는 iOS 15.0 이상에서 UIButton 안에 있는 이미지 사이즈를 조절하는 방법에 대해 알아보겠습니다 !

UIButton.Configuration이 나온 뒤로 쉽지 않아졌는데,, 한 번 구현한 과정을 말해볼게요~

 

그럼 레쯔고 〰️ 

 

문제 상황

버튼에 레이아웃을 아무리 건드려도 버튼 안에 들어있는 이미지는 늘어나지 않는다..!

버튼 안에 있는 이미지 사이즈 조절하는 방법

 

---

문제 해결

개요

현재 코드는 이렇게 버튼에만 레이아웃이 걸려있다.

private let likeButton = UIButton(type: .custom)
likeButton.setImage(.likeFill, for: .normal)
likeButton.setAnchor(
  top: bookCoverView.bottomAnchor,
  trailing: dropDownButton.leadingAnchor, constantTrailing: 10,
  width: 40, height: 40
)

위 문제를 해결하기 위해 구글링 한 결과 4가지 정도 알아냈다.

1. UIButton의 ContentEdgeInsets
2. UIButton의 imageEdgeInsets
3. button.imageView에 대해 오토레이아웃 추가하기
4. 이미지 자체에 사이즈를 변경해서 button.setImage()메소드에 넣기

 

일단, 1번과 2번은 UIButtonConfiguration이 나오고부터 deprecated 됐다.

지금 블로그에 나와있는 건 대부분 deprecated 된 메소드를 쓰고 있음 ㅠ

탈락.

3번으로 할 수 있긴 한데, 언젠가 또 필요한 순간이 올 거 같아서 4번으로 결정했다.

 

구현 과정

먼저 UIImage에 확장으로 image와 size를 받는 메소드를 만든다.

import UIKit

extension UIImage {
    static func resizedImage(image: UIImage, size: CGSize) -> UIImage {
        let renderer = UIGraphicsImageRenderer(size: size)

        return renderer.image { _ in
            image.draw(in: CGRect(origin: .zero, size: size))
        }
    }
}

그리고 ImageRenderer를 통해 이미지를 새로 그릴 건데,

이때 사이즈를 입력받아서 내가 넣은 이미지가 해당 사이즈로 리턴되게 구현했다.

let likeImage = UIImage.resizedImage(
    image: isLike ? .likeFill : .likeEmpty,
    size: CGSize(width: 28, height: 28)
)
likeButton.setImage(likeImage, for: .normal)

그러면 위와같이 사용할 수 있다 !

---

배운 점

• 버튼 안에 이미지는 사이즈를 따로 조정해줘야 한다
• UIGraphicsImageRenderer로 이미지 새로 그려서 해결해냄

 

---

참조 링크

없음