Панели вкладок и контроллеры панели вкладок в Xamarin.iOS

Приложения tabbed используются в iOS для поддержки пользовательских интерфейсов, в которых доступ к нескольким экранам не выполняется в определенном порядке. Благодаря классу UITabBarController приложения могут легко включать поддержку таких сценариев с несколькими экранами. UITabBarController обеспечивает управление несколькими экранами, что позволяет разработчику приложений сосредоточиться на деталях каждого экрана.

Как правило, приложения с вкладками создаются с UITabBarController основным RootViewController окном. Однако при использовании дополнительного кода приложения табуляции также можно использовать в последовательности для другого начального экрана, например сценария, в котором приложение сначала представляет экран входа, а затем — интерфейс табуляции.

На этой странице рассматриваются оба сценария: когда вкладки находятся в корне иерархии представления приложения, а также в сценарии, отличномRootViewController от сценария.

Знакомство с UITabBarController

Поддержка UITabBarController разработки приложений с вкладками по следующим параметрам:

• Разрешение добавления в него нескольких контроллеров.
• Предоставление пользовательского интерфейса с вкладками через UITabBar класс, чтобы разрешить пользователю переключаться между контроллерами и их представлениями.

Контроллеры добавляются в UITabBarController его ViewControllers свойство, которое является массивом UIViewController . Сам UITabBarController по себе обрабатывает загрузку соответствующего контроллера и представление на основе выбранной вкладки.

Вкладки — это экземпляры UITabBarItem класса, которые содержатся в экземпляре UITabBar . Каждый UITabBar экземпляр доступен через TabBarItem свойство контроллера на каждой вкладке.

Чтобы понять, как работать с ним UITabBarController, давайте рассмотрим создание простого приложения, использующего его.

Пошаговое руководство по приложению tabbed

В этом пошаговом руководстве мы создадим следующее приложение:

Хотя шаблон приложения с вкладками уже доступен в Visual Studio для Mac, в этом примере эти инструкции работают из пустого проекта, чтобы лучше понять, как создается приложение.

Создание приложения

Начните с создания нового приложения.

Выберите пункт меню "Создать > решение" > в Visual Studio для Mac и выберите шаблон пустого проекта приложения > iOS>, назовите проектTabbedApplication, как показано ниже:

Добавление UITabBarController

Затем добавьте пустой класс, выбрав "Создать файл>" и выбрав шаблон "Общий: пустой класс". Назовите файл TabController , как показано ниже:

Класс TabController будет содержать реализацию UITabBarController массива UIViewControllers. Когда пользователь выбирает вкладку, UITabBarController он будет заботиться о представлении соответствующего контроллера представления.

Чтобы реализовать необходимые UITabBarController действия, выполните следующие действия.

1. Задайте для базового класса TabControllerUITabBarController значение .
2. Создание UIViewController экземпляров для добавления в объект TabController .
3. UIViewController Добавьте экземпляры в массив, назначенный ViewControllers свойству объекта TabController .

Добавьте следующий код в TabController класс, чтобы выполнить следующие действия:

using System;
using UIKit;

namespace TabbedApplication {
    public class TabController : UITabBarController {

        UIViewController tab1, tab2, tab3;

        public TabController ()
        {
            tab1 = new UIViewController();
            tab1.Title = "Green";
            tab1.View.BackgroundColor = UIColor.Green;

            tab2 = new UIViewController();
            tab2.Title = "Orange";
            tab2.View.BackgroundColor = UIColor.Orange;

            tab3 = new UIViewController();
            tab3.Title = "Red";
            tab3.View.BackgroundColor = UIColor.Red;

            var tabs = new UIViewController[] {
                tab1, tab2, tab3
            };

            ViewControllers = tabs;
        }
    }
}

Обратите внимание, что для каждого UIViewController экземпляра UIViewControllerмы устанавливаем Title свойство . Когда контроллеры добавляются UITabBarControllerв него, UITabBarController будут считываться Title для каждого контроллера и отображать его на метках связанной вкладки, как показано ниже:

Задание TabController в качестве RootViewController

Порядок размещения контроллеров на вкладках соответствует порядку их добавления в ViewControllers массив.

Чтобы загрузить UITabController его в качестве первого экрана, необходимо сделать его окно RootViewController, как показано в следующем коде для AppDelegate:

[Register ("AppDelegate")]
public partial class AppDelegate : UIApplicationDelegate
{
    UIWindow window;
    TabController tabController;

    public override bool FinishedLaunching (UIApplication app, NSDictionary options)
    {
        window = new UIWindow (UIScreen.MainScreen.Bounds);

        tabController = new TabController ();
        window.RootViewController = tabController;

        window.MakeKeyAndVisible ();

        return true;
    }
}

Если мы запустите приложение сейчас, будет загружена первая вкладка, UITabBarController выбранная по умолчанию. Выбор любой из других вкладок приводит к отображению UITabBarController, представления связанного контроллера, как показано ниже, где конечный пользователь выбрал вторую вкладку:

Изменение tabBarItems

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

Настройка системного элемента

Сначала давайте задали первую вкладку для использования системного элемента. В конструкторе удалите TabControllerстроку, которая задает контроллер Title для tab1 экземпляра и замените его следующим кодом, чтобы задать свойство контроллера TabBarItem :

tab1.TabBarItem = new UITabBarItem (UITabBarSystemItem.Favorites, 0);

При создании с помощью заголовка UITabBarItem и изображения автоматически предоставляются iOS, как показано на снимке экрана ниже с значком избранного и заголовком на первой вкладке:UITabBarSystemItem

Настройка образа

Помимо использования системного элемента, заголовок и изображение можно UITabBarItem задать для пользовательских значений. Например, измените код, который задает TabBarItem свойство контроллера tab2 следующим образом:

tab2 = new UIViewController ();
tab2.TabBarItem = new UITabBarItem ();
tab2.TabBarItem.Image = UIImage.FromFile ("second.png");
tab2.TabBarItem.Title = "Second";
tab2.View.BackgroundColor = UIColor.Orange;

Приведенный выше код предполагает, что имя second.png изображения было добавлено в корень проекта (или каталог Resources ). Для поддержки всех плотностей экрана вам потребуется три изображения, как показано ниже:

Рекомендуемый размер зависит от стиля изображения (циклический, квадратный, широкий или высокий).

Свойство Image должно быть задано только для имени файла second.png , iOS автоматически загружает файлы с более высоким разрешением при необходимости. Дополнительные сведения см. в руководствах по работе с изображениями . По умолчанию элементы панели вкладок серые, с синим цветом при выборе.

Переопределение заголовка

Title Если свойство задано непосредственно на TabBarItemконтроллере, оно переопределит любое значение, Title заданное для самого контроллера.

На следующем снимке экрана показана вторая (средняя) вкладка с пользовательским заголовком и изображением:

Задание значения индикатора событий

Вкладка также может отображать значок. Например, добавьте следующую строку кода, чтобы задать значок на третьей вкладке:

tab3.TabBarItem.BadgeValue = "Hi";

При выполнении это приведет к красной метке со строкой "Привет" в левом верхнем углу вкладки, как показано ниже:

Эмблема часто используется для отображения непрочитанных и новых элементов с указанием числа. Чтобы удалить значок, задайте BadgeValue значение NULL, как показано ниже:

tab3.TabBarItem.BadgeValue = null;

Вкладки в сценариях, отличных от RootViewController

В приведенном выше примере показано, как работать с UITabBarControllerRootViewController окном. В этом примере мы рассмотрим, как использовать то, когда оно не RootViewController является и показывает, как это создается с помощью UITabBarController раскадровки.

Пример начального экрана

В этом сценарии начальный экран загружается с контроллера, который не UITabBarControllerявляется. Когда пользователь взаимодействует с экраном, нажав кнопку, тот же контроллер представления будет загружен в UITabBarControllerобъект, который затем будет представлен пользователю. На следующем снимке экрана показана блок-схема приложения.

Давайте начнем новое приложение для этого примера. Опять же, мы будем использовать шаблон i Телефон > App > Empty Project (C#), на этот раз именуя проектInitialScreenDemo.

В этом примере раскадровка используется для размещения контроллеров представления. Чтобы добавить раскадровку, выполните приведенные действия.

• Щелкните правой кнопкой мыши имя проекта и выберите "Добавить > новый файл".

• Когда появится диалоговое окно "Создать файл", перейдите к iOS > Empty i Телефон Storyboard.

Давайте вызовем этот новый раскадровки MainStoryboard , как показано ниже:

При добавлении раскадровки в ранее не раскадровки, которые описаны в руководстве "Введение в раскадровки". К ним относятся:

1. Добавьте имя раскадровки в раздел "Основной интерфейс" в разделе Info.plist:

   

2. App DelegateПереопределите метод Window в следующем коде:

   public override UIWindow Window {
       get;
       set;
   }
   

Для этого примера нам потребуется три контроллера представления. Один из них ViewController1будет использоваться в качестве контроллера начального представления и на первой вкладке. Остальные два, именованные ViewController2 и ViewController3, которые будут использоваться на второй и третьей вкладках соответственно.

Откройте конструктор, дважды щелкнув файл MainStoryboard.storyboard и перетащите три контроллера представления в область конструктора. Мы хотим, чтобы каждый из этих контроллеров представления должен иметь собственный класс, соответствующий имени выше, поэтому в разделе "Класс удостоверений>" введите его имя, как показано на снимке экрана ниже:

Visual Studio для Mac автоматически создаст необходимые классы и файлы конструктора, это можно увидеть на панели решения, как показано ниже:

Создание пользовательского интерфейса

Затем мы создадим простой пользовательский интерфейс для каждого представления ViewController с помощью конструктора Xamarin iOS.

Мы хотим перетащить объект Label в Button ViewController1 из ToolBox справа. Далее мы будем использовать панель свойств для изменения имени и текста элементов управления следующим образом:

• Метка : Text = Один
• Кнопка : Title = пользователь принимает некоторое начальное действие

Мы будем контролировать видимость нашей кнопки в TouchUpInside событии, и нам нужно ссылаться на нее в коде. Давайте определим его с именемaButton на панели свойств, как показано на следующем снимке экрана:

Теперь поверхность конструктора должна выглядеть примерно так, как на снимок экрана ниже:

Давайте добавим более подробную информацию ViewController2ViewController3и , добавив метку к каждому, и измените текст на "Два" и "Три" соответственно. Это выделяет пользователя, на какой вкладке или представлении мы смотрим.

Подключение кнопки

Мы собираемся загрузить ViewController1 при первом запуске приложения. Когда пользователь нажимает кнопку, мы скроем кнопку и загрузим UITabBarControllerViewController1 экземпляр на первой вкладке.

Когда пользователь освобождает aButtonсобытие TouchUpInside, необходимо активировать событие TouchUpInside. Давайте нажимаем кнопку и на вкладке "События" панели "Свойства" объявите обработчик событий , InitialActionCompleted чтобы его можно было ссылаться в коде. Это показано на снимке экрана ниже:

Теперь необходимо сообщить контроллеру представления, чтобы скрыть кнопку при срабатывании InitialActionCompletedсобытия. Добавьте ViewController1следующий частичный метод:

partial void InitialActionCompleted (UIButton sender)
{
    aButton.Hidden = true;  
}

Сохраните файл и запустите приложение. Появится экран, и кнопка исчезнет на сенсорном экране.

Добавление контроллера панели вкладок

Теперь у нас есть наше начальное представление, как ожидалось. Далее мы хотим добавить его в UITabBarController, а также представления 2 и 3. Давайте открываем раскадровки в конструкторе.

На панели элементов найдите контроллер панели вкладок в разделе "Контроллеры и объекты" и перетащите его в область конструктора. Как видно на снимке экрана ниже, контроллер панели вкладок меньше пользовательского интерфейса и поэтому содержит два контроллера представления по умолчанию:

Удалите эти новые контроллеры представления, выбрав черную панель в нижней части и нажав клавишу DELETE.

В раскадровки можно использовать segues для обработки переходов между TabBarController и нашими контроллерами представления. После взаимодействия с начальным представлением мы хотим загрузить его в tabBarController, представленный пользователю. Давайте настроим эту настройку в конструкторе.

Ctrl-Click and Drag from the button to the TabBarController. В контекстном меню появится контекстное меню. Мы хотим использовать модальное продолжение.

Чтобы настроить каждую из наших вкладок, ctrl-click из tabBarController к каждому из наших контроллеров представления в порядке от одного до трех, и выберите вкладку "Связь" в контекстном меню, как показано ниже:

Раскадровка должна выглядеть следующим образом:

Если щелкнуть один из элементов панели вкладок и просмотреть панель свойств, можно увидеть ряд различных параметров, как показано ниже:

Это можно использовать для изменения определенных атрибутов, таких как эмблема, заголовок и идентификатор iOS, среди прочего.

Если сохранить и запустить приложение сейчас, мы найдем, что кнопка снова появится при загрузке экземпляра ViewController1 в tabBarController. Давайте исправим это, проверка, чтобы узнать, имеет ли текущее представление родительский контроллер представления. Если это так, мы знаем, что мы внутри TabBarController, и поэтому кнопка должна быть скрыта. Давайте добавим приведенный ниже код в класс ViewController1:

public override void ViewDidLoad ()
{
    if (ParentViewController != null){
        aButton.Hidden = true;
    }
}

Когда приложение запускается и пользователь нажимает кнопку на первом экране, пользовательский интерфейсTabBarController загружается с первого экрана, размещенного на первой вкладке, как показано ниже:

Итоги

В этой статье описано, как использовать UITabBarController приложение. Мы пошаговые инструкции по загрузке контроллеров на каждой вкладке, а также настройке свойств на вкладках, таких как название, изображение и эмблема. Затем мы рассмотрели, используя раскадровки, как загрузить UITabBarController во время выполнения, когда оно не является окном RootViewController .

Дополнительные ссылки

• Images.zip
• Справочник по классу UITabBarController