MasterView と DetailView#

ソースコードが肥大化したときにわかりにくくなるので、MasterView と DetailView の二つを作成して見やすくします。

struct MasterView: View {
    var body: some View {
        NavigationLink(
            destination: Text("Detail"),
            label: {
                Text("Navigate")
            })
            .navigationTitle("Nav")
    }
}

struct DetailView: View {
    var body: some View {
        Text("Detail View")
    }
}

完成させたい UI#

目標としては iOS の標準の設定アプリのようなものですが、それを更に拡張したものとなります。

具体的には iPad と iPhone で表示方式を切り替えられるようにします。iPhone の方は理想的な動作ができているので、iPad でちゃんと動作させられるようになればよいわけです。

• iPad で SplitView を実現させる
• Portrait と Landscape で同じ UI にする
• 起動直に Master が表示されている
  • ボタンで Master は非表示にできる
• 起動直後に Detail が表示されている
  • Master の表示と非表示で Detail の画面サイズは動的に変化する

MasterView だけ NavigationView に入れる#

でははじめに NavigationView に MasterView を入れてみます

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            MasterView()
        }
    }
}

これは Landscape モードでは問題ありませんが、Portrait モードのときに次の問題が発生します

• 起動直後に MasterView が表示されない
• 起動直後に DetailView が表示されない
• MasterView の表示/非表示で DetailView のサイズが変わらない
  • 常にフルスクリーンのような状態になっている

Master と Detail のどちらも NavigationView に入れる#

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            MasterView()
            DetailView()
        }
    }
}

NavigationLink を入れ子にすると TOP である MasterView が Master として表示され、DetailView が Detail として起動時に表示されるようになりました。

しかし、継続して次の問題が残ります。

• 起動直後に MasterView が表示されない
• MasterView の表示/非表示で DetailView のサイズが変わらない
  • 常にフルスクリーンのような状態になっている

NaviationViewStyle を設定する#

SwiftUI において NavigationView には三つのスタイルが用意されています

• DefaultNavigationViewStyle
• DoubleColumnNavigationViewStyle
• StackNavigationViewStyle

このうち何もしなければ DefaultNavigationViewStyle が適用されます。StackNavigationViewStyle は iPad でも常に iPhone と同じ UI になります。

DoubleColumnNavigationViewStyle に関してはApple 公式のドキュメントにおいてA navigation view style represented by a primary view stack that navigates to a detail view.という説明があります。

これだけではよくわからないので実際に利用してみます。

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            MasterView()
            DetailView()
        }
        .navigationViewStyle(DoubleColumnNavigationViewStyle())
    }
}

が、結果として何も変わりませんでした。iPhone でも iPad でも変わらなかったのでなんの効果があるのかわかりませんでした。

navigationBarHidden#

NavigationBar を非表示にできる.navigationBarHidden()という仕組みがあるのでそれを利用してみます。

.navigationBarHidden()を使うと Navigation の機能は残したまま、各種表示を非表示にできます。

NavigationTitle の適用方法#

iOS14 からは.navigationTitle()が使えます。重要な点としてはこれは NavigationView 内の View に対して使わないと効かないということです。

なので例えば上のようなコードは全く効果がありません。これは.navigationTitle()が NavigationView 自体にかかってしまっているからです。

一つ前の画面に戻る#

ボタンを押すと何らかの処理を実行し、その進行状況を表示するビューに遷移するとします。

処理が終わったあと、もとの画面に戻りたいときにどうすればよいでしょうか。

struct ContentView: View {

    var body: some View {
        NavigationView {
            MasterView()
            DetailView()
        }
    }
}

struct ProgressView: View {

    var body: some View {
        NavigationLink(destination: MasterView()) { Text("Back to MasterView") }
            .navigationTitle("Progress View")
    }
}

struct MasterView: View {

    var body: some View {
        NavigationLink(
            destination: ProgressView(),
            label: {
                Text("Progress Start")
            })
            .navigationTitle("Master")
    }
}

struct DetailView: View {

    var body: some View {
        Text("Initial Detail View")
    }
}

例えば上のようなコードを書いたとします。これは NavigationLink を動作させるたびにどんどんネストが深くなっていくため想定通りの動作をしません。

じゃあどうすればいいのかという話になりますが、presentationMode という標準 Environment を使うと驚くほどに実装できます。変更するのも戻る機能を実装したい View だけなので楽です。

この presentationMode はisPresentedという「NavigationLink から遷移してきたか」という情報を持っており、これを使って動作を切り替えることができます。

struct ProgressView: View {
    @Environment(\.presentationMode) var present

    var body: some View {
        Button(action: {
            present.wrappedValue.dismiss()
        }, label: { Text("Back to MasterView") })
            .navigationTitle("Progress View")
    }
}

注意点としてはwrappedValue.dismiss()は画面の表示を切り替える動作のためメインスレッドで実行する必要があります。DispatchQueue.globalを使う際はDispatchQueue.main.asyncを使うなどして必ずメインスレッドで実行するようにコーディングしましょう。

タップして遷移したい場合#

ボタンとしてタップしたら画面が遷移するような仕様を満たす使い方である。

たとえば、ボタンを押すと DetailView に遷移したい場合は以下のようなコードで実装できる。

struct ProgressView: View {
    var body: some View {
        NavigationLink(destination: DetailView()) { Text("Go to DetailView") }
            .navigationTitle("Progress View")
    }
}

コードから遷移したい場合#

ではボタンを押さず、プログラムが何らかの処理をした結果で自動的に遷移したい場合はどうするか。

それにはisActiveというプロパティがあるのでこれが利用できる。

struct ProgressView: View {
    @State var isActive: Bool = false

    var body: some View {

        Button(action: { isActive.toggle() }, label: { Text("Go to DetailView") })
        NavigationLink(destination: DetailView(), isActive: $isActive) { Text("Go to DetailView") }
            .navigationTitle("Progress View")
    }
}

あらかじめ@Stete で変更をチェックするための変数を確保しておき、それを NavigationLink の isActive プロパティに渡すのである。この場合だと、NavigationLink を直接押しても遷移するし、Button をタップしても isActive の値がフリップして初期状態の false から true に変わり NavigationLink が動作する。

これの問題点とすれば遷移するための NavigationLink を（半分無意味に）書いておかなければいけない点だろう。「コードでもタップでも遷移したい」場合ならこれでよいが、コードでしか遷移したくない場合にタップしたら遷移できてしまう NavigationLink を表示しっぱなしにしておくのは良くない

struct ProgressView: View {
    @State var isActive: Bool = false

    var body: some View {

        Button(action: { isActive.toggle() }, label: { Text("Go to DetailView") })
        NavigationLink(destination: DetailView(), isActive: $isActive) { Text("Go to DetailView") }
            .hidden()
            .navigationTitle("Progress View")
    }
}

のようにhidden()属性をつければ非表示にはなるものの、これは見た目が消えているだけなのでこの View のスペースが消費されていてレイアウトがズレてしまう。

ズレないようにするためには NavigationLink の View としてEmptyView()を指定すればよい。

struct ProgressView: View {
    @State var isActive: Bool = false

    var body: some View {

            Button(action: { isActive.toggle() }, label: { Text("Go to DetailView") })
            NavigationLink(destination: DetailView(), isActive: $isActive) { EmptyView() }
                .navigationTitle("Progress View")
    }
}

これで基本的な場合についてはうまく動作させられるが、ListではたとえEmptyView()であっても検知されて空っぽのカラムが作成されるという問題がある。Listの場合は ZStack で対応するのが良いだろう。

どういう仕様にするか#

登録制のアプリの場合、起動直後に表示したいのはアカウント作成やログインを促す画面である。

そして、このときには SplitView 的な機能はオフであってほしい。そうでないとログインする前から様々な機能にアクセスできることになってしまう。

• ログイン前は SplitView はオフ
  • StackNavigationViewStyle を使えばできる
  • ログイン状態によって NavigationViewStyle を切り替える
• NavigationViewStyle
  • ログイン前は DetailView のみ表示
  • ログイン後は Master を MasterView に表示

引数によって NavigationViewStyle を直接変えることが難しかったので ViewModifier を使って実装することにした。

これを使えば View 簡単に NavigationViewStyle を変更することができる。そのままでも使いやすいのだがいちいち.modifier()を宣言するのが面倒だったので extension を使って更に便利にした。

struct NavigationModifier: ViewModifier {
    let style: Bool

    func body(content: Content) -> some View {
        switch style {
        case true:
            return AnyView(
                content
                .navigationViewStyle(StackNavigationViewStyle())
            )
        case false:
            return AnyView(
                content
                .navigationViewStyle(DoubleColumnNavigationViewStyle())
            )
        }
    }
}

extension View {
    func navigationStyle(style: Bool) -> some View {
        self.modifier(NavigationModifier(style: style))
    }
}

これを使うことでnavigationStyle(style: Bool)で NavigationViewStyle を切り替えられる。

ただ、このままでは StackNavigationViewStyle のときに MasterView が表示されてしまう。

StackNavigationViewStyle の仕様を変えるのは面倒なので、フラグの状態によって Master が MasterView を表示するか DetailView を表示するかを切り替えるのが得策かと思われる。

しかし、そうするなら最初からそうすればいいだけで、ViewModifier はつくらなくて良かったのではないかという気もしてくる。

MasterVeiw#

あまり想定はしていなかったのだがpresentationModeで View が Master かどうかをチェックできるようだ。StackNavigationViewStyle の場合は NavigationView の一つ目の View のpresentationModeが false になるためそこにログインのために必要な View を表示するようにすれば良い。

struct MasterView: View {
    @Environment(\.presentationMode) var present

    var body: some View {
        switch present.wrappedValue.isPresented {
        case true:
            return AnyView(
                NavigationLink(
                    destination: ProgressView(),
                    label: {
                        Text("Progress Start")
                    })
                    .navigationTitle("Master")
            )
        case false:
            return AnyView(LoginView())
        }
    }
}

struct LoginView: View {

    var body: some View {
        Text("Login View")
            .navigationTitle("Login")
    }
}

この View 切り替えの仕組みと先程の ViewModifier を使えば仕様を満たすことができそうだ。

SidebarListStyle#

listStyle としてこれを設定すると、Sidebar として使えるようになる。具体的にはリストをセクションごとに区切って閉じたり開いたりすることができるようになる。ただし、これには問題点があって、初期化の際にすべてのカラムが開けられた状態で表示されてしまう。

つまり、下の方まで見に行こうとしたら上から順番にリストを閉じていかなければならず、余計に手間がかかってしまう。今後のアップデートで改善されるかもしれないが、すぐに使えるような便利な機能ではなさそうだった。

NavigationView で Sidebar を実装する#

NavigationView は iPad であれば三つまで入れることができるのだが、三つ目を入れると一つ目の View を Landscape でも固定することができなくなってしまう。

つまり Apple 公式サイトで紹介されているこのアプリのようなレイアウトをつくることができない。常に Master を表示することができるオプションがあればいいのだが、少し調べた感じでは見つからなかった。

Tabbar + NavigationView#

Apple ではあまり推奨されていないような書き方がされていたが、一応使える。

struct ContentView: View {
    @State var selection = 0

    var body: some View {
        NavigationView {
            List {
                NavigationLink(destination: EmptyView() { Text("EMPTY") }
                NavigationLink(destination: EmptyView() { Text("EMPTY") }
            }
            .navigationTitle("Menu")
            TabView(selection: $selection) {
                EmptyView()
                    .tabItem { Image(systemName: "flame") }.tag(0)
                EmptyView()
                    .tabItem { Image(systemName: "bolt") }.tag(1)
                EmptyView()
                    .tabItem { Image(systemName: "drop") }.tag(2)
            }
        }
    }
}

リストと組み合わせればこういうのも書ける。ただし、この場合だと Detail に TabView が指定されているので NavigationLink を踏むなどして別画面に遷移すると Detail が切り替わるため TabView が消えてしまうことに注意。

NavigationView の方が上位（TabView はあくまでも Detail に対してのみ有効）なので、メニューを表示するとタブの幅は自動的に狭くなる。

PageTabViewStyle#