2023/9/25
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