[SWIFT] À partir d'iOS 14, il ajuste automatiquement le champ de texte à masquer sur le clavier.

introduction

J'ai confirmé l'opération avec Xcode12 et SwiftUI.

Champ de texte iOS 14

Dans le développement d'applications conventionnelles, le comportement suivant se produit souvent sur les écrans avec saisie au clavier, et il était courant de mettre en œuvre comme l'ajustement de la position d'affichage par la hauteur du clavier.

1. TextField est au point
2. Le clavier logiciel s'affiche
3. TextField disparaît car le clavier est affiché

struct ContentView: View {
    @State private var text: String = ""
    
    var body: some View {
        VStack {
            Spacer()
            TextField("input here", text: $text)
                .padding()
        }
    }
}

En réponse à cette situation, iOS 14 ajuste automatiquement l'affichage afin que le TextField que vous tapez apparaisse en dehors de la zone d'affichage du clavier.

C'est un changement très utile, mais il y a certaines choses à garder à l'esprit.

point important

Étant donné que ce comportement d'ajustement automatique n'est effectué que dans iOS14, il est nécessaire d'implémenter vous-même l'implémentation de l'ajustement d'affichage dans iOS13 comme auparavant.

struct ContentView: View {
    @State private var text: String = ""
    @ObservedObject var viewModel = ViewModel()
    
    var body: some View {
        VStack {
            Spacer()
            TextField("input here", text: $text)
                .padding()
                .padding(.bottom, viewModel.bottomPadding)
        }
    }
}

class ViewModel: ObservableObject {
    @Published var bottomPadding: CGFloat = 0.0
    
    init() {
        NotificationCenter.default.addObserver(
            forName: UIResponder.keyboardWillChangeFrameNotification,
            object: nil,
            queue: OperationQueue.main
        ) { [weak self](notification: Notification) -> Void in
            guard let userInfo = notification.userInfo,
                  let keyboardFrame = userInfo[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect else { return }
            withAnimation {
                self?.bottomPadding = keyboardFrame.size.height
            }
        }
    }
}

Cependant, si vous n'êtes pas conscient de la différence de comportement entre les systèmes d'exploitation ici, le TextField se déplacera vers une position non attendue dans iOS 14, comme indiqué ci-dessous.

Par conséquent, lors de la prise en charge d'iOS 13 ou inférieur, il semble nécessaire de mettre en œuvre pour changer le comportement de chaque système d'exploitation.

class ViewModel: ObservableObject {
    @Published var bottomPadding: CGFloat = 0.0

    init() {
        if #available(iOS 14, *) {
        } else {
            NotificationCenter.default.addObserver(
                forName: UIResponder.keyboardWillChangeFrameNotification,
                object: nil,
                queue: OperationQueue.main
            ) { [weak self](notification: Notification) -> Void in
                guard let userInfo = notification.userInfo,
                      let keyboardFrame = userInfo[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect else { return }
                withAnimation {
                    self?.bottomPadding = keyboardFrame.size.height
                }
            }
        }
    }
}

Différence de comportement

Enfin, je résumerai le type de comportement qui diffère selon la configuration de l'écran.

List

struct ContentView: View {
    @State private var text: String = ""
    
    var body: some View {
        List {
            ForEach(0..<30) {
                Text("\($0)")
            }
            TextField("input here", text: $text)
                .padding()
        }
    }
}

ScrollView

struct ContentView: View {
    @State private var text: String = ""
    
    var body: some View {
        ScrollView {
            ForEach(0..<30) {
                Text("\($0)")
            }
            TextField("input here", text: $text)
                .padding()
        }
    }
}

VStack

Si vous n'avez pas assez d'espace

struct ContentView: View {
    @State private var text: String = ""
    
    var body: some View {
        VStack {
            ForEach(0..<30) {
                Text("\($0)")
            }
            TextField("input here", text: $text)
                .padding()
        }
    }
}

: avertissement: ** Veuillez noter qu'il ne sera pas affiché! ** **

S'il y a assez d'espace

struct ContentView: View {
    @State private var text: String = ""
    
    var body: some View {
        VStack {
            ForEach(0..<20) {
                Text("\($0)")
            }
            TextField("input here", text: $text)
                .padding()
        }
    }
}