Apple Vision Pro (visionOS) の 子Viewの背景を設定する  | 技術ブログ | 株式会社OnePlanet 読み込まれました

Apple Vision Pro (visionOS) の 子Viewの背景を設定する

はじめに

子Viewの背景のマテリアルを設定して親Viewと識別する方法について説明します。

Apple Vision Pro について

Apple Vision Pro について、以下の記事にまとめてます。


App.swift

import SwiftUI

@main
struct SampleApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

デフォルトのまま変更なし。

StatsGrid.swift

import SwiftUI

struct StatsGrid: View {
    var body: some View {
        Grid(alignment: .leading, horizontalSpacing: 50, verticalSpacing: 10) {
            GridRow() {
                GridRow() {
                    Text("Oribital peroid").fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
                    Text("365.26 days").fontWeight(.light)
                }
                GridRow {
                    Text("Oribital speed").fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
                    Text("29.8 km/s").fontWeight(.light)
                }
                GridRow {
                    Text("Mass").fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
                    Text("5.9 x 10kg").fontWeight(.light).multilineTextAlignment(.trailing)
                }
            }
            GridRow {
                GridRow {
                    Text("Surface temperature").fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
                    Text("-89-57℃").fontWeight(.light)
                }
                GridRow {
                    Text("Equatorial radius").fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
                    Text("6,378km").fontWeight(.light)
                }
                GridRow {
                    Text("Age").fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
                    Text("4.5 billion years").fontWeight(.light)
                }
            }
        }
    }
}

6列2行のGridRowのStatsGridというViewを新規作成します。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Stats").font(.title)
            StatsGrid().padding()
            StatsGrid().padding().background(.regularMaterial, in: .rect(cornerRadius: 12))
            StatsGrid().padding().background(.thinMaterial, in: .rect(cornerRadius: 12))
            StatsGrid().padding().background(.thickMaterial, in: .rect(cornerRadius: 12))
            StatsGrid().padding().background(.ultraThinMaterial, in: .rect(cornerRadius: 12))
            StatsGrid().padding().background(.ultraThickMaterial, in: .rect(cornerRadius: 12))
        }
    }
}

StatsGridを6個分表示します。一番上はbackground未設定なため、Glassマテリアルと同化してみえます。二番目以降はbackgroundを設定。backgroundを設定することでWindowのGlassマテリアルと識別できるようになります。


実行

一番上のStatsGridはWindowと同化しているように見えますが、二番目以降はbackgroudで指定したマテリアルが反映され、識別できるようになりました。

XR エンジニア

徳山 禎男

SIerとして金融や飲料系など様々な大規模プロジェクトに参画後、2020年にOnePlanetに入社。ARグラスを中心とした最先端のAR技術のR&Dや、法人顧客への技術提供を担当。過去にMagic Leap 公式アンバサダーを歴任。

View More

お問い合わせ・ご相談

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

お問い合わせ