Cocoa練習帳

iOSではシステム準拠の画面遷移が容易に実装できるよう、基本的な画面遷移を実装するためのフレームワークが用意されいてる。

代表的なものを挙げると、以下の通り。

_ ナビゲーションインターフェイス

一方向へ階層構造で画面が遷移するもので、ヘッダー部に前の画面に戻るための方法が用意されている。

_ タブ・バー・インターフェイス

異なる系統の画面への切り替わるもの。

_ モーダル表示

今ある画面に覆いかぶさるように他の画面が表示されるもので、基本的に、元の画面に戻るもの。

この画面遷移を簡素なSwiftUIのコードで実装してみることにした。

アプリ本体のクラスは、テンプレートから作成されたもののまま。

import SwiftUI
 
@main
struct DemoApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

_ ナビゲーションインターフェイス

トップのテーブルの項目をタップすると詳細画面に遷移する。詳細画面からトップのテーブルにはヘッダーの戻るをタップすれば遷移する。

import SwiftUI
 
struct DetailView: View {
    var body: some View {
        Text("Detail View")
    }
}
 
struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink {
                    DetailView()
                } label: {
                    Text("List 01")
                }
                NavigationLink {
                    DetailView()
                } label: {
                    Text("List 02")
                }
            }
            .navigationBarTitle("ナビゲーション")
        }
    }
}
 
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

_ タブ・バー・インターフェイス

下部に4つのタブが表示されていて、タップすると画面が切り替わる。

import SwiftUI
 
struct DetailView: View {
    var body: some View {
        Text("Detail View: \(Date())")
    }
}
 
struct ContentView: View {
    var body: some View {
        TabView {
            DetailView()
                .tabItem {
                    Text("Tab 01")
                }
            DetailView()
                .tabItem {
                    Text("Tab 02")
                }
            DetailView()
                .tabItem {
                    Text("Tab 03")
                }
            DetailView()
                .tabItem {
                    Text("Tab 04")
                }
        }
    }
}
 
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

_ モーダル表示

中央のボタンをタップするとシートが表示される。シートの中央にもボタンがあるのでタップすると閉じて元の画面に戻る。

import SwiftUI
 
struct SheetView: View {
    @Binding var isShowingSheet: Bool
    var body: some View {
        Button {
            self.isShowingSheet = false
        } label: {
            Text("Close")
        }
    }
}
 
struct ContentView: View {
    @State private var isShowingSettingsSheet: Bool = false
    var body: some View {
        Button(action: {
            self.isShowingSettingsSheet = true
        }) {
            Text("Open SheetView")
        }
        .sheet(isPresented: $isShowingSettingsSheet) {
            SheetView(isShowingSheet: self.$isShowingSettingsSheet)
        }
    }
}
 
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

_ 【関連情報】