4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[SwiftUI memo] Modal Push以外での画面の切り替えをアニメーションする (ルーティングなど)

Posted at

何らかの状態に合わせて表示する画面を丸ごと切り替えを行いたい場合にアニメーションをするには?というテーマです。

例えば、ログイン状態とログアウト状態で画面を切り替える時など。

ZStackの中で、if文で頑張っても良いのですが、switch-caseが使えないなどの制限された状況では条件分岐に限界が来ると思ったので、別の方法を考えていました。

最初に思いついたのが次のようなViewです。

struct FragmentView: View {
  
  let content: AnyView
  
  init(factory: () -> AnyView) {
    self.content = factory()
  }
  
  var body: some View {
    content
  }
}

次のように使います。
FunctionBuilerから逃げているので、表示したいViewをreturnする必要があります。

var body: some View {
  FragmentView {
    switch ... {
    case ...: return AnyView(...)
    case ...: return AnyView(...)
  }
}

これで表示する画面を切り替えることには成功していたのですが、アニメーションがうまいこといきませんでした。

例えば次のようなコードです

var body: some View {
  FragmentView {
    switch ... {
    case ...: return AnyView(...)
    case ...: return AnyView(...)
  }
  .transition(.opacity)
  .animation(.easeInOut)
}

推測ですが、SwiftUI側でうまく差分が出せないことによってtransitionが動作しなかったのかも?

そこで、ForEachを利用して同じような実装を行ってみます。

struct ContainerView: View {
  
  var views: [AnyView] = []
  
  init(make: (inout [AnyView]) -> Void) {
    make(&views)
  }
  
  var body: some View {
    ZStack {
      ForEach(views.indices) { i in 
        views[i]
      }
    }
  }
  
}

状態に合わせて表示したいViewをviewsにappendします。

struct RootView: View {
  
  @EnvironmentObject var rootStore: RootStore
  
  var body: some View {
        
    ContainerView { views in
      switch rootStore.state.loginState {
      case .loggedOut(let state):
        views.append(AnyView(LoggedOut(...)))
      case .loggedIn(let state):
        views.append(AnyView(LoggedIn(...)))
      }
    }
    .transition(.opacity)
    .animation(.easeInOut)
    
  }
}

これで一応loggedOutからloggedInに切り替わる際にフェードで遷移するようになりました。

このアプローチによるメリットは、パターンの数に限界がないことです。
ZStack, VStackなどでは持てるViewの数は10個が最大値となっています。(TupleViewの解析が10個まで。)

他に良い方法あるかな?

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?