2019-11-27

SwiftUI NavigationView の Push/Pop をコードで実行する

SwiftUI の NavigationView の Push（進む）と Pop（戻る）をユーザのアクションではなく、コードで（pragmatically）実行する調査をしたサンプル。

サンプルはボタンアクションで Push/Pop するが、この調査結果により、コードで Push/Pop 実行できることが可能と分かった。

Push する方

NavigationLink の isActive を false -> true にして、次の画面へ行く

struct ContentView: View {
    @State private var navigationLinkIsActive = false
    
    var body: some View {
        NavigationView() {
            VStack {
                Button(action: {
                    self.navigationLinkIsActive = true
                }, label: {
                    Text("Push")
                })
                
                NavigationLink(destination: SubView(),
                               isActive: $navigationLinkIsActive,
                               label: {
                    EmptyView()
                })
            }
        }
        .navigationBarBackButtonHidden(true)
    }
}

Pop する方

presentationMode を使用する

import SwiftUI

struct SubView: View {
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        VStack {
            Button(action: {
                self.presentationMode.wrappedValue.dismiss()
            }, label: {
                Text("Pop")
            })
        }
        .navigationBarBackButtonHidden(true)
    }
}

2019-11-27

SwiftUI NavigationLink の有効/無効を切り替える

プログラミング

SwiftUI で NavigationLink の有効/無効の切替サンプルを作った。

ざっくりいうと

NavigationLink は hidden にしておいて直接操作させず、代わりに Button のアクションを一枚噛ませて NavigationLink がアクションする、という流れにするとできた。

NavigationLink の $isActive を初期は false にしておいて、ボタンのタッチ後に true すると NavigationLink の画面遷移が動作するが、そのボタンのタッチで true にするかどうかをここでは Toggle で切替して試している。

コードはこんな感じになる。

import SwiftUI

struct ContentView: View {
    
    @State var switchState: Bool = false
    @State var showsAlert = false
    @State var pushActive = false
    
    var body: some View {
        NavigationView {
            VStack {
                
                Toggle(isOn: $switchState) {
                    Text("Enable NavigationLink")
                }.frame(width: 260)
                
                Spacer().frame(height: 20)
                
                Button(action: {
                    guard self.switchState else {
                        self.showsAlert = true
                        return
                    }
                    
                    self.pushActive = true
                }) {
                    Text("Next")
                }
                .alert(isPresented: self.$showsAlert) {
                    Alert(title: Text("Switch is disable."))
                }
                
                NavigationLink(destination: ContentView2(),
                               isActive: self.$pushActive) {
                    EmptyView()
                }.hidden()

                Spacer().frame(height: 32)
            }
            .padding()
            .navigationBarTitle(Text("Index"))
            .navigationBarHidden(false)
            
        }
    }
}

2019-11-25

SwiftUI KeyboardObserving を使用して TextField がキーボードに隠れる問題に対応する

プログラミング

入力したい TextField にタッチする→表示されたキーボードにより TextField が隠れる→入力しづらい

という問題。

これは Objective-C 時代からあり、よく対処されてきた問題なのだが SwiftUI の場合は、
GitHub にある KeyboardObserving という OSS で対応できそうだ。

デモ動作はこんなかんじ。

導入のしかた

CocoaPods / Swift Package Manager に対応している。

Xcode を使用して [Project]->[Swift Packages] から登録すると楽だろう。

導入が終わったあとは

import KeyboardObserving

して

struct YourView: View {

  var body: some View {
    VStack {
      // Your Content Here
    }
    .keyboardObserving()
  }
}

こんな感じに .keyboardObserving() を Superview に追加することで完了。

これで動作を試すと、キーボードの上に TextField が来るように自動で調整される。
とても簡単に導入できた、すごい。

ちなみに Keyboard KeyboardObservingView というクラスを使う方法もあるらしく、くわしくはプロジェクトの README を参照すること。

2019-11-25

SwiftUI ビュー内に直接配置するビューが多くてビルドエラーになる場合

プログラミング

現象

Xcode 10.15.1 / Swift 5.1.2

ドキュメントのどこに記載があるかは不明だが SwiftUI でビュー内に配置できるサブビューは 10 個までのようだ。

たとえば

struct ContentView: View {
    var body: some View {
        VStack {
            Text("1")
            Text("2")
            Text("3")
            Text("4")
            Text("5")
            Text("6")
            Text("7")
            Text("8")
            Text("9")
            Text("10")
            // Text("11")
        }
    }
}

上記のコードでは Text ビューを 10 個配置していてビルドができる状態である。

しかし、コメントアウトされている Text("11") を有効にして 11 個ビューを配置しようとすると、ビルドエラーになる。

厄介なのが、この時に出力されるビルドエラーは、直接的にビューの限度数について示したものではないから、この制約に気付きにくい。

例えば以下のエラーが出ることを確認した。ここからビュー数の制限に気付くのは不自然である。

'Int' is not convertible to 'CGFloat?'

Argument passed to call that takes no arguments

回避方法

1. ビューごとにまとめる

ビューをグルーピングして、ひとつのビューに直接配置するビューを減らす。

struct ContentView: View {
    var body: some View {
        VStack {
            Group {
                Text("1")
                Text("2")
                Text("3")
                Text("4")
                Text("5")
            }
            
            VStack {
                Text("6")
                Text("7")
                Text("8")
                Text("9")
                Text("10")
            }
            Text("11")
        }
    }
}

2. ForEach を使用する

ForEach を使った記述で、直接配置する方法を避ける。

struct ContentView: View {
    var body: some View {
        VStack {
            ForEach(1..<12) { i in
                Text("\(i)")
            }
        }
    }
}