[Xamarin] 2. Собираем приложения и делаем главное меню "Гамбургер"

Продолжаем разговор, т.к. собрать приложения это достаточно просто, то кроме этого добавим в приложение меню «Гамбургер». Поехали.

Создаем новый проект в студии выбрав Cross Platform App (Xamarin):

В открывшемся окне я оставил пустое приложение, но вот шаринг кода выбрал на основе PLC. Принципиальная разница в том, как организуется доступ к платформозависимым вещам. В Shared Project, это директива #if.

После нажатия на принять и некоторого времени (если вы это делаете в первый раз, то выскочит предупреждение, что надо бы операционную систему перевести в режим разработчика, плюс выскочит окошко подключения к устройству на котором компилировать iOs решение, т.к. мне пока это не интересно, то я просто закрыл это окно. В итоге создается решение содержащее 4 проекта:

Как не сложно догадаться, три из них под платформы, ну и первое в списке, это разделяемая сборка код из которой будет использоваться в остальных решениях.
Следующим шагом я выгрузил проект с iOs приложением, запустил билд и получил ошибку Could not find android.jar for API Level 26. This means the Android SDK platform for API Level 26 is not installed. Either install it in the Android SDK Manager (Tools > Open Android SDK Manager…), or change your Xamarin.Android project to target an API version that is installed.

В принципе, все логично, т.к. я устанавливал SDK для Android версии 7.1.1, а ей соответствует 25 версия. Заходим в настройки Android проекта и меняем версию:

Все, можно запускать UWP и Android приложение. Эмулятор по прежнему долго грузиться, но мы уже можем убедиться, что приложения работают и показываю жизнеутверждающий текст про «Добро пожаловать…».
Как я уже сказал, это не очень интересно, поэтому добавлю заголовок в приложение и главное меню «Гамбургкер».
Создаем в корневом проекте папки Views и ViewModels. В папку ViewModels добавляем класс MenuViewModel, в папку Views добавляем Content Page для самого меню и две Content Page для показа как работают переходы (Home и Second):

На вьюхах Home и Second я просто поменял текст:

Как я уже сказал, они нужны только для того, чтобы было понятно на какой мы странице.
Меняем нашу главную страницу, делая ее потомком MasterDetailPage. Для этого меняем предка в cs файле и удалив все содержимое, меняем корневой тег. Вот такой получается XAML:

<MasterDetailPage xmlns=»http://xamarin.com/schemas/2014/forms»

xmlns:x=»http://schemas.microsoft.com/winfx/2009/xaml»

xmlns:local=»clr-namespace:Adjutant»

x:Class=»Adjutant.MainPage»>

</MasterDetailPage>

И вот так cs:

Начинаем реализовывать меню. Для этого нам нужно знать, на какой мы странице сейчас находимся. Для упрощения примера, я не буду усложнять с правильной реализацией навигации и просто добавлю в класс App три свойства (для хранения ссылки на главное окно, для хранения ссылки которая сейчас показывается и признак развернутости меню):

public partial class App : Application

{

public staticNavigationPage NavigationPage { get; private set; }

private static MainPage RootPage;

public static bool MenuIsPresented

{

get

{

return RootPage.IsPresented;

}

set

{

RootPage.IsPresented = value;

}

В ViewModel добавляем следующий код:

public class MenuViewModel

{

public ICommand GoHomeCommand { get; set; }

public ICommand GoSecondCommand { get; set; }

public MenuViewModel()

{

GoHomeCommand = newCommand(GoHome);

GoSecondCommand = newCommand(GoSecond);

}

void GoHome(object obj)

{

App.NavigationPage.Navigation.PopToRootAsync();

App.MenuIsPresented = false;

}

void GoSecond(object obj)

{

App.NavigationPage.Navigation.PushAsync(new SecondView());

App.MenuIsPresented = false;

}

Как видно, у нас просто две команды. Одна для перехода на домашнюю страницу, вторая для перехода на вторую.
Самое интересное. Вьюха с меню. В XAML добавляем две кнопки:

<ContentPage xmlns=»http://xamarin.com/schemas/2014/forms»

xmlns:x=»http://schemas.microsoft.com/winfx/2009/xaml»

x:Class=»Adjutant.Views.MenuView»>

<ContentPage.Content>

</StackLayout>

</ContentPage.Content>

</ContentPage>

А в cs, опять же, чтобы не усложнять пример, добавим создание ViewModel:

public partial class MenuView : ContentPage

{

public MenuView()

{

BindingContext = newMenuViewModel();

Title = «Menu»;

InitializeComponent();

}

Осталось только поправить создание приложения. Дописываем конструктор класса App:

public App()

{

InitializeComponent();

var menuPage = new MenuView();

NavigationPage = newNavigationPage(new HomeView());

RootPage = new MainPage();

RootPage.Master = menuPage;

RootPage.Detail = NavigationPage;

MainPage = RootPage;

}

Запускаем. Вот так это выглядит в эмуляторе после запуска:

А вот так после тапа на «гамбургере»:

При переходе на вторую страницу меню пропадает и заменяется стрелкой назад:

В целом все нормально ровно до тех пор, пока не запустим UWP:

Нет «гамбургера», меню показывается всегда… Вот такие они, Xmarin.Forms — одинаковые на всех платформах 🙂
Ладно, в следующий раз поговорим о моделях навигации.

[Xamarin] 2. Собираем приложения и делаем главное меню "Гамбургер"

От Алексей Лосев

Похожие записи

Вы пропустили

Татуировка покраснела, но не чешется – это аллергия или что-то другое?

Как можно красиво выделить цитаты на сайте

Мнение о книге "Байесовская статистика: Star Wars, LEGO, резиновые уточки и многое другое"

Мнение о книге "Технология лидерства"