Language/Swift

[Swift] UIButton Configuration

jaewpark 2023. 11. 15. 11:54

iOS 15.0 이상부터는 UIButton 구성을 좀 더 쉽게 도와주는 configuration이 생겼습니다.

configuration은 UIButton과 그 내용의 모양과 동작을 지정할 수 있습니다.

configuration

configuration은 아래와 같이 표현됩니다.

  • plain
  • gray
  • tinted
  • filled
  • borderless
  • bordered
  • borderedTinted
  • borderedProminent

 

|250

func update(for: UIButton) -> UIButton.Configuration
지정된 버튼에 대해 업데이트된 구성 사본을 반환할 수도 있습니다.

Configuring titles

title 및 subtitle의 설정에 대한 내용입니다.

title과 subtitle은 예상 가능한 UI로 상/하로 놓여있으며, 글씨 크기는 subtitle이 title보다 작습니다.

  • title
  • subtitle
  • attributedTitle
  • attributedSubtitle
  • titleTextAttributesTransformer
  • subtitleTextAttributesTransformer
  • titlePadding
  • titleAlignment
  • titleLineBreakMode
  • subtitleLineBreakMode

 

attributedTitle/Subtitle은 AttributedString의 구조로 되어있습니다. reference type의 NSAttributedString을 구조체의 형태로 만들며 문자열의 특정 부분을 다르게 표시하는데 사용됩니다. 

titleTextAttributesTransformer은 Transformer을 사용하여 attributed text가 UI에 표시되는 방식에 영향을 주며, 초기화할 때 클로저가 제공됩니다.

let transformer = UIConfigurationTextAttributesTransformer { incoming in
    var outgoing = incoming
    outgoing.foregroundColor = UIColor.black
    outgoing.font = UIFont.boldSystemFont(ofSize: 20)
    return outgoing
}

 

titlePadding은 title과 subtitle 사이의 거리를 조정하며, titleAlignment는 title과 subtitle을 정렬하는 방법을 지정합니다.

titleLineBreakMode는 문자열이 여러 줄로 표시될 때, 줄임말을 사용하는 방식 또는 개행이 될 때 단어 혹은 클자 기준으로 하도록 변경하는 속성입니다.

 

|250

Configuring images

  • image
  • imagePadding
  • imagePlacement
  • imageReservation
  • imageColorTransformer
  • preferredSymbolConfigurationForImage: SymbolConfiguration
    : Symbol image의 point size, scale, text style, width 및 font 과 같은 세부 사항을 정의
configuration.image = UIImage(systemName: "clock")
configuration.title = "시계"
configuration.subtitle = "째깍째깍"

|150

configuration.image = UIImage(systemName: "clock")
configuration.imagePadding = 10
configuration.imagePlacement = .trailing
configuration.title = "시계"
configuration.subtitle = "째깍째깍"

|150

Configuring button colors

  • baseBackgroundColor
  • baseForegroundColor
configure1.baseBackgroundColor = .darkGray

|250

configure1.baseForegroundColor = .darkGray

|250

Configuring the button background

  • background: UIBackgroundConfiguration
  • cornerStyle

CornerStyle

모서리의 모양을 변경합니다. Capsule을 제외하고는 차이가 미비합니다.

  • dynamic
  • fixed
  • capsule
  • large
  • medium
  • small

|250

Configuring the indicator

indicator는 드래그앱드랍을 가능하도록 느끼게 하는 것이 표시됩니다.

  •  iOS 16.0+ 
  • indicator
  • indicatorColorTransformer: UIConfigurationColorTransformer

Configuring the activity indicator

activity Indicator는 로딩을 느끼도록 하는 것이 표시됩니다.

  • showsActivityIndicator: Bool
    : 버튼에 이미지 대신 activity Indicator를 표시할지 여부를 결정
  • activityIndicatorColorTransformer

Configuring selection behavior

  • automaticallyUpdateForSelection: Bool

plain(), gray() 그리고 tinted()는 default가 true
selection을 Custom하려면 이 값을 false로 설정

 
예제1
// configuration.filled()
// automaticallyUpdateForSelection = false

testButton.configurationUpdateHandler = { button in
    switch button.state {
    case .selected:
        button.configuration?.baseBackgroundColor = .red
        button.configuration?.baseForegroundColor = .white
        button.configuration?.subtitle = self.stateToString(button.state)
    default:
        button.configuration?.baseBackgroundColor = .black
        button.configuration?.baseForegroundColor = .yellow
        button.configuration?.subtitle = self.stateToString(button.state)
    }
}

testButton.addTarget(self, action: #selector(pressButton), for: .touchUpInside)

@objc func pressButton(_ sender: UIButton) {
    sender.isSelected = true
}

 

|250

 

예제 코드로는 automaticallyUpdateForSelection와 상관 없이도 변경가능하지만 문서에서 요구한대로 false로 지정