Swift・SwiftUI

【SwiftUI】画像ボタンの作り方

今回は、SwiftUI で画像をボタンとして機能させる方法についてです（久しぶりに比較的シンプルな題材となりました）。

やり方には２通りあります。

  • Button の要素を Image にする
  • Image に onTapGesture アクションを設定する

それでは順番に見ていきましょう。

【SwiftUI】画像ボタンの作り方

(1) Button の要素を Image にする

struct ContentView: View {
    
    @State private var isFavorite = false
    
    var body: some View {
        VStack {
            Button(action: {
                self.isFavorite.toggle()
            }) {
                if isFavorite {
                    Image("icon_favorite_active").renderingMode(.original)
                } else {
                    Image("icon_favorite_inactive").renderingMode(.original)
                }
            }
        }
    }
}

シンプルに Button の要素（Content）に Image を設定する方法です。

注意点として Image の renderingMode に .original を指定しないとText を設定した場合と同じで、以下のように表示がアクセントカラーになってしまいます。

Image(“アイコン名”).renderingMode(.original) とすることで元画像のカラーが適用されます。

(2) Image に onTapGesture を設定する

struct ContentView: View {
    
    @State private var isFavorite = false
    
    var body: some View {
        VStack {
            if isFavorite {
                Image("icon_favorite_active").onTapGesture {
                    self.isFavorite.toggle()
                }
            } else {
                Image("icon_favorite_inactive").onTapGesture {
                    self.isFavorite.toggle()
                }
            }
        }
    }
}

Image の宣言の後に、.onTapGesture を定義すればタップ時に任意の処理を実行できます。

ただし、この方法だとタップした時にハイライトが発生しません。

押した感じを表現したい場合は Button を使った方法で対応しましょう。

以上

参考記事

SwiftUIで画像(UIImage)を表示する方法【SwiftUI入門】
【SwiftUI】overlay で画像にテキストを重ねる方法