28
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

SwiftUIのButtonでテキストのみ、テキスト+画像のボタンを作る

Posted at

一般的なButtonの作り方

Xcodeの保管で出てくるButtonのイニシャライザは下記のもので、
1つ目の引数にaction
2つ目の引数に表示するテキスト
を指定します。

public init(action: @escaping () -> Void, @ViewBuilder label: () -> Label)
Button(action: {
    // action
}) {
    Text("Button")
}

テキストのみのButtonの作り方

Xcodeの保管では出てこないのですが、テキストのみのボタンの場合上記のイニシャライザを使わずに作ることができます。

Button("Button") {
    // action
}

このようになります。
少しスッキリ書けますね!

テキスト+画像のButtonの作り方

テキストと画像を使うボタンの場合は最初に記載したイニシャライザを使います。

Button(action: {
    // action
}) {
    HStack {
        Image(systemName: "suit.heart.fill")
        Text("Button")
    }
}

スクリーンショット 2019-09-13 12.03.47.png

横並びにする場合はHStackを使ってImageとTextを指定します。

縦並びの場合はHStackのところをVStackにするだけで縦並びになります。

Button(action: {
    // action
}) {
    VStack {
        Image(systemName: "suit.heart.fill")
        Text("Button")
    }
}

スクリーンショット 2019-09-13 12.06.55.png

テキストカラーの指定

テキストカラーの指定には

@inlinable public func accentColor(_ accentColor: Color?) -> some View

を使います。

Button(action: {
    // action
}) {
    VStack {
        Image(systemName: "suit.heart.fill")
        Text("Button")
    }
}.accentColor(.red)

スクリーンショット 2019-09-13 12.11.47.png

画像だけ別の色にする場合は中のImageに別のカラーを指定します。

Button(action: {
    // action
}) {
    VStack {
        Image(systemName: "suit.heart.fill").foregroundColor(.orange)
        Text("Button")
    }
}.accentColor(.red)

スクリーンショット 2019-09-13 12.25.42.png

中のViewに対してforegroundColorを指定してもカラーの変更ができるので、
全て同じ色の場合はButtonのaccentColor
それぞれ別の色の場合はButtonの中のViewにforegroundColorを指定するような感じになるかと思います。

Buttonのサイズを指定した場合のタップ範囲について

Buttonのサイズを指定する場合

Button(action: {
    // action
}) {
    VStack {
        Image(systemName: "suit.heart.fill")
        .foregroundColor(.orange)
        Text("Button")
    }.background(Color.blue)
}
.accentColor(.red)
.frame(width: 100, height: 100)
.background(Color.green)

このようにButtonに対してframeを指定してしまうと
スクリーンショット 2019-09-13 12.35.21.png

タップが有効な範囲は青色の部分だけになってしまいます。

Buttonのサイズを変える場合は、中のViewに対してframeを指定しましょう。

Button(action: {
    // action
}) {
    VStack {
        Image(systemName: "suit.heart.fill")
        .foregroundColor(.orange)
        Text("Button")
    }.frame(width: 100, height: 100)
}
.accentColor(.red)
.background(Color.green)

スクリーンショット 2019-09-13 12.40.29.png

こうすると緑の範囲が全てタップ有効になります。

28
19
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?