Xamarin.iOS
Ящик навигации Xamarin.iOS

Синтаксис

1. Компонент навигации Flayout: https://components.xamarin.com/view/flyoutnavigation

Ящик навигации Xamarin.iOS

1. Создайте новый пустой проект Xamarin.iOS (приложение Single View).

2. Щелкните правой кнопкой мыши на папке «Компоненты» и выберите «Получить дополнительные компоненты»:

3. В поле поиска введите: «Flout Navigation» и добавьте ниже компонент в ваше приложение:

Помните также, чтобы добавить ссылку «Mono.Touch.Dialog-1»:

4. Теперь жестко нажмите на проект и добавьте новый UIViewController под названием «NavigationDrawerController»:

5. Теперь код для класса «NavigationDrawerController» должен выглядеть следующим образом:

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

Не стоит беспокоиться о том, что «MainNavigationController» выделен красным цветом - мы добавим его на следующем шаге.

6. Теперь откройте файл «Main.storyboard»:

a) Добавьте один UIViewController:

Заполните поля «Class» и «StoryboardID» с таким именем: «FirstViewController»

b) После этого добавьте контроллер навигации с корневым UIViewController:

Заполните поля «Class» и «StoryboardID» с таким именем: «MainNavigationController» для навигационного контроллера

Заполните поля «Класс» и «StoryboardID» с таким именем: «DetailsViewController» для корневого контроллера

Xamarin (или Visual) Studio создаст классы кода для вышеуказанных контроллеров.

7. Теперь откройте класс «FirstViewController» и вставьте ниже кода:

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. Откройте класс «MainNavigationController» и вставьте ниже кода:

   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. Последний класс под названием «DetailsViewController» должен выглядеть так:

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

Обратите внимание, что «DetailsViewController» происходит от «NavigationDrawerController», который мы создали в начале.

Вот и все. Теперь вы можете настроить ящик, как хотите. Пожалуйста, также найдите готовый образец на моем GitHub:

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