2023/9/26
Apple Vision Pro (visionOS) でButtonStyleを使用したButtonのフォーカスが当たる状態にする方法
はじめに
SwiftUIのButtonに独自のButtonStyleを使用した場合、Buttonに視線を向けてもフォーカスは当たりません。
ButtonStyleを指定していないButtonであれば、視線を向けるとフォーカスが当たった状態となります。
今回、独自のButtonStyleを使用した時でも視線を向けると、フォーカスが当たるようにする方法を説明します。
Apple Vision Pro について
Apple Vision Pro について、以下の記事にまとめてます。
App.swift
import SwiftUI
@main
struct SampleApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
デフォルトのまま変更なし。
ContentView.swift
import SwiftUI
struct ContentView: View {
var body: some View {
Button(action: {
print("tap buton")
}) {
Text("Button")
.frame(maxWidth: .infinity, minHeight: 30)
}.buttonStyle(CustomButtonStyle())
Button("Button1", action: {})
.buttonStyle(CustomButtonStyle())
Button("Button2", action: {})
Button("Button3", action: {})
}
}
Buttonを4つ配置してます。上2つのButtonはCustomButtonStyleというbuttonStyleを指定しています。
CustomButtonStyle.swift
import SwiftUI
struct CustomButtonStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
.padding()
.background(configuration.isPressed ? Color.red : Color.blue, in: .rect(cornerRadius: 12))
.foregroundColor(.white)
.font(.body.bold())
.clipShape(Capsule())
.scaleEffect(configuration.isPressed ? 0.75 : 1)
.animation(/*@START_MENU_TOKEN@*/.easeIn/*@END_MENU_TOKEN@*/, value: 0.75)
.shadow(color: Color.white, radius: 10, x: 0, y: 0)
.opacity(configuration.isPressed ? 0.4 : 1)
.hoverEffect()
}
}
色々と設定していますが、フォーカスを当てるようにする設定は一番下にあるhoverEffect()を設定することでフォーカスが当たるようになります。
実行
前半はhoverEffect()を設定していないの動画で、後半がhoverEffect()を設定している動画になります。後半の動画では、ButtonStyleが設定されたButtonに対してフォーカスが当たっていることが確認できます。
XR エンジニア
徳山 禎男
SIerとして金融や飲料系など様々な大規模プロジェクトに参画後、2020年にOnePlanetに入社。ARグラスを中心とした最先端のAR技術のR&Dや、法人顧客への技術提供を担当。過去にMagic Leap 公式アンバサダーを歴任。
View More