So implementieren Sie eine Side Drawer-Navigation für iOS

Dieses iOS-Tutorial ist eine detaillierte Erklärung eines Beispiels, das Ihnen zeigt, wie Sie Storyboard zur Integration verwenden MMDrawerController in Ihrer Bewerbung. Nach diesem Tutorial sollten Sie in der Lage sein, ein ausziehbares Seitenmenü in Ihre iOS-App zu implementieren.


Das Slide-out-Designmuster ermöglicht es Entwicklern, ihren Apps eine permanente Navigation hinzuzufügen, ohne wertvollen Platz auf dem Bildschirm zu belegen. Der Benutzer kann die Navigation jederzeit anzeigen, während er weiterhin seinen aktuellen Kontext sieht.

Es ist wirklich einfach, eine in Ihre Apps mit wunderbaren Bibliotheken wie hinzuzufügen MM Drawer Controller um. Aber die meisten Beispiele in der Umgebung zeigen nur eine zu stark vereinfachte Ansicht ohne Hinweise darauf, wie Sie Ihren Code für ein solches Navigationsmuster strukturieren. Dieser Beitrag versucht, eine intuitive und einfach zu pflegende Struktur für die Integration einzuführen MMDrawerController in einer App mit mehreren Kontexten mit Storyboard. Nehmen wir an, wir möchten einen Root-Controller haben, der etwas tut, und dann navigieren wir zum Schubladen-Controller. Der DrawerController ist eine Instanz von MMDrawerController und wickelt eine Navigationsschublade und einen Center View Controller ein. Wir werden alles im Storyboard erstellen und verwenden [self.storyboard instantiateViewControllerWithIdentifier:identifier] um die View-Controller von dort aus ordnungsgemäß in unsere Drawer-Controller zu instanziieren leftDrawerViewController und centerViewController. So sieht unser Storyboard aus:

Beachten Sie, dass wir in der eine Storyboard-ID zuweisen Identity Inspector damit wir den View-Controller aus dem Storyboard instanziieren können. Lassen Sie uns eine Kennung zuweisen FIRST_TOP_VIEW_CONTROLLER an den Navigationscontroller von FirstViewController damit wir es als Center-View-Controller verwenden können. Jetzt müssen wir nur noch den Übergang zum Drawer View Controller durchführen und den linken und den mittleren Controller in instanziieren prepareForSegue: und stellen Sie die Controller wie folgt auf den Schubladencontroller ein:

-(void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { 
if ([segue.identifier isEqualToString:@"DRAWER_SEGUE"]) { 
  MMDrawerController *destinationViewController = (MMDrawerController *)segue.destinationViewController; 
  
  
  UIViewController *centerViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"FIRST_TOP_VIEW_CONTROLLER"]; [destinationViewController setCenterViewController: centerViewController]; 
  
  
  UIViewController *leftDrawerViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"SIDE_DRAWER_CONTROLLER"]; [destinationViewController setLeftDrawerViewController: leftDrawerViewController]; 
  } 
 }

Jetzt haben wir ein grundlegendes Setup, in dem wir zu einem Navigationscontroller wechseln und die Drawer- und Center-Controller aus dem Storyboard instanziieren können. Wie gehen wir nun damit um, wenn ein Benutzer auf die Elemente der seitlichen Schublade klickt, um zu einem anderen Controller in der Mitte zu navigieren? Es ist einfach! Instanziieren Sie einfach einen anderen View-Controller (z [self.storyboard instantiateViewControllerWithIdentifier:@"SECOND_TOP_VIEW_CONTROLLER"]) und legen Sie es als Center-View-Controller für den Schubladen-Controller fest. Sie können auf den Schubladen-Controller von jedem Ihrer Ansichts-Controller aus zugreifen self.mm_drawerController.

[self.mm_drawerController setCenterViewController:[self.storyboard instantiateViewControllerWithIdentifier:@"SECOND_TOP_VIEW_CONTROLLER"] withCloseAnimation:YES completion:nil];

Fügen Sie einfach weitere Steckdosen aus der seitlichen Navigationsschublade hinzu, instanziieren Sie neue Zentralsteuerungen und stellen Sie sie auf die Schubladensteuerung ein. So einfach fügen Sie Ihrer App eine voll funktionsfähige Navigationsleiste hinzu. Jetzt können Sie jedem Ihrer individuellen Abschnitte weitere Controller hinzufügen, genau wie in einer normalen App, indem Sie weitere Sequenzen erstellen.

Hier ist eine Implementierung mit diesem Ansatz.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *