버튼안에 여백주기

버튼의 여백이 없음(마음의 여유가 없넹)

버튼 여백이 있음(여유가 잇넹..)

extension UIButton {
    func setInsets(forContentPadding contentPadding: UIEdgeInsets, imageTitlePadding: CGFloat?) {
        
        if let imageTitlePadding = imageTitlePadding { // 이미지가 없을 수도 있으니 조건문을 걸어줌
            
            self.contentEdgeInsets = UIEdgeInsets(
                top: contentPadding.top,
                left: contentPadding.left,
                bottom: contentPadding.bottom,
                right: contentPadding.right + imageTitlePadding
                // 오른쪽으로 이미지 크기만큼 버튼의 너비를 확보함
            )
            self.titleEdgeInsets = UIEdgeInsets(
                top: 0,
                left: imageTitlePadding, // 이미지의 공간만큼 왼쪽으로 이동해줘야하고
                bottom: 0,
                right: -imageTitlePadding // 밀려난만큼 늘어나야한다 그래야 말줄임표가 안됨
                // 위에서 이미지의 공간을 확보해줬기 때문에 이미지는 건들일 필요 없음
            )
        } else {
            self.contentEdgeInsets = UIEdgeInsets(
                top: contentPadding.top,
                left: contentPadding.left,
                bottom: contentPadding.bottom,
                right: contentPadding.right
            )
        }
    }
}

emotionCountReset.setInsets(forContentPadding: .init(top: 5, left: 5, 
bottom: 5, right: 5), imageTitlePadding: nil)

ㅕㅑ

---

Extension은 아직 안 배웠지만 타입을 확장하여 사용할 수 있는 녀석이라고 한다.

 

UIEdgeInsets(테두리 공백)

- 시야를 위한 삽입 거리

 

가장자리 삽입 값은 직사각형으로 표시되는 영역을 축소하거나 확장하기 위해 직사각형에 적용됩니다. 일반적으로, 가장자리 삽입물은 뷰 레이아웃 중에 뷰의 프레임을 수정하는 데 사용됩니다. (양수 값은 프레임을 지정된 양에 의해 삽입(또는 축소)하게 한다. 음수 값은 프레임이 지정된 양에 의해 시작(또는 확장)되도록 한다.) -> 시야를 위한 삽입 거리라는 특성으로 보아 중심을 기준으로  공백을 없애기 위해서는 마이너스, 만들어주기 위해서는 플러스인것같다. 그렇다면 우리는 플러스를 해야 초기값0(레이블에 딱맞는 버튼)에서 공백이 생겨 여백이 확장될 수 있다. 왜 양수를 넣으면 지정된 양에 의해 삽입(또는 축소)한다고 하는걸ㄲㅏ

 

위, 아래, 오른, 왼 기본값 => 0으로 이니셜라이징

 

위에서는 UIEdgeInsetsf를 타입으로 가지는 인스턴스 프로퍼티 3가지 키워드가 나온다.

(버튼을 기준으로 top: 위, botton: 아래, left: 왼쪽, right: 오른쪽)

contentEdgeInsets, imageEdgeInsets, titleEdgeInsets

---

contentEdgeInsets

- 버튼의 모든 내용을 둘러싼 직사각형의 삽입 또는 아웃셋 여백

- 중심을 기준으로 가장자리와 중심과의 거리가 줄어들고(-) 늘어난다(+)

기본값을 기준으로 +하면 해당 방향으로 늘어나고, -를 하면 해당 방향으로 줄어든다.

* 우리가 생각하는 여백을 지정하고 싶다면 + 방향으로 값을 설정해주어야한다.

 

imageEdgeInsets

이건 이미 여백 안에 있는 이미지에 대한 여백 지정이다.

+ : 해당 가장자리에서 여백을 안 쪽으로 만들어준다

- : 해당 가장자리에서 여백을 밖깥 쪽으로 만들어준다(일정 수준을 넘으면 여백 밖으로 이미지가 벗어난다)

 

 titleEdgeInsets

버튼의 타이틀의 여백지정이다

+ : 해당 가장자리에서 여백을 안 쪽으로 만들어준다.

- : 해당 가장자리에서 여백을 밖깥 쪽으로 만들어준다(버튼 여백 안에서만 움직이므로 일정 수준을 넘으면 말줄임표로 줄어든다)

 

---

그렇다면?

 

위의 코드를 이해하기 쉬워진다.

 

---

사실 위에 소개한 3가지의 인스턴스 프로퍼티는 iOS 15까지만 가능한 방법이다. 그래서 다른 방법을 모색해봐야한다....