[SwiftUI] ButtonStyle

ButtonStyle

 

✅ 버튼 스타일에 대해서 알아보자

 

이건 진짜 어렵지가 않다. 정말정말 E A S Y 해 ! 

 

Configuration은 상속받아 들어오는 것의 상태를 받아서 쓰는것

✅ MyBlurButtonStyle

import SwiftUI

struct MyBlurButtonStyle: ButtonStyle {
    
    var color : Color
    
    // Configuration 위에서 상속받는 속성 그대로 사용할 수 있게 해줌
    func makeBody(configuration: Configuration) -> some View {
        
        configuration
            .label
            .font(.system(size: 20))
            .foregroundColor(Color.white)
            .padding()
            .background(color)
            .cornerRadius(20)
            .blur(radius: configuration.isPressed ? 10 : 0) // 클릭때면 흐리게 할 값 설정
    }
}

struct MyBlurButtonStyle_Previews: PreviewProvider {
    static var previews: some View {
        Button(action : {
                print("button clicked!")
            }, label: {
                Text("호호")
            }
        ).buttonStyle(MyBlurButtonStyle(color: Color.blue))
    }
}

사용법에 대한 설명은 preview를 보고 다른 것들도 이렇게 적용하면 된다.

버튼을 만들고 마지막에 버튼 스타일을 추가한다.

여기서 makeBody의 작동방식을 눈여겨 보면 좋다.

 

✅ MyButtonStyle

import SwiftUI

enum ButtonType {
    
    case tab
    case long
//    case tab, long, ..
    
}


struct MyButtonStyle : ButtonStyle {
    
    var color : Color
    var type : ButtonType
    
    func makeBody(configuration: Configuration) -> some View {
        
        configuration
            .label
            .font(.system(size: 20))
            .foregroundColor(Color.white)
            .padding()
            .background(color)
            .cornerRadius(20)
            .scaleEffect(configuration.isPressed ? 1.3 : 1.0) // 버튼 사이즈
            .onTapGesture {
            	// 짧게 탭하면 light 터치 
                if (self.type == .tab) {
                    let haptic = UIImpactFeedbackGenerator(style: .light)
                    haptic.impactOccurred()
                }
            }.onLongPressGesture {
            	// 길게 누르면 헤비하게 처리
                if (self.type == .long) {
                    let haptic = UIImpactFeedbackGenerator(style: .heavy)
                    haptic.impactOccurred()
                }
            }
            
        
    }
    
    
}

 

✅ MyRotateButtonStyle

import SwiftUI

struct MyRotateButtonStyle: ButtonStyle {
    
    var color : Color
    
    func makeBody(configuration: Configuration) -> some View {
        
        configuration
            .label
            .font(.system(size: 20))
            .foregroundColor(Color.white)
            .padding()
            .background(color)
            .cornerRadius(20)
            // degree 통해서 회전각!
            // .rotationEffect(configuration.isPressed ? .degrees(90) : .degrees(0)) 
            .rotationEffect(
            	configuration.isPressed
                ? .degrees(90)
                : .degrees(0),
                anchor: .bottom // 특점 지점을 기준으로 회전을 걸 수도 있다.
            )             
        
    }
    
    
}

 

✅ MySmallerButtonStyle

import SwiftUI

struct MySmallerButtonStyle : ButtonStyle {
    
    var color : Color
    
    func makeBody(configuration: Configuration) -> some View {
        
        configuration
            .label
            .font(.system(size: 20))
            .foregroundColor(Color.white)
            .padding()
            .background(color)
            .cornerRadius(20)
            .scaleEffect(configuration.isPressed ? 0.8 : 1.0) // 버튼 작아지고
            .opacity(configuration.isPressed ? 0.5 : 1.0) // 흐려지게끔
        
    }
    
    
}