画像をボタンとして作成する方法

この記事では、SwiftUIを使用して、画像をボタンとして表示する方法について解説します。

画像ボタンの基本
1. ステップ 1：必要な画像の準備
2. ステップ 2：画像ボタンの作成
画像ボタンのカスタマイズ
まとめ

画像ボタンの基本

SwiftUIでは、Buttonコンポーネントに画像を組み込むことで、視覚的に魅力的な画像ボタンを作成できます。以下の手順に従って、画像ボタンを作成してみましょう。

ステップ 1：必要な画像の準備

まず、ボタンに使用する画像をプロジェクトのアセットカタログに追加します。
Xcodeのアセットカタログで、画像ファイルをドラッグアンドドロップして追加できます。

画像の取り込み方についての詳細は以下を参考にしてください。

画像をプロジェクトへ取り込む方法と表示方法

SwiftUIでは、画像を表示するための便利なコンポーネントが提供されています。ここでは、画像を表示するための基本的な手法とそのカスタマイズ方法について解説します。使用する画像のプロジェクトへの取り込みサイドメニューから「Assets」を選...

ステップ 2：画像ボタンの作成

Button コンポーネントを使用して、ボタンのアクションと表示内容（この場合は画像）を定義します。

import SwiftUI

struct ImgBtnSmpView: View {
    @State private var btnTapped = 0
    var body: some View {
        Button(action: {
            // ボタンがタップされた時のアクション
            btnTapped += 1
            print("画像ボタンがタップされました")
        }) {
            Image("btnsimple2") // ここに画像の名前を指定
                .resizable()
                .scaledToFit()
                .frame(width: 100, height: 100)
        }
        Text("タップした回数：\(btnTapped)")
    }
}

このコードでは、Image("buttonImage") で指定した画像をボタンのビューとして使用しています。.resizable()、.scaledToFit()、.frame() モディファイアを適用することで、画像のサイズと表示方法を調整できます。

画像ボタンのカスタマイズ

画像ボタンは、さらにカスタマイズすることが可能です。例えば、ボタンに影を追加したり、角を丸くしたりすることができます。

import SwiftUI

struct ImgBtnSmpView: View {
    @State private var btnTapped = 0
    var body: some View {
        Button(action: {
            // ボタンがタップされた時のアクション
            btnTapped += 1
            print("画像ボタンがタップされました")
        }) {
            Image("btnsimple2") // ここに画像の名前を指定
                .resizable()
                .scaledToFit()
                .frame(width: 100, height: 100)
                .cornerRadius(20)//角を丸くする
                .shadow(radius: 10)//影を追加
        }
        Text("タップした回数：\(btnTapped)")
    }
}