Xamarin.iOS
Tiroir de navigation Xamarin.iOS

Syntaxe

1. Composant de navigation Flayout: https://components.xamarin.com/view/flyoutnavigation

Tiroir de navigation Xamarin.iOS

1. Créez un nouveau projet vide Xamarin.iOS (application Single View).

2. Faites un clic droit sur le dossier "Components" et sélectionnez "Get More Components":

3. Dans la zone de recherche, tapez: "Flout Navigation" et ajoutez le composant ci-dessous à votre application:

N'oubliez pas également d'ajouter la référence "Mono.Touch.Dialog-1":

4. Maintenant, cliquez sur le projet et ajoutez le nouveau UIViewController appelé "NavigationDrawerController":

5. Maintenant, le code de la classe "NavigationDrawerController" devrait ressembler à ceci:

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;
    }
}

Aucun souci que "MainNavigationController" soit surligné en rouge - nous l'ajouterons à l'étape suivante.

6. Ouvrez maintenant le fichier "Main.storyboard":

a) Ajoutez un UIViewController:

Remplissez les champs "Class" et "StoryboardID" avec ce nom: "FirstViewController"

b) Après cela, ajoutez le contrôleur de navigation avec la racine UIViewController:

Remplissez les champs "Class" et "StoryboardID" avec ce nom: "MainNavigationController" pour le contrôleur de navigation

Remplissez les champs "Class" et "StoryboardID" avec ce nom: "DetailsViewController" pour le contrôleur racine

Xamarin (ou Visual) Studio créera des classes code-behind pour les contrôleurs ci-dessus.

7. Maintenant, ouvrez la classe "FirstViewController" et collez ci-dessous le code:

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. Ouvrez la classe "MainNavigationController" et collez ci-dessous le code:

   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. La dernière classe appelée "DetailsViewController" devrait ressembler à ceci:

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

Veuillez noter que "DetailsViewController" dérive de "NavigationDrawerController" que nous avons créé au début.

C'est tout. Maintenant, vous pouvez personnaliser le tiroir comme vous le souhaitez. Veuillez également trouver un échantillon prêt sur mon GitHub:

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