Erstellen von WhatsApp-ähnlichen Animationen in iOS

So erstellen Sie eine flüssige und konsistente UITabBar- und UIToolBar-Animation wie in WhatsApp für Ihre App.

WhatsApps Übergang von einer UITabBar zu einer UIToolBar.Beispielimplementierung.

Seit ich mit der Entwicklung von iOS-Apps begonnen habe, habe ich mehr darauf geachtet, wie andere äußerst erfolgreiche Apps UI-Übergänge implementieren, damit ich sie in meinen eigenen implementieren kann.

Kürzlich habe ich eine App entwickelt, in die eine UICollectionView in einen UIViewController eingebettet war, der wiederum in einen UICollectionViewController eingebettet war, und ich wollte die Registerkartenleiste am unteren Bildschirmrand ausblenden können, um im Bearbeitungsmodus eine Symbolleiste anzuzeigen .

Die betreffende Ansichtshierarchie.

Eine der Apps, die ich am häufigsten benutze, ist WhatsApp, aber bis jetzt hatte ich nicht versucht zu analysieren, wie es seine UI-Übergänge verwaltet. Mir ist aufgefallen, dass die Art und Weise, wie der Übergang und die Position der UIToolBar am unteren Bildschirmrand im Bearbeitungsmodus behandelt werden, perfekt zu dem passt, was ich implementieren wollte.

In diesem Artikel werde ich Ihnen zeigen, wie ich es in meiner App implementiert habe, und meine Entwurfsentscheidungen erläutern. Es stellt sich heraus, dass es nicht trivial ist, das oben Genannte zu tun, und ich habe eine Weile gebraucht, um es herauszufinden. Ich musste benutzerdefinierten Code und zu viel Versuch und Irrtum schreiben. Daher hoffe ich, dass dieser Artikel und das Beispielprojekt Ihnen das Leben erleichtern, wenn Sie dasselbe implementieren möchten.

Analyse

Zuerst sollten wir überprüfen, wie WhatsApp die Dinge macht:

Die WhatsApp-Animation wurde auf 10% ihrer ursprünglichen Geschwindigkeit verlangsamt.

Nach allem, was ich sagen kann, blendet WhatsApp die UITabBar ein oder aus und bewegt gleichzeitig die UIToolBar je nach Bearbeitungsmodus nach oben oder unten.

Daher ist unser Aktionsplan, genau das oben Genannte zu tun.

Planung

Dies sind unsere Anforderungen:

  • Wir sollten der UINavigationBar erlauben, die großen Titel von iOS 11 zu verwenden
  • Wir sollten die UIToolBar ausblenden, wenn sie nicht verwendet wird
  • Wir sollten dasselbe für die UITabBar tun

Attacke

Hier habe ich mich völlig geirrt. Ich dachte, dass die Implementierung dessen, was wir oben besprochen haben, ein Kinderspiel gewesen wäre, aber es stellte sich als äußerst kompliziert heraus.

Warum?

Es stellt sich heraus, dass die Verwendung der Standardanimation und des Standardsystems für große Titel jeden einfachen Positionierungscode vermasselt, den Sie möglicherweise für Ihre UIToolBar schreiben.

Der naive Ansatz

Als erstes habe ich versucht, die Standard-UIToolBar des UINavigationControllers zu verwenden und ihre Position entsprechend dem Bearbeitungsstatus der App zu ändern.

Wie ich bereits sagte, funktioniert dies jedoch nicht wirklich, wenn Sie große Titel verwenden.

Beachten Sie, wie die UIToolBar verschoben wird, wenn der große Titel animiert wird.

Außerdem stellte ich fest, dass ich die Größe der Eigenschaft bounds der Auflistungsansicht manuell ändern musste, wenn sie den gesamten Bereich zwischen der verschobenen UIToolBar und der UITabBar abdecken sollte.

Die Lösung

Um dies zu umgehen, müssen wir eine UIToolBar manuell hinzufügen, anstatt die Standard-UIToolBar zu verwenden, die vom UINavigationController-Objekt bereitgestellt wird, das unserem View Controller zugeordnet ist.

Zuerst erstellen wir es faul:

private faule var toolBar: UIToolbar = {return UIToolbar ()} ()

und richten Sie dann die Einschränkungen in viewDidLoad ein:

private var toolBarConstraints = [NSLayoutConstraint] ()
...
überschreiben func viewDidLoad () {super.viewDidLoad () ... navBar.prefersLargeTitles = true NavigationController! : self.view.leftAnchor), toolBar.rightAnchor.constraint (gleich zu: self.view.rightAnchor), toolBar.bottomAnchor.constraint (gleich zu: self.view.bottomAnchor), toolBar.topAnchor.constraint (gleich zu: tabBar ])}

Anschließend erstellen wir einige berechnete Eigenschaften, die wir im gesamten Beispielansichts-Controller verwenden, um die benutzerdefinierte UIToolBar korrekt einzurichten:

private var screenHeight: CGFloat {UIScreen.main.bounds.height zurückgeben} private var toolBarYPos: CGFloat {if currentState == .normal {return screenHeight} // Idealerweise hier nach anderen Zuständen suchen, aber da wir nur zwei haben, behalten Sie es / / einfach; würde etwas tun wie: else if currentState == .edit {else {return screenHeight - toolBar.frame.height}}

Schließlich verwenden wir diese berechneten Eigenschaften, um die UIToolBar und / oder die UITabBar in bestimmten Fällen korrekt zu positionieren. Wenn der Benutzer auf die Schaltflächen Bearbeiten oder Fertig tippt:

Die Animation, die wir wollten.

und dies wird (teilweise, aber meistens) mit diesem Code erreicht:

@IBAction func onEditBtnTouchUp (_ Absender: Beliebig) {// In den Bearbeitungsmodus wechseln, wenn currentState == .normal {currentState = .edit verblassen (tabBar, toAlpha: 0, withDuration: 0.2 undHide: true) UIView.animate (withDuration) : 0.2, animations: {// Setze edit auf done self.navigationItem.leftBarButtonItem = UIBarButtonItem (barButtonSystemItem: .done, target: self, action: #selector (self.onDoneBtnTouchUp)) // Fade away + btn self.plusBtn = false self.plusBtn.tintColor = UIColor.clear // Positionieren Sie die Symbolleiste self.toolBar.frame.origin.y = self.toolBarYPos})}} @objc func onDoneBtnTouchUp (_ Absender: Beliebig) {// In den Normalzustand wechseln if currentState == .edit {currentState = .normal fade (tabBar, toAlpha: 1, withDuration: 0.2 undHide: false) UIView.animate (withDuration: 0.2, animations: {// Setze edit auf done self.navigationItem.leftBarButtonItem = UIBarButtonItem (barButtonSystemItem: .edit, Ziel: self, Aktion: #selector (self.onEditBtnTouchUp)) // Einblenden + btn self.plusBtn.isEnabled = true s elf.plusBtn.tintColor = nil // Positioniere die Symbolleiste self.toolBar.frame.origin.y = self.toolBarYPos})}

Schlussfolgerungen

Das Endergebnis sollte ungefähr so ​​aussehen:

Ich habe ein Repository mit dem Beispielprojekt eingerichtet, damit Sie den vollständigen Code lesen können:

Ich empfehle es auszuprobieren, da ich der Kürze halber einige Details im Artikel absichtlich übersehen habe.

Ich habe lange gebraucht, um das herauszufinden, da das Zusammenspiel der verschiedenen UIKit-Elemente nicht wie erwartet funktioniert hat.

Die wichtigsten Erkenntnisse bei der Entwicklung erweiterter UI-Interaktionen in Swift unter iOS sind:

  1. Versuchen Sie zuerst die einfachste Lösung. wenn das klappt, cool!
  2. Wenn nicht, probieren Sie immer wieder neue aus und experimentieren Sie.
  3. Es kann sehr frustrierend sein, aber nicht aufgeben!

Wenn Sie solche Sachen mögen, sollten Sie mir auf Twitter folgen: twitter.com/albtaiuti

Der Stil dieses Beitrags wurde teilweise von Nathan Gitters Medium-Beiträgen inspiriert, und ich habe auch einen Teil seines Codes verwendet. Danke, dass du es mit uns geteilt hast, Nathan!

Folgen Sie uns auf Social Media-Plattformen: Facebook: facebook.com/AppCodamobile/ Twitter: twitter.com/AppCodaMobile Instagram: instagram.com/AppCodadotcom

Wenn Ihnen dieser Artikel gefallen hat, klicken Sie bitte auf die Schaltfläche und teilen Sie ihn, damit andere ihn finden können! Fühlen Sie sich frei, einen Kommentar unten zu hinterlassen.