커스텀 탭바 내에 있는 아이콘 위치 조절하는 방법

private func createButton(imageName: String, tag: Int) -> UIButton {
    let button = UIButton(type: .system)

    // 버튼 구성 설정
    var config = UIButton.Configuration.plain()
    let largeConfig = UIImage.SymbolConfiguration(pointSize: 24, weight: .bold, scale: .medium)
    config.imagePadding = 0 // 이미지와 텍스트 사이의 간격
    config.imagePlacement = .top // 이미지를 텍스트 위에 배치
    config.contentInsets = NSDirectionalEdgeInsets(top: -20, leading: 0, bottom: 0, trailing: 0) // 전체적인 내용 인셋을 조정

    // 구성 설정 적용
    button.configuration = config
    button.configurationUpdateHandler = { button in
        button.configuration?.image = UIImage(systemName: imageName, withConfiguration: largeConfig)
    }

    button.addTarget(self, action: #selector(buttonDidTapped(_:)), for: .touchUpInside)
    button.tintColor = .white
    button.tag = tag

    return button
}

 

1. UIButton 생성

let button = UIButton(type: .system)

 

UIButton을 시스템 스타일로 생성합니다. 시스템 스타일 버튼은 기본적으로 텍스트가 파란색으로 표시되며, 터치 시 반응하는 간단한 버튼입니다.

 

 

2. 버튼 구성 설정

var config = UIButton.Configuration.plain()

 

UIButton.Configuration.plain()을 사용하여 기본 스타일을 가진 버튼 구성을 만듭니다. 이 구성은 버튼에 대한 기본적인 레이아웃과 스타일링 옵션을 제공합니다.

 

 

3. 이미지 크기 설정

let largeConfig = UIImage.SymbolConfiguration(pointSize: 24, weight: .bold, scale: .medium)

 

UIImage.SymbolConfiguration을 사용하여 이미지를 커스터마이징합니다. 여기서는 심볼 이미지의 크기와 스타일을 설정합니다.

• pointSize: 24: 이미지의 포인트 크기를 24로 설정합니다.
• weight: .bold: 이미지의 굵기를 bold로 설정합니다.
• scale: .medium: 이미지의 스케일을 medium으로 설정합니다.

 

 

4. 버튼 구성 세부 조정

config.imagePadding = 0
config.imagePlacement = .top
config.contentInsets = NSDirectionalEdgeInsets(top: -20, leading: 0, bottom: 0, trailing: 0)

 

 

• config.imagePadding = 0: 이미지와 텍스트 사이의 간격을 0으로 설정합니다. 이 코드에서는 텍스트가 없으므로 이 설정은 큰 영향을 미치지 않습니다.
• config.imagePlacement = .top: 이미지가 텍스트 위에 위치하도록 설정합니다. 텍스트가 없는 경우에도 이미지가 버튼의 상단에 위치하게 됩니다.
• config.contentInsets = NSDirectionalEdgeInsets(top: -20, leading: 0, bottom: 0, trailing: 0): 버튼 내부의 내용(이미지 포함)의 여백을 조정합니다. 여기서는 버튼 내부의 콘텐츠가 위쪽으로 20 포인트 이동되도록 설정합니다.
  • top: -20: 위쪽 여백을 -20으로 설정하여 이미지를 위로 이동시킵니다.
  • leading: 0, bottom: 0, trailing: 0: 나머지 여백은 변경하지 않습니다.]

⭐️ 오토레이아웃을 사용할 필요가 없어집니다. 내가 직접 해봤는데 아이콘 위치는 변하지 않고, 오히려 탭바의 높이 부분이 길어지거나 짧아지는 형식이다. ⭐️

 

5. 버튼 구성 적용 및 업데이트 핸들러

button.configuration = config
button.configurationUpdateHandler = { button in
    button.configuration?.image = UIImage(systemName: imageName, withConfiguration: largeConfig)
}

 

 

• button.configuration = config: 이전에 설정한 구성을 버튼에 적용합니다.
• button.configurationUpdateHandler = { button in ... }: 버튼의 구성 업데이트를 위한 핸들러를 설정합니다. 이 핸들러는 버튼의 상태가 업데이트될 때마다 호출됩니다. 여기서 largeConfig을 사용해 심볼 이미지가 적용됩니다.