UIButton.Configuration을 사용하여 버튼 만들기

기존 버튼 생성 방식 

func createCustomButton(withTitle title: String) -> UIButton {
    let button = UIButton(type: .system)
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setTitle(title, for: .normal)
    button.backgroundColor = .darkOrange
    button.setTitleColor(.white, for: .normal)
    button.layer.cornerRadius = 4
    button.titleLabel?.font = UIFont.systemFont(ofSize: 14, weight: .bold)
    button.titleEdgeInsets
    return button
}

 

위의 방식에서 titleEdgeInsets를 사용하려고 보니, 아래와 같은 에러가 나왔습니다. 

'titleEdgeInsets' was deprecated in iOS 15.0: This property is ignored when using UIButtonConfiguration

titleEdgeInsets가 iOS 15부터 UIButtonConfiguration을 사용하는 버튼에서 더 이상 사용되지 않도록 되었기 때문에, 대신 새로운 UIButton.Configuration을 사용하여 텍스트의 들여쓰기를 설정하는 방법을 적용해야 합니다. 이를 위해 contentInsets 속성을 이용할 수 있습니다.

 

 

새로운 버튼 생성 방식 

func createCustomButton(withTitle title: String) -> UIButton {
    var configuration = UIButton.Configuration.filled()
    configuration.baseBackgroundColor = .darkOrange
    configuration.baseForegroundColor = .white
    configuration.cornerStyle = .medium
    
    // 텍스트 들여쓰기 설정
    configuration.contentInsets = NSDirectionalEdgeInsets(top: 5, leading: 5, bottom: 5, trailing: 5)
    
    // 텍스트와 관련된 설정
    configuration.title = title
    configuration.titleAlignment = .center
    configuration.attributedTitle?.font = UIFont.systemFont(ofSize: 14, weight: .bold)
    
    let button = UIButton(configuration: configuration, primaryAction: nil)
    button.translatesAutoresizingMaskIntoConstraints = false
    
    return button
}

 

 

 

• UIButton.Configuration: filled() 타입의 구성(configuration)을 사용하여 버튼을 설정합니다. 이 설정은 iOS 15 이상에서 UIButton의 새로운 스타일을 지원합니다.
• contentInsets: NSDirectionalEdgeInsets를 사용해 버튼 텍스트의 상, 하, 좌, 우를 각각 5씩 들여쓰기 했습니다. 이는 titleEdgeInsets와 비슷한 효과를 줍니다.
• cornerStyle: cornerRadius 대신 cornerStyle을 사용해 버튼 모서리를 다듬습니다.
• button 생성: UIButton을 configuration과 함께 초기화하여 버튼을 생성합니다.

 

 

새로운 버튼 생성 방식 - 이미지

func createCustomButton(withImageName imageName: String) -> UIButton {
    var configuration = UIButton.Configuration.filled()
    configuration.baseBackgroundColor = .darkOrange
    configuration.cornerStyle = .medium
    
    // 이미지 설정
    configuration.image = UIImage(systemName: imageName)
    configuration.imagePadding = 10  // 이미지와 버튼 테두리 간의 여백
    configuration.imagePlacement = .top  // 이미지를 버튼의 중앙에 배치
    
    // 이미지 크기 조정
    let largeConfig = UIImage.SymbolConfiguration(pointSize: 30, weight: .bold, scale: .large)
    configuration.preferredSymbolConfigurationForImage = largeConfig
    
    let button = UIButton(configuration: configuration, primaryAction: nil)
    button.translatesAutoresizingMaskIntoConstraints = false
    
    return button
}

 

 

• imagePadding: 이미지와 버튼의 가장자리 사이에 패딩을 추가하여 여유 공간을 줍니다.
• imagePlacement: .top을 사용하여 이미지를 버튼의 중앙에 배치합니다.
• preferredSymbolConfigurationForImage: UIImage.SymbolConfiguration을 사용해 이미지의 크기, 굵기, 스케일 등을 조정합니다. 여기서는 pointSize: 30으로 크기를 조정하고, .bold와 .large로 설정하여 이미지를 크게 표시합니다.