MvvmCross Sidebar Navigation für MvvmCross 5.x

Question

Ich mit zwei Navigationsarten für meine App, Sidebar-Navigation und Eltern-Kind-Navigation zur gleichen Zeit zu implementieren. Meine App startet mit dem Hamburger (Seitenleiste) -Menü.

Der erste Eintrag im Sidebar-Menü sollte einen Reset des Navigationsstapels durchführen und die Home-Ansicht öffnen. Home-Ansicht-Controller sollte eine root-Stack-Navigation starten, so dass jede Schaltfläche in der Home-Ansicht eine neue Ansicht öffnen sollte, Schaltfläche in einer neuen Ansicht sollte eine andere Ansicht öffnen usw.

Jedes andere Element in Sidebar-Menü sollte eine neue Ansicht öffnen als ein Dialog

Ich verwende MvvmCross 5.x, und es gibt keine Probe kompatibel mit 5.x-Version. Gibt es jemanden, der mich auf eine brauchbare Probe verweisen kann?

Answer 1

Zuerst nehme ich an, Sie versuchen, dies für iOS zu implementieren. Im Falle von Android können Sie einfach die Navigationsschublade verwenden.

Das Beispiel auf iOS ist noch nicht in MvvmCross 5.x konvertiert (ich werde damit beginnen a.s.a.p.), aber das sollte trivial sein. Lassen Sie mich versuchen Sie durch sie gehen:

1. Stellen Sie sicher, dass das MvvmCross iOS-Support-Paket zu Ihrem iOS-Projekt hinzu: Install-Package MvvmCross.iOS.Support -Version 5.0.2 (oder verwenden Sie die GUI)

2. Konfigurieren Sie Ihr iOS-Projekt die MvxSidebarPresenter durch die Verwendung Hinzufügen mit dem folgenden Code in die Setup Klasse in Ihrem iOS-Projekt:

   protected override IMvxIosViewPresenter CreatePresenter() 
   { 
       return new MvxSidebarPresenter((MvxApplicationDelegate)ApplicationDelegate, Window); 
   } 
   

3. einen view-Controller erstellen, die wirkt, wie Sie Menü und dekorieren sie mit dem MvxSidebarPresentationAttribute Flyout. Dieser View-Controller fungiert als Ihr Menü. Sie können (oder sollten besser) es mit einem Ansichtsmodell verknüpfen, das den Navigationsteil behandelt (wenn der Benutzer einen Menüeintrag auswählt). Diese Ansicht Controller wie folgt aussehen könnte:

   [MvxSidebarPresentation(MvxPanelEnum.Left, MvxPanelHintType.PushPanel, false)] 
   public class LeftPanelView : MvxViewController<LeftPanelViewModel> 
   { 
       ... 
   } 
   

4. Um sicherzustellen, dass Ihr Haus Ansicht Akt machen als ein Root-Controller einfach die MvxSidebarPresentationAttribute an die Steuerung Home-Ansicht hinzufügen und stellen Sie sicher, dass die Eigenschaft Panel-Center gesetzt ist, HintType ist Set ResetRoot und ShowPanel wird auf true), etwa so:

   [MvxSidebarPresentation(MvxPanelEnum.Center, MvxPanelHintType.ResetRoot, true)] 
   public class HomeView : MvxViewController<HomeViewModel> 
   { 
       ... 
   } 
   

5. Für alle Kind-Ansichten (von der Home-Ansicht geöffnet) stellen Sie sicher, die MvxSidebarPresentationAttribute mit der Stütze eingestellt erty Panel Satz Center, HintType Set PushPanel und je nachdem, ob Sie die Menu-Taste auf den untergeordneten Seiten angezeigt werden sollen die ShowPanel zu true oder false , etwa so:

   [MvxSidebarPresentation(MvxPanelEnum.Center, MvxPanelHintType.PushPanel, true)] 
   public class ChildView : MvxViewController<ChildViewModel> 
   { 
       ... 
   } 
   

6. Der letzten Schritt ist zu Richten Sie den View-Controller für alle anderen Schaltflächen im Menü ein. Diese können einfach mit dem Attribut MvxModalPresentationAttribute dekoriert werden, um sie als Dialog zu öffnen (detaillierte Dokumentation finden Sie unter here).Ein Beispiel hierfür könnte in etwa so aussehen:

   [MvxModalPresentation(ModalPresentationStyle = UIModalPresentationStyle.OverFullScreen, ModalTransitionStyle = UIModalTransitionStyle.CrossDissolve)] 
   public partial class ModalView : MvxViewController<ModalViewModel> 
   { 
       ... 
   } 
   

die unterschiedlichen Ansichten öffnen Sie die Nutzung des neuen Navigationsdienstes in MvvmCross machen können. Gehen Sie ermöglichen so einfach die MvvmCross IoC-Container eine Instanz in Ihre Ansicht Modelle Konstruktor (Weitere Details finden here) zu injizieren:

public class HomeViewModel : MvxViewModel 
{ 
    private readonly IMvxNavigationService _navigationService; 

    public HomeViewModel(IMvxNavigationService navigationService) 
    { 
     _navigationService = navigationService ?? throw new ArgumentNullException(nameof(navigationService)); 
    } 
} 

EDIT 1: Um ein Symbol zu zeigen, auf wie Menü Sie müssen die Schnittstelle IMvxSidebarMenu auf dem View-Controller implementieren, der das Menü darstellt (siehe Schritt 3). Durch die Implementierung dieser Schnittstelle können Sie das Standardverhalten des Menüs überschreiben. Ein Beispiel hierfür finden Sie in here (Teil der Demoanwendung MvvmCross XamarinSidebar).

EDIT 2: Ich habe vorgeschlagen, fälschlicherweise, dass Sie das Menü anzeigen kann (oder das Symbol), um auf einer untergeordneten Ansicht, die auf dem Navigationsstapel geschoben wird. Dies ist nicht der Fall. Untergeordnete Ansichten, die auf dem Stapel abgelegt sind, zeigen die Menüschaltfläche nicht an. In diesen Fällen wird die Eigenschaft ShowPanel vollständig ignoriert.

EDIT 3: Es gibt eine Möglichkeit, dieses Muster vollständig zu erreichen. Wir können die Stack-Navigations-Benutzeroberfläche anpassen, sodass wir etwas wie die Android-Symbolleiste nachahmen können. Dieser Ansatz funktioniert und es erfordert grundsätzlich, dass wir die Navigationsleiste ausgeblendet und unsere benutzerdefinierte Symbolleiste mit dem Hamburger-Menü, der Zurück-Schaltfläche und anderen Schaltflächen erstellen und sie in den oberen Teil der untergeordneten Ansicht einfügen. Hier ist der Code für schließen und zurück Schaltflächen: