【SwiftUI】四角ボタン、角丸ボタン、丸ボタンの実装方法

今回はSwiftUIで様々な形のボタンを実装する方法を紹介します。

ボタンは用途や配置場所によって様々な形に変形させて使用する必要があります。
そこで今回はボタンの形を四角、丸、角丸に変形するコードと実際の画面をお見せします。

四角ボタン
角丸ボタン
丸ボタン
まとめ
SwiftUI勉強中の方へ

四角ボタン

基本的な四角いボタンのコードとスクリーンショットです。

ボタンの塗りつぶしと囲い線のバージョンがあるので、こちらもデザインに合わせて使い分けましょう。

struct ContentView: View {
    var body: some View {
            HStack {
                Button(action: {
                    print("Button")
                }) {
                    Text("Button")
                        .bold()
                        .padding()
                        .frame(width: 100, height: 50)
                        .foregroundColor(Color.white)
                        .background(Color.red)
                }
                Button(action: {
                    print("Button")
                }) {
                    Text("Button")
                        .bold()
                        .padding()
                        .frame(width: 100, height: 50)
                        .foregroundColor(Color.black)
                        .border(Color.red, width: 3)
                }
            }
    }
}

角丸ボタン

次は角丸ボタンについてです。

角丸は角の丸め具合を数値で指定しますので、その使い方を覚えて好みの丸みを実装しましょう。

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Button(action: {
                    print("Button")
                }) {
                    Text("Button")
                        .bold()
                        .padding()
                        .frame(width: 100, height: 50)
                        .foregroundColor(Color.white)
                        .background(Color.purple)
                        .cornerRadius(10)
                }
                Button(action: {
                    print("Button")
                }) {
                    Text("Button")
                        .bold()
                        .padding()
                        .frame(width: 100, height: 50)
                        .foregroundColor(Color.black)
                        .overlay(
                            RoundedRectangle(cornerRadius: 10)
                                .stroke(Color.purple, lineWidth: 3)
                        )
                }
            }
            HStack {
                Button(action: {
                    print("Button")
                }) {
                    Text("Button")
                        .bold()
                        .padding()
                        .frame(width: 100, height: 50)
                        .foregroundColor(Color.white)
                        .background(Color.blue)
                        .cornerRadius(25)
                }
                Button(action: {
                    print("Button")
                }) {
                    Text("Button")
                        .bold()
                        .padding()
                        .frame(width: 100, height: 50)
                        .foregroundColor(Color.black)
                        .overlay(
                            RoundedRectangle(cornerRadius: 25)
                                .stroke(Color.blue, lineWidth: 3)
                        )
                }
            }
        }
    }
}

丸ボタン

次は丸いボタンです。

丸いボタンはアイコンを使用する場合が多いと思いますので、画像を丸く囲ったボタンの実装方法を紹介します。

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Button(action: {
                    print("Button")
                }) {
                    Text("Button")
                        .bold()
                        .padding()
                        .frame(width: 100, height: 100)
                        .foregroundColor(Color.white)
                        .background(Color.yellow)
                        .clipShape(Circle())
                }
                Button(action: {
                    print("Button")
                }) {
                    Text("Button")
                        .bold()
                        .padding()
                        .frame(width: 100, height: 100)
                        .foregroundColor(Color.black)
                        .overlay(
                            Circle()
                                .stroke(Color.yellow, lineWidth: 3)
                        )
                }
            }
            HStack {
                Button(action: {
                    print("Button")
                }) {
                    Image(systemName: "pencil")
                        .padding()
                        .frame(width: 100, height: 100)
                        .imageScale(.large)
                        .foregroundColor(Color.white)
                        .background(Color.green)
                        .clipShape(Circle())
                }
                Button(action: {
                    print("Button")
                }) {
                    Image(systemName: "pencil")
                        .padding()
                        .frame(width: 100, height: 100)
                        .imageScale(.large)
                        .foregroundColor(Color.black)
                        .overlay(
                            Circle()
                                .stroke(Color.green, lineWidth: 3)
                        )
                }
            }
        }
    }
}