SwiftUI02 - Button

Swift는 버튼 프로퍼티로 매우 다양한 기능을 제공한다.

SwiftUI에서 버튼을 선언하는 방법은 다양하다이다. 주로 쓰는 첫번째 방법은 가장 간단하게 버튼을 생성하는 방법이고, 두번째 방법은 버튼에 사용하는 레이블을 커스텀하기 위해 사용하는 방법이다.

// 1번째 방법
Button("레이블") {
	print("버튼 기능")
}

// 2번째 방법
Button(action: {
            print("버튼 기능")
        }, label: {
            Text("레이블")
        })

 

버튼 스타일

SwiftUI는 버튼에 대한 다양한 스타일을 제공한다. - .boarderd, .borderedProminent, destructive(role)
텍스트 길이에 맞게 버튼 크기가 자동으로 맞춰진다.
.boardedProminent 스타일의 색상을 바꾸고 싶다면 .tint() 프로퍼티를 사용하면 된다.

struct ContentView: View {
    var body: some View {
        VStack {
            Button("확인") { }
            .buttonStyle(.bordered)
            Button("취소", role: .destructive) { }
            .buttonStyle(.bordered)
            Button("전송하기") { }
            .buttonStyle(.borderedProminent)
            Button("삭제하기", role: .destructive) { }
            .buttonStyle(.borderedProminent)
        }
    }
}

아이폰 유저라면 익숙한 버튼 스타일

맨 위에 설명한 버튼 생성 방법 중 두번째 방법을 사용하면 Image 뷰도 버튼 레이블로 사용할 수 있다.

// Image 뷰를 사용한 버튼 생성
struct ContentView: View {
    var body: some View {
        Button(action: {
            print("이메일 전송")
        }, label: {
        	// 이미지를 레이블에 넣었다.
            Image(systemName: "paperplane.fill")
        })
    }
}

// Label 뷰를 사용한 버튼 생성 방법
struct ContentView: View {
    var body: some View {
        Button(action: {
            print("이메일 전송")
        }, label: {
            Label("메일 전송", systemImage: "paperplane.fill")
        })
            .buttonStyle(.borderedProminent)
    }
}

버튼 배경으로 그라데이션도 활용할 수 있다.

struct ContentView: View {
    var body: some View {
        VStack {
            Button(action: {
                print("Share My Score")
            }, label: {
                Label("Share", systemImage: "square.and.arrow.up")
                    .padding()
                    .foregroundColor(.white)
                    .background(LinearGradient(gradient: Gradient(colors: [.red, .orange]), startPoint: .leading, endPoint: .trailing))
                    .cornerRadius(30)
        })
            Button(action: {
                print("Edit My Image")
            }, label: {
                Label("Edit", systemImage: "pencil")
                    .padding()
                    .foregroundColor(.white)
                    .background(LinearGradient(gradient: Gradient(colors: [.red, .orange]), startPoint: .leading, endPoint: .trailing))
                    .cornerRadius(30)
            })
        }
    }
}

 

다양한 스타일의 버튼을 자유롭게 만들 수 있다.

Stroke 을 이용한 외곽선 버튼 

struct ContentView: View {
    var body: some View {
        VStack {
            Button(action: {
                print("Share My Score")
            }, label: {
                Text("Mint Button")
                    .fontWeight(.bold)
                    .font(.largeTitle)
                    .padding()
                    .background(Color.mint)
                    .cornerRadius(40)
                    .foregroundColor(.white)
                    .padding(10)
                    .overlay(
                        RoundedRectangle(cornerRadius: 40)
                            .stroke(Color.mint, lineWidth: 3)
                    )
            })
        }
    }
}

 

Shadow를 이용한 깔끔한 스타일의 버튼

struct ContentView: View {
    var body: some View {
        VStack {
            Button(action: {
                print("Share My Score")
            }, label: {
                Text("세미나 등록하기")
                        .foregroundColor(.mint)
                        .frame(width: 200)
                        .padding()
                        .background(
                            RoundedRectangle(cornerRadius: 30)
                                .fill(Color.white)
                                .shadow(color: .gray, radius: 2, x: 0, y: 2)
                    )
                    .padding()
            })
        }
    }
}

 

요즘 자주 눈에 띄는 뉴로모픽, 뉴로모피즘(neromophic, neuromophism) 버튼, 이건 뭐 버튼이라기 보다는 버튼 뒤 글자의 배경에 가깝지만, ZStack 에 onTapGesture를 넣는게 좀 더 버튼 기능에 가까울 것 같다.

// 헥스코드 칼라를 xcassets 에 컬러셋에 등록해서 사용하면됨
struct ContentView: View {
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 20)
                .fill(Color("Background")) // #DEEAF6
                .frame(width: 200, height: 50)
                .shadow(color: Color("LightShadow"), radius: 8, x: -8, y: -8) // #F3F9FF
                .shadow(color: Color("DarkShadow"), radius: 8, x: 8, y: 8) // #BECBD8
            Button(action: {
                print("Share My Score")
            }, label: {
                Text("세미나 등록하기")
            })
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color("Background"))
    }
}