dasukoの技術ブログ

現役エンジニアのブログです。

【SwiftUI】Buttonの使い方

はじめに

今回はSwiftUIのButtonの使い方について説明します。

Buttonはその名の通りボタンを表示します。

struct Button<Label> where Label : View

 

 

ちなみにSwiftUIの導入方法についてはこちらで説明しています。

dasuko.hatenadiary.jp

 

テキストのAlignmentについてはこちらで解説しています。

dasuko.hatenadiary.jp

  VStackHStackについてはこちらを見てみてください!

dasuko.hatenadiary.jp

簡単な使い方

第一引数にラベルを指定して、第二引数にボタンが押されたときのアクションを指定してボタンを作成してみます。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button("Button") {
            print("Button was pressed.")
        }
    }
}

 

プレビューは以下のようになります。

f:id:dasuko:20210301213002p:plain

 

ボタンを押したときのアクションは、こんな感じでメソッドを指定することもできます。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button("Button", action: buttonPressed)
    }
    
    func buttonPressed() {
        print("Button was pressed")
    }
}

Buttonにはテキストだけでなく、labelを指定することも可能です。

以下のようにImageTextを適用してみます。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button(action: {
            print("Button was pressed")
        }, label: {
            Image(systemName: "play")
            Text("Play")
        })
    }
}

 

プレビューは以下のようになります。f:id:dasuko:20210301220758p:plain

ButtonStyleの指定

DefaultButtonStyle

デフォルトのボタンスタイルを適用します。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button("Button", action: {
            print("Button was pressed")
        })
        .buttonStyle(DefaultButtonStyle())
    }
}

 

プレビューは以下のようになります。

gyazo.com

PainButtonStyle

特に色や枠線などの装飾のないシンプルなボタンです。

ボタンを押された時やフォーカスされた状態を示す視覚効果を適用できます。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button("Button", action: {
            print("Button was pressed")
        })
        .buttonStyle(PlainButtonStyle())
    }
}

 

プレビューは以下のようになります。

gyazo.com

BorderlessButtonStyle

枠線のないボタンです。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button("Button", action: {
            print("Button was pressed")
        })
        .buttonStyle(BorderlessButtonStyle())
    }
}

 

プレビューは以下のようになります。

gyazo.com

枠線の指定

border()の引数にColorを指定するとその色の枠線をボタンに適用できます。

赤色の枠線を適用する場合は以下のようにColor.redを指定します。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button("Button", action: {
            print("Button was pressed")
        })
        .border(Color.red)
    }
}

 

プレビューは以下のようになります。

f:id:dasuko:20210301221208p:plain

 

以下のように枠線の幅を指定することもできます。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button("Button", action: {
            print("Button was pressed")
        })
        .frame(width: 300, height: 100, alignment: .center)
        .border(Color.black, width: 20)
    }
}

 

プレビューは以下のようになります。

f:id:dasuko:20210301221415p:plain

文字・ボタンサイズの指定

frameを指定することによりサイズを指定します。

以下のようにfontを指定することにより文字サイズを変更できます。

詳しくはこちら。

dasuko.hatenadiary.jp

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button("Button", action: {
            print("Button was pressed")
        })
        .font(.title)
        .frame(width: 300, height: 100, alignment: .center)
        .border(Color.black, width: 1)
    }
}

 

プレビューは以下のようになります。

f:id:dasuko:20210301221752p:plain

文字カラーの指定

foregroundColorを指定することにより、文字カラーを変更することができます。

文字色を緑色にしたい場合はColor.greenを指定します。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button("Button", action: {
            print("Button was pressed")
        })
        .font(.title)
        .frame(width: 300, height: 100, alignment: .center)
        .foregroundColor(.green)
        .border(Color.black, width: 1)
    }
}

 

プレビューは以下のようになります。

f:id:dasuko:20210301222335p:plain

ボタンの背景色の指定

backgroundを指定することにより、背景の色を指定したり、Viewを適用したりすることができます。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button("Button", action: {
            print("Button was pressed")
        })
        .font(.title)
        .frame(width: 300, height: 100, alignment: .center)
        .background(Color.red)
        .border(Color.black, width: 1)
    }
}

 

プレビューは以下のようになります。

f:id:dasuko:20210301222013p:plain

ボタンの角を丸くする

cornerRadiusを指定することにより、ボタンの角を丸くすることができます。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button(action: {}, label: {
            Text("Button")
        })
        .foregroundColor(Color.white)
        .padding()
        .background(Color.blue)
        .cornerRadius(100)
        .frame(width: 300, height: 100, alignment: .center)
    }
}

 

プレビューは以下のようになります。

f:id:dasuko:20210301223942p:plain

最後に

参考になったという方や、ここ間違っているよ!という方は

ぜひコメントしていただけると嬉しいです!!!!

 

SwiftUIを一から極めたいという人は本を買ってみるといいかも!

SwiftUIを本気でやろうとしていない人にはお勧めしません。

 

 

参考

Apple Developer Documentation