[Swift] UIButton Configuration

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

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

configuration

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

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

 

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

 

---

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 = "째깍째깍"

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

---

Configuring button colors

• baseBackgroundColor
• baseForegroundColor

configure1.baseBackgroundColor = .darkGray

configure1.baseForegroundColor = .darkGray

Configuring the button background

• background: UIBackgroundConfiguration
• cornerStyle

CornerStyle

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

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

---

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
}

 

 

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