Xamarin.iOS
Xamarin.iOS Navigationsschublade

Syntax

1. Flayout-Navigationskomponente: https://components.xamarin.com/view/flyoutnavigation

Xamarin.iOS Navigationsschublade

1. Erstellen Sie ein neues leeres Xamarin.iOS-Projekt (Single View App).

2. Klicken Sie mit der rechten Maustaste auf den Ordner "Components" und wählen Sie "Get More Components" aus.

3. Geben Sie im Suchfeld "Flout Navigation" ein und fügen Sie Ihrer App die folgende Komponente hinzu:

Denken Sie auch daran, die Referenz "Mono.Touch.Dialog-1" hinzuzufügen:

4. Klicken Sie nun das Projekt an und fügen Sie einen neuen UIViewController namens "NavigationDrawerController" hinzu:

5. Der Code für die "NavigationDrawerController" -Klasse sollte jetzt wie folgt aussehen:

public partial class NavigationDrawerController : UIViewController
{
    public NavigationDrawerController(IntPtr handle) : base(handle)
    {
    }

    public override void ViewDidLoad()
    {
        base.ViewDidLoad();

        NavigationItem.LeftBarButtonItem = getMenuItem();
        NavigationItem.RightBarButtonItem = new UIBarButtonItem { Width = 40 };
    }

    UIBarButtonItem getMenuItem()
    {
        var item = new UIBarButtonItem();
        item.Width = 40;
        //Please provide your own icon or take mine from the GitHub sample:
        item.Image = UIImage.FromFile("Images/[email protected]");
        item.Clicked += (sender, e) =>
        {
            if (ParentViewController is MainNavigationController)
                (ParentViewController as MainNavigationController).ToggleMenu();
        };

        return item;
    }
}

Keine Sorge, dass "MainNavigationController" rot markiert ist - wir werden es im nächsten Schritt hinzufügen.

6. Öffnen Sie nun die Datei "Main.storyboard":

a) Fügen Sie einen UIViewController hinzu:

Füllen Sie die Felder "Klasse" und "StoryboardID" mit diesem Namen: "FirstViewController"

b) Fügen Sie anschließend den Navigationscontroller mit dem Root-UIViewController hinzu:

Füllen Sie die Felder "Class" und "StoryboardID" mit diesem Namen: "MainNavigationController" für den Navigationscontroller

Füllen Sie die Felder "Class" und "StoryboardID" mit diesem Namen: "DetailsViewController" für den Root-Controller

Xamarin (oder Visual) Studio erstellt Code-Behind-Klassen für die oben genannten Controller.

7. Öffnen Sie nun die Klasse "FirstViewController" und fügen Sie den folgenden Code ein:

public partial class FirstViewController : UIViewController
{
    public FirstViewController (IntPtr handle) : base (handle)
    {
    }

    public override void ViewDidLoad()
    {
        base.ViewDidLoad();
        createNavigationFlyout();
    }

    void createNavigationFlyout()
    {
        var navigation = new FlyoutNavigationController
        {
            //Here are sections definied for the drawer:
            NavigationRoot = new RootElement("Navigation")
            {
                new Section ("Pages") 
                {
                    new StringElement ("MainPage")
                }
            },

            //Here are controllers definied for the drawer (in this case navigation controller with one root):
             ViewControllers = new[] 
             {
                     (MainNavigationController)Storyboard.InstantiateViewController("MainNavigationController")
             }
        };

        View.AddSubview(navigation.View);
   }
}

8. Öffnen Sie die "MainNavigationController" -Klasse und fügen Sie den folgenden Code ein:

   public partial class MainNavigationController : UINavigationController
   {
        public MainNavigationController (IntPtr handle) : base (handle)
        {
        }
        //Responsible for opening/closing drawer:
        public void ToggleMenu()
        {
            if (ParentViewController is FlyoutNavigationController)
            (ParentViewController as FlyoutNavigationController).ToggleMenu();
        }
    }
   

9. Letzte Klasse namens "DetailsViewController" sollte folgendermaßen aussehen:

public partial class DetailsViewController : NavigationDrawerController
{
    public DetailsViewController (IntPtr handle) : base(handle)
    {
    }
}

Bitte beachten Sie, dass "DetailsViewController" von "NavigationDrawerController" stammt, das wir zu Beginn erstellt haben.

Das ist es. Jetzt können Sie die Schublade beliebig anpassen. Bitte finden Sie auch ein fertiges Sample auf meinem GitHub:

https://github.com/Daniel-Krzyczkowski/XamarinIOS/tree/master/Xamarin.iOS.NavigationDrawer