5시간 삽질) UIButton의 image는 왜 위치가 변경되지 않을까.
(Macbook Air M1 8-256 Monterey 12.5.1 Xcode 13.4)
Why?
UI 구현 위주 프로젝트를 하다가 UIButton 쪽에서 갑자기 막히는 상황이 발생했습니다.
제가 원하는 UIButton은 다음과 같습니다.
View에 Button의 Layout을 설정하고,
이 후 UIButton settitle과 setimage를 추가해주고,
button.semanticContentAttribute = .forceRightToLeft // 이미지를 우측으로
button.contentHorizontalAlignment = .left // 좌로 정렬하기.
이미지의 위치, 정렬 코드만 추가해주면 되는 간단한 작업이였습니다.
근데.. 다음과 같은 상황이 발생했습니다.
어.. 순간 머리가 굉장히 복잡해졌습니다. 이게 대체 왜 안되지..라는 생각에 구글링을 시작했습니다.
시도
구글링 결과,
이미지에 대한 세팅을 해줘야 우측으로 간다는 스택오버플로우의 내용들이 있었습니다.
그래서
button.imageEdgeInsets = UIEdgeInsets(top: 0, left: 160, bottom: 0, right: 0)imageEdgeInsets 코드를 추가해줬습니다.
( iOS15 부터 적용 가능 )
하지만,
buttonLabel이 아예 통으로 밀린 건 둘째치고,
이미지가 우측으로 가지를 않는다는 점이 문제였습니다.
그래서 아 설마 titleEdgeInsets을 설정 안해서 그런건가.. 해서 다시 코드를 추가했습니다.
button.titleEdgeInsets = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 0)
결과
이미지가 이미 왼쪽에 있어서 소용이 없었습니다.
분명, semanticContentAttribute code로 위치를 변경해주었는데,,,,
대체 왜?라는 생각에 한참을 또 생각했습니다.
해결
제가 원하는 방향으로 구현이 안되면, 제가 코드를 짠 방식으로 천천히 다시 살펴보았습니다.
그래서 일부 Layout을 수정해보고 다시 실행해보는 것으로 몇 번의 시도 끝에.
Layout을 잘못 설정한 것으로 확인했습니다. (ㅠㅠ)
UIButton의 view debug hierarchy를 보면 다음과 같이 되어 있습니다.
UIButton, UIButtonLabel 이렇게 2가지로 나뉘어져있어서,
일반적으로 settitle만을 설정해주면, UIButtonLabel은 중앙에 위치하게 되죠.
때문에 초기에 Layout을 설정할 때, 다음과 같이 UIButtonLabel의 위치에 제약을 주었습니다.
문제는 이 제약때문이였습니다.
이미 제약이 들어간 상태에서는 그 이후의 코드가 적용되지가 않더군요.
이 제약을 지우니 문제가 해결되었습니다.
결론
UIButton과 Layout에 대한 이해가 아직도 부족하게 느껴졌습니다.
약 5시간 정도.. 삽질한 것 같네요. ㅠㅠ
오류가 있거나, 피드백이 있다면 언제든지 댓글로 알려주세요!
감사합니다 :)