[Swift] UIButton 안에 Image 넣고 아래에 Text 넣는 방법

 

 

이번에는 UIButton 안에 Image를 삽입하고 그 아래에 원하는 Text를 넣는 방법에 대해 알아보고자 합니다. 그러기 위해서는 우선 UIButton 을 삽입하고자 하는 ViewController에 넣고자 하는 Image 와 Text를 적어야 합니다. 

 

그러면 이렇게 UIButton 안에 Image 와 Text가 삽입 된 것을 볼 수 있습니다. 하지만 제가 원하는 건 Image 아래 Text 가 배치된 형태이기 때문에 Text의 위치를 이동시켜야 합니다. 그러기 위해서는 UIButton 의 Default Style 과 Plain Style의 차이에 대한 이해가 필요합니다. 

 

 

Default Style

Plain Style

이렇게 두 Style을 비교해보면 알 수 있듯이, Default Style 보다 Plain Style 에 Alignment, Placement, Padding 등 더 많은 기능이 있습니다. 그러기 때문에 Image 밑에 Text가 들어간 형식의 UIButton을 만들기 위해서는 Default Style 보다는 Placement 와 Padding을 활용할 수 있는 Plain Style를 지정해야 좀 더 수월하게 원하고자 하는 UIButton 을 디자인 할 수 있음을 알 수 있습니다. 다만 여기서 기억해야 할 부분은, Plain Style 은 iOS 15 이상에서만 지원하기 때문에 그 이전 버전에는 사용하기 어렵다는 것입니다. 

 

 

Placement와 Padding을 활용하기

 

완성된 UIButton

이렇게 Placement를 이용해 Image를 기준으로 Text를 어디에 둘지 지정하고, Image와 Text 사이의 적절한 Padding을 주어 원하는 형태의 UIButton을 완성했습니다.