概要

Spacerを設置した時に、Spacerをクリックしたら動作するButtonを作成したかったのですが、SpacerにGestureの設定ができないため見えない透明なButtonが必要でした。

以下のようなアプリを作成してました。

真ん中の何もないところを推したら動作するAnimationを考えていました。

期待通りの動作を行うために透明なタッチ可能なViewを実装し、それをZStackで重ねて実装をしました。

環境

Xcode : 14.3

Swift : 5.8

SwiftUIを使用

実装方法

Button を使う

Button(action: {
	print("Button Clicked")
}) {
 Text("LIGHT")
    .padding()
    .frame(width: 400,height: 400)
    .background(Color.clear) // 透明な背景
    .foregroundColor(Color.clear) // テキストの色
    .cornerRadius(10)
}

テキストは、なんでも大丈夫です。

Frame で当たり判定を決め、背景色と、文字の色を透明にします。

Button(action: {
	print("Button Clicked")
}) {
  Text("LIGHT")
      .padding()
      .frame(width: 400,height: 400)
      .background(Color.blue) // 透明な背景
      .foregroundColor(Color.clear) // テキストの色
      .cornerRadius(10)
      .opacity(0.5)
}

実際に適応する場合には、Opacity などを調整してどこら辺が適応されるのか確認することをお勧めします。

今回の場合だと、他に設置するViewもなかったため大きめに設定しました。

onTapGesture を使う

Color.clear.contentShape(Rectangle())
    .frame(width:400,height: 400)
    .onTapGesture {
			print("Button Clicked")
    }

Buttonを設置せずに、透明な四角形を配置し、onTapGestureでタップ可能にする方法もあります。

先ほどの実装結果と同じです。

行けそうだけど行けない方法

hidden()を使う

いけそうですが、Buttonなどが非表示になる同様、タップ可能領域も非表示になり結果として操作できなくなります。

opacity(0)を使う

上記同様、操作できなくなります。

まとめ

見えない透明なボタンはあまり需要はないように思われますが、周りに動きやアニメーションをつければとても重要なViewとなると考えています。他にも実装方法あればコメントなどでおしえてください。

いいね、ブックマーク、フォローしていただけると勉強の励みになりますので是非お願いします。😉

追伸　--

Twitterで日々の学習風景を投稿してます。

@Ren_yello

参考にさせていただいたサイト様

【SwiftUI】見えないボタンを作ってみる – .NET ゆる〜りワーク

Tap Action not working when Color is clear SwiftUI