Swfit Button image Inset + Button Configuration 사용시 폰트 적용법

UIKit에서 버튼을 사용하면서 이미지와 텍스트 사이의 inset을 넣어야 했습니다.

 

글 + 이미지의 버튼을 만드려했음

imageEdgeInsets을 사용하려 했는데 꽤 오래전에 deprecated 됐었네요

 

iOS 15 이후론 새로운 UIButton System이 추가되었다고 합니다.

 

WWDC에서 새로운 시스템은 다음과 같은 효과가 있다고 합니다.

• 유연한 디자인: 이미지, 텍스트, 배경 색상 등을 자유롭게 조합하여 다양한 스타일의 버튼을 만들 수 있습니다.
• 동적 업데이트: 버튼의 상태에 따라 동적으로 스타일을 변경할 수 있습니다.
• 접근성 향상: Dynamic Type을 지원하여 시각 장애가 있는 사용자에게도 편리한 사용 환경을 제공합니다.

이런식의 버튼 또한 정의가 가능

 

configuration을 통해 동적인 동작을 정의하고, 토글, 팝업등의 버튼을 제공하는 방법 등 영상에선 더 방대한 내용을 다루지만

오늘 필요했던 내용 위주로 간단히 알아보겠습니다.

Configurations 종류

 

과거 wwdc의 이미지, 현재는 좀 더 추가된듯하다.

 

ImageInset 넣기

위치별 인셋 용어 참고

사용 예시

// Configuration 정의
let buttonConfiguration: UIButton.Configuration = {
    var configuration = UIButton.Configuration.plain()
    configuration.imagePadding = 3
    configuration.baseForegroundColor = UIColor(hex: "#777777")
    return configuration
}()

lazy var viewCountButton: UIButton = {
	// 버튼 생성시 configuration 주입
    let button = UIButton(configuration: buttonConfiguration)
    button.configuration?.image = ""
    return button
}()

lazy var commentCountButton: UIButton = {
	// 재사용 가능한 이점
    let button = UIButton(configuration: buttonConfiguration)
    button.configuration?.image = ""
    return button
}()

 

이미지만 다르고 나머지는 같다는 느낌으로 버튼을 여러 개 만들어야 하는 경우를 예시로 작성해 보았습니다.

 

주요 메서드는 아래와 같습니다.

 

• configuration.imagePadding: 이미지와 텍스트 사이의 간격을 조절합니다.
• configuration.baseForegroundColor: 텍스트 색상을 설정합니다.
• button.configuration?. image: 버튼에 표시할 이미지를 설정합니다.
• button.configuration?. title: 버튼에 표시할 텍스트를 설정합니다.

 

버튼 Font 변경법 및 주의사항

 

아래와 같이 사용할 수 있었습니다.

 

lazy var myButton: UIButton = {
        let button = UIButton(configuration: buttonConfiguration)
        var attributedText = AttributedString("하이")
        attributedText.font = UIFont(name: <#T##String#>, size: <#T##CGFloat#>)
        button.configuration?.attributedTitle = attributedText
        return button
}

 

• attributedTitle: 버튼의 텍스트를 AttributedString으로 설정하여 다양한 스타일을 적용할 수 있습니다.
• configuration과 button.titleLabel?. font = UIFont(...)는 함께 사용할 수 없습니다. configuration을 사용하여 버튼의 스타일을 설정할 때는 attributedTitle을 사용하는 것이 좋습니다.

 

 

 

활용 예시 및  후기

이런 느낌이 필요했던건데 ConfigurationUpdateHandler 등과 더 디테일한 작업이 사실상 메인인 기능이 아닌가 싶다.

조금 더 간단하게 구현할 수 있을 것 같다

 

 

참고:

• Apple Developer Documentation: https://developer.apple.com/kr/design/human-interface-guidelines/buttons