[UIKit] UIButton의 invalidateIntrinsicContentSize()과 Configuration 분기처리! (UIButton과의 전쟁)

사실대로 말하자면, 이 전쟁은 11월 1일 ~ 11월 3일까지 이틀에 걸쳐 발생했다. 
머리가 안돌아가서 이거 생각하다가 다른작업하다가 했다.! 🤯 진짜 이거처럼 머리가 터졌었음 ;; 

 

 

🧨 1차 전쟁 발발 - button의 width는 어떻게 설정하는거냐고 ;

1️⃣ UIButton은 incristic? content 사이즈를 따라서 width와 hegith가 자동으로 결정되는데 왜 이렇게 나오는거지?

1차 시도

• 인터넷에서 버튼 폰트와 버튼크기를 맞추는 작업에 대한 이야기를 나누는 글을 봤는데, 아래 코드를 알려주더라고?

self.titleLabel?.adjustsFontSizeToFitWidth = true

• 하지만 이 코드는, ‘수정하러가기’라는 폰트가 작아져버리면서 버튼 내부로들어와버린다… ㅂㄷㅂㄷ😡
• width에 맞춰서 font size를 바꿔버리는 코드라서 그렇다고 한다.

adjustsFontSizeToFitWidth에 대해서 알고 넘어가자!

https://developer.apple.com/documentation/uikit/uilabel/1620546-adjustsfontsizetofitwidth

🍎 width에 맞게 글꼴 크기를 조정한다.
레이블이 레이블의 경계 사각형에 제목 문자열을 맞추기 위해 텍스트의 글꼴 크기를 줄이는지 여부를 결정하는 Bool값이다.

아 정의에서 완전히 그냥 글꼴의 크기를 조절한다고 나와있꾸나!!!!!

 

2차 질문 - 의심단계

• 버튼을 설정할때 width를 강제로 주는거 아니냐면서 듀나선생님에게 질문
  • 강제로 그냥 주고만 싶었다 ;;
• 듀나선생님 답변으로는, 버튼을 설정할때 주로 width를 설정해주거나 leading+trailing을 줘서 크기를 주어주는 편이라고 한다!!! 호뤠이이이이 호뤠이이 🎊
  • 꼭 크기를 잡아주는 이유는, width가 정확하지 않으면 frame이 몇인지 몰라서 모양이 안잡혀서 터치가 안되는 문제가 발생하기도 한다고 한다.

→ 오케이 그럼 일단 width는 잡아줘야하는거 확인.

slack... 짱

 

3차 - 드디어 짝꿍을 만났다

돌아다니면서 해당 코드 발견. 이것을 넣어주니까, button 내부 글자들에 맞춰서 button width가 자동으로 늘어나더라고!!! 🎊🎊🎊… 내가 찾던게 바로 이런거라굿 👻

self.invalidateIntrinsicContentSize()

invalidateIntrinsicContentSize()란?

https://developer.apple.com/documentation/uikit/uiview/1622457-invalidateintrinsiccontentsize

읽어보니까, 고유 콘텐츠의 크기를 무효화하는 코드라고 한다. 버튼도 label이 길어지면 말줄임표로 라벨이 줄어들었는데, 이 코드를 작성하니까 고유 컨텐츠 (button)의 크기를 무효화시켜버려서 글자에 맞춰서 버튼의 크기가 정해지는 거 같았다. 그래서 해결한 화면은 아래와 같다.

이렇게 딱 맞춰서 버튼이 정해지는 것! 이제는 내부 image+label에 inset을 넣어주어서 디자이너가 전달해준 버튼 모양과 동일하게 만들어주면 된다.

 

🧨 2차 전쟁 - 왜 inset 적용 안되냐고 ;;

2️⃣ 버전에따라서 분기처리를 햇는데, 왜 적용이 안되는거야?

원래는 분기처리를 이렇게 했었다

private func configureUI() {
    self.invalidateIntrinsicContentSize()
    self.titleLabel?.textAlignment = .center
    self.backgroundColor = .evyBlack1
    self.imageView?.contentMode = .scaleAspectFit
    self.constraint(.heightAnchor, constant: Size.buttonHeigth)

    // TODO: - 15버젼에서 contentinset넣어야하고, cornerradius넣어야함
    if #available(iOS 15.0, *) {
        configuration?.preferredSymbolConfigurationForImage = Size.buttonImageSize
    } else {
        self.contentEdgeInsets = UIEdgeInsets(top: 8, left: 10, bottom: 8, right: 30)
    }
}

먼저 버튼의 모양을 전부 잡아준 다음, configuration 코드르 꼭 사용해야만 하는 경우만 분기처리를 하려고 했었다. 자꾸만 원하는 모양이 나오지 않길래 print문과 .capsule로 Corner 모양을 바꿔줘 보았다.

private func configureUI() {
    self.invalidateIntrinsicContentSize()
    self.titleLabel?.textAlignment = .center
    self.backgroundColor = .evyBlack1
    self.imageView?.contentMode = .scaleAspectFit
    self.constraint(.heightAnchor, constant: Size.buttonHeigth)

    // TODO: - 15버젼에서 contentinset넣어야하고, cornerradius넣어야함
    if #available(iOS 15.0, *) {
        configuration?.cornerStyle = .capsule
        configuration?.preferredSymbolConfigurationForImage = Size.buttonImageSize
        print("여길지나긴해?")
    } else {
        self.contentEdgeInsets = UIEdgeInsets(top: 8, left: 10, bottom: 8, right: 30)
    }
}

이렇게 해보니까, 일단, 저 함수를 지나긴한다.. 근데 cornerStyle이 변하지 않았다. 즉, 함수를 지나긴 하는데 configuration에 적용한 속성들이 적용되지 않고 있다는 것이지…

도대체 왜그럴까????? 우선 분기처리를 활용해서 cusom UIButton을 만든 사람들을 찾아나섰다… 구글링도 실력이다….

구글링 결과 아래 블로그에서는, 버튼에 적용되는 속성들 모두전부 분기처리를 통해서 구현해주었다.

https://minios.tistory.com/6

[UIKit] UIButton의 Image, Title 크기 조절하기

이렇게 말이다,,,,

아차차..? 🤔 당연히 configuration으로 적용되는 버튼은 configuration으로만 속성이 적용될 것인데, 내가 configuration으로 주지 않았던 것이 문제였던것 같다. 그래서 나도 위 처럼 코드를 바꿔보았다.

그냥 일반 버튼에 주는 속성들과 똑같게 buttonConfig를 만들어서 configuration 속성을 담은 변수를 만들어주고, configuration에 적용시켜주는 코드랑, 일반 버튼을 생성하는 방식대로 적용시켜주는 코드를 각각 따롭 분기처리해주었다.

private func configureUI() {
        if #available(iOS 15.0, *) {
            var buttonConfig = UIButton.Configuration.filled()
            buttonConfig.titleAlignment = .leading
            buttonConfig.baseBackgroundColor = .evyBlack1
            buttonConfig.cornerStyle = .capsule
            buttonConfig.preferredSymbolConfigurationForImage = Size.buttonImageSize
            buttonConfig.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 10, bottom: 8, trailing: 30)
            configuration = buttonConfig
            print("여길지나긴해?")
        } else {
            self.invalidateIntrinsicContentSize()
            self.titleLabel?.textAlignment = .center
            self.backgroundColor = .evyBlack1
            self.imageView?.contentMode = .scaleAspectFit
            self.constraint(.heightAnchor, constant: Size.buttonHeigth)
            self.contentEdgeInsets = UIEdgeInsets(top: 8, left: 10, bottom: 8, right: 30)
        }
    }

 

와우 이렇게 하니까 !!! 15버전으로 빌드했을때 내가 원하는 방식으로 출력이 된다!!!!

 

위 사진이 15버전 이상일 경우이고, 아래 사진이 15버전 미만일 경우이다.

코드를보면, 15버전이상일 경우에만 cornerStyle을 걸어주었기 때문에 corner가 둥그랗게 나오고, 15미만인 버전에는 아직 cornerRadius관련한 코드를 작성해주지 않았기 때문에 네모낳게 나온다.

이로써 나는, 버튼 분기처리에 성공했따!!!!! 이걸로 이틀 고생한건 안비밀 쉿