[SwiftUI] Button - 커스텀 이미지 버튼 만들기, Custom Image Button

 버튼을 눌렀을 때와 아닐 때를 이미지로 적용하는 Custom 버튼을 적용하는 코드

 

 

Custom Code

struct CustomImageButtonStyle: ButtonStyle {
    let normalImage: Image = Image(.circlePlusN)
    let pressedImage: Image = Image(.circlePlusS)
    let size: CGFloat = 50
    
    func makeBody(configuration: Configuration) -> some View {
        (configuration.isPressed ? self.pressedImage : self.normalImage)
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: self.size, height: self.size)
            .clipped()
            .animation(nil, value: configuration.isPressed) // 애니메이션 제거
    }
}

 

 ButtonStyle 코드입니다. 원하는 이미지를 normal과 pressed 두 개로 준비합니다. 색상이어도 괜찮습니다. size는 필요 없는 경우 사용하지 않으셔도 됩니다.

 

 makebody에서는 옵션을 적용합니다. resizable, aspectratio, frame 옵션들로 size가 변경되어도 이미지가 버튼 크기에 맞게 설정됩니다. clipped는 그냥 넣어두었습니다. anmation을 nil로 설정하면서 변경되는 순간에 약간의 효과를 제거했습니다. 

 

 

Button 적용 Code

Button(action: {
    print("Click!! \(self.count)")
    self.count += 1
}, label: {}).buttonStyle(CustomImageButtonStyle())

 

 

---

 안녕하세요! 저는 단순한 코딩을 넘어, 서비스와 사용자 경험을 깊이 고민하며 발전하는 개발자가 되기 위해 끊임없이 노력하고 있습니다. 함께 재미있는 이야기 나누고 싶으시거나, 채용 소개 및 커피챗에 관심 있으신 분들은 언제든지 환영합니다.

 

 궁금한 점이 있거나 더 많은 이야기를 나눠보고 싶다면, wlxo0401@gmail.com으로 편하게 연락 주세요! 감사합니다.