Работа с представлениями с накоплением tvOS в Xamarin
Предупреждение
Поддержка конструктора iOS была прекращена в Visual Studio 2019 версии 16.8 и Visual Studio 2019 для Mac версии 8.8. В Visual Studio 2019 версии 16.9 и Visual Studio для Mac версии 8.9 этот конструктор удален. Создавать пользовательские интерфейсы iOS рекомендуется непосредственно на Mac с помощью Xcode Interface Builder. Дополнительные сведения см. в статье Проектирование пользовательских интерфейсов с помощью Xcode.
Элемент управления "Представление стека" (UIStackView) использует возможности классов автоматического макета и размера для управления стеком подзрений по горизонтали или по вертикали, которая динамически реагирует на изменения содержимого и размер экрана устройства Apple TV.
Макет всех вложенных представлений, подключенных к представлению стека, управляется им на основе определенных разработчиком свойств, таких как ось, распределение, выравнивание и интервалы:
При использовании UIStackView приложения Xamarin.tvOS разработчик может определить подвиды либо внутри раскадровки в конструкторе iOS, либо добавлять и удалять вложенные представления в коде C#.
Сведения об элементах управления представлением с накоплением
Он UIStackView разработан как представление контейнера, не отрисовываемого и таким образом, он не рисуется на холст, как и другие подклассы UIView. Установка таких свойств, как BackgroundColor или переопределение DrawRect , не будет иметь визуального эффекта.
Существует несколько свойств, управляющих тем, как представление стека упорядочит свою коллекцию подвидов:
- Ось — определяет, упорядочивает ли представление стека подвиды по горизонтали или по вертикали.
- Выравнивание— определяет, как выравниваются подвиды в представлении стека.
- Распределение — определяет размер подвидов в представлении стека.
- Интервал — управляет минимальным пространством между каждым подвидом в представлении стека.
- Базовый относительный — если
trueвертикальный интервал каждого подзрения будет производным от базового плана. - Относительные поля макета — помещает подвиды относительно стандартных полей макета.
Как правило, вы будете использовать представление стека для упорядочивания небольшого количества подвидов. Более сложные пользовательские интерфейсы можно создать, вложив один или несколько представлений стека в другую.
Вы можете дополнительно настроить внешний вид интерфейсов, добавив дополнительные ограничения в подвиды (например, для управления высотой или шириной). Однако следует учесть, что не следует включать конфликтующие ограничения для тех, которые появились в самом представлении стека.
Классы автоматического макета и размера
При добавлении подвида в представление стека его макет полностью управляется этим представлением стека с помощью классов автостроения и размера для размещения и размера упорядоченных представлений.
Представление стека закрепляетпервое и последнее подвью в коллекции к верхним и нижним краям для представлений вертикального стека илилевых и правых краев для представлений горизонтального стека. Если для свойства trueзадано LayoutMarginsRelativeArrangement значение, то представление закрепляет подвиды к соответствующим полям вместо края.
Представление стека использует свойство подвида IntrinsicContentSize при вычислении размера подвидов вдоль определенного Axis (за исключением FillEqually Distribution). Изменение FillEqually Distribution размера всех подвидов таким образом, чтобы они были одинаковыми, таким образом заполняя представление стека вдоль Axis.
За исключением Fill Alignmentпредставления стека используется свойство подвида IntrinsicContentSize для вычисления размера представления перпендикулярно заданному Axis. Fill AlignmentДля всех вложенных представлений размер будет таким образом, чтобы они заполняли представление стека перпендикулярно заданномуAxis.
Размещение и изменение размера представления стека
Хотя представление стека имеет общий контроль над макетом любого подвида (на основе таких свойств, как Axis и Distribution), вам по-прежнему необходимо разместить представление стека (UIStackView) в родительском представлении с помощью классов автоматического макета и размера.
Как правило, это означает закрепление по крайней мере двух ребер представления стека для расширения и контракта, что определяет его положение. Без каких-либо дополнительных ограничений представление стека автоматически изменится в соответствии со всеми его подзрениями следующим образом:
- Размер вместе с ней
Axisбудет суммой всех размеров подвида и любого пространства, определенного между каждым подвидом. LayoutMarginsRelativeArrangementЕсли свойство имеет значениеtrue, размер представлений стека также будет включать место для полей.- Размер перпендикулярного значения
Axisбудет иметь наибольшее подвью в коллекции.
Кроме того, можно указать ограничения для высоты и ширины представления стека. В этом случае вложенные представления будут выложены (размер) для заполнения пространства, указанного представлением стека, как определено свойствамиDistribution.Alignment
BaselineRelativeArrangement Если свойство имеет значениеtrue, вложенные представления будут выложены на основе базовых показателей первого или последнего подвидения, а не с помощью позиции "Сверху", "Нижний" или "Центр - Y". Они вычисляются на содержимом представления стека следующим образом:
- Представление вертикального стека возвращает первое подвью для первого базового плана и последнего. Если какие-либо из этих подвидов являются представлениями стека, будут использоваться их первые или последние базовые показатели.
- Горизонтальное представление стека будет использовать его самое высокое подобью для первого и последнего базовых показателей. Если самое высокое представление также является представлением стека, он будет использовать его в качестве базового представления.
Внимание
Выравнивание базовых показателей не работает на растянутых или сжатых размерах подобного представления, так как базовый план будет вычисляться с неправильной позицией. Для выравнивания базовых показателей убедитесь, что высота подвида соответствует высоте встроенного представления содержимого.
Часто используется представление стека
Существует несколько типов макетов, которые хорошо работают с элементами управления Stack View. По словам Apple, вот несколько наиболее распространенных вариантов использования:
- Определите размер по оси — закрепление обоих ребер вдоль представления
Axisстека и одного из смежных краев, чтобы задать позицию, представление стека будет расти вдоль оси, чтобы соответствовать пространству, определенному его подзрениями. - Определите позицию подвида. При закреплении к соседним краям представления стека в родительском представлении представление стека будет расти в обоих измерениях, чтобы он соответствовал подзрениям.
- Определите размер и позицию стека . Закрепляя все четыре края представления стека в родительском представлении, представление стека упорядочивает подвиды на основе пространства, определенного в представлении стека.
- Определите размер перпендикулярной оси . При закреплении обоих ребер перпендикулярно к представлению
Axisстека и одной из ребер вдоль оси, чтобы задать позицию, представление стека будет расти перпендикулярно оси, чтобы соответствовать пространству, определенному его подзрениями.
Представления стека и раскадровки
Самый простой способ работы с представлениями стека в приложении Xamarin.tvOS — добавить их в пользовательский интерфейс приложения с помощью конструктора iOS.
На панели решений дважды щелкните
Main.storyboardфайл и откройте его для редактирования.Создайте макет отдельных элементов, которые вы добавите в представление стека:
Добавьте все необходимые ограничения в элементы, чтобы обеспечить их правильное масштабирование. Этот шаг важен после добавления элемента в представление стека.
Сделайте требуемое количество копий (четыре в этом случае):
Перетащите представление стека из панели элементов и удалите его в представлении:
Выберите представление стека, на вкладке"Мини-приложение" панели свойств выберите "Заливка для выравнивания", заполните равномерно для распределения и введите
25интервал:
Поместите представление стека на нужный экран и добавьте ограничения, чтобы сохранить его в нужном расположении.
Выберите отдельные элементы и перетащите их в представление стека:
Макет будет изменен, и элементы будут упорядочиться в представлении стека на основе атрибутов, заданных выше.
Назначьте имена на вкладке "Мини-приложение" Обозреватель свойств для работы с элементами управления пользовательского интерфейса в коде C#.
Сохранение изменений.
Внимание
Хотя при создании обработчика событий можно назначить такие действия, как элемент пользовательского интерфейса (напримерUIButton, в конструкторе iOS), он никогда не будет вызываться, так как TouchUpInside Apple TV не имеет сенсорного экрана или поддерживает события сенсорного ввода. При создании элементов пользовательского интерфейса tvOS всегда следует использовать значение по умолчанию Action Type .
Дополнительные сведения о работе с раскадровками см. в руководстве по началу работы с раскадровки Hello, tvOS.
В нашем примере мы предоставили выход и действие для элемента управления сегментами и выход для каждого "проигрывателя карта". В коде мы скрываем и показываем проигрыватель на основе текущего сегмента. Например:
partial void PlayerCountChanged (Foundation.NSObject sender) {
// Take Action based on the segment
switch(PlayerCount.SelectedSegment) {
case 0:
Player1.Hidden = false;
Player2.Hidden = true;
Player3.Hidden = true;
Player4.Hidden = true;
break;
case 1:
Player1.Hidden = false;
Player2.Hidden = false;
Player3.Hidden = true;
Player4.Hidden = true;
break;
case 2:
Player1.Hidden = false;
Player2.Hidden = false;
Player3.Hidden = false;
Player4.Hidden = true;
break;
case 3:
Player1.Hidden = false;
Player2.Hidden = false;
Player3.Hidden = false;
Player4.Hidden = false;
break;
}
}
При запуске приложения четыре элемента будут равномерно распределены в нашем представлении стека:
Если количество игроков уменьшается, неиспользуемые представления скрыты, а представление стека измените макет в соответствии со следующими значениями:
Заполнение представления стека из кода
Помимо полного определения содержимого и макета представления стека в конструкторе iOS, его можно создавать и удалять динамически из кода C#.
Рассмотрим следующий пример, в котором используется представление стека для обработки "звезд" в обзоре (от 1 до 5):
public int Rating { get; set;} = 0;
...
partial void IncreaseRating (Foundation.NSObject sender) {
// Maximum of 5 "stars"
if (++Rating > 5 ) {
// Abort
Rating = 5;
return;
}
// Create new rating icon and add it to stack
var icon = new UIImageView (new UIImage("icon.png"));
icon.ContentMode = UIViewContentMode.ScaleAspectFit;
RatingView.AddArrangedSubview(icon);
// Animate stack
UIView.Animate(0.25, ()=>{
// Adjust stack view
RatingView.LayoutIfNeeded();
});
}
partial void DecreaseRating (Foundation.NSObject sender) {
// Minimum of zero "stars"
if (--Rating < 0) {
// Abort
Rating =0;
return;
}
// Get the last subview added
var icon = RatingView.ArrangedSubviews[RatingView.ArrangedSubviews.Length-1];
// Remove from stack and screen
RatingView.RemoveArrangedSubview(icon);
icon.RemoveFromSuperview();
// Animate stack
UIView.Animate(0.25, ()=>{
// Adjust stack view
RatingView.LayoutIfNeeded();
});
}
Давайте рассмотрим несколько частей этого кода подробно. Во-первых, мы используем if инструкции для проверка, что не более пяти "звезд" или меньше нуля.
Чтобы добавить новую "звездочку", мы загружаем его изображение и задали его режим содержимого в режим масштабирования в соответствии с аспектом:
var icon = new UIImageView (new UIImage("icon.png"));
icon.ContentMode = UIViewContentMode.ScaleAspectFit;
При добавлении значка "звезда" не искажается при добавлении в представление стека.
Затем мы добавим новый значок "звезда" в коллекцию вложенных представлений стека:
RatingView.AddArrangedSubview(icon);
Вы заметите, что мы добавили UIImageView его в UIStackViewArrangedSubviews свойство, а не к свойствуSubView. Любое представление, которое требуется, чтобы представление стека контролировало его макет, необходимо добавить в ArrangedSubviews свойство.
Чтобы удалить вложенное представление из представления стека, сначала мы получаем подвызление, чтобы удалить:
var icon = RatingView.ArrangedSubviews[RatingView.ArrangedSubviews.Length-1];
Затем необходимо удалить его из ArrangedSubviews коллекции и супер-представления:
// Remove from stack and screen
RatingView.RemoveArrangedSubview(icon);
icon.RemoveFromSuperview();
При удалении подвида из коллекции ArrangedSubviews удаляется из элемента управления "Представление стека", но не удаляется с экрана.
Динамическое изменение содержимого
Представление стека автоматически настраивает макет вложенных представлений при добавлении, удалении или скрытии подвида. Макет также будет изменен, если любое свойство представления стека настраивается (например, его Axis).
Изменения макета можно анимировать, поместив их в блок анимации, например:
// Animate stack
UIView.Animate(0.25, ()=>{
// Adjust stack view
RatingView.LayoutIfNeeded();
});
Многие свойства представления стека можно указать с помощью классов размера в раскадровке. Эти свойства будут автоматически анимированы в ответ на изменения размера или ориентации.
Итоги
В этой статье описано проектирование и работа с стекаемого представления в приложении Xamarin.tvOS.