Apple Vision Pro (visionOS) でButtonStyleを使用したButtonのフォーカスが当たる状態にする方法  | 技術ブログ | 株式会社OnePlanet 読み込まれました

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

お問い合わせ・ご相談

ARでやってみたいことやお困りごとなど
お気軽にお問い合わせください。

お問い合わせ