Работа с навигацией и фокусом tvOS в Xamarin

В этой статье описывается концепция Фокуса и ее использование для представления и обработки навигации внутри приложения Xamarin.tvOS.

В этой статье рассматривается концепция Фокуса и способ обработки навигации в пользовательском интерфейсе приложения Xamarin.tvOS. Мы рассмотрим, как встроенные элементы управления навигацией tvOS используют фокус, выделение и выделение, чтобы обеспечить навигацию пользовательского интерфейса приложения Xamarin.tvOS.

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

Наконец, мы рассмотрим работу с фокусом, обновлениями фокуса, фокусами, фокусом в коллекциях и включением Parallax на представлениях изображений в приложениях Xamarin.tvOS.

Область

Пользователи приложения Xamarin.tvOS не будут взаимодействовать с интерфейсом напрямую, как с iOS, где они касаются изображений на экране устройства, но косвенно из комнаты с помощью Siri Remote. При проектировании пользовательского интерфейса приложения необходимо помнить об этом, чтобы он был естественным образом, но при этом пользователь погружен в интерфейс Apple TV.

Успешное приложение tvOS реализует навигацию таким образом, что плавно поддерживает назначение приложения и структуру данных, которые он представляет, не вызывая внимания к самой навигации. Создайте навигацию так, чтобы она чувствовала себя естественной и знакомой, не доминируя в пользовательском интерфейсе или фокусе от содержимого и пользовательского интерфейса приложений.

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

С каждым новым экраном данных пользователь переходит в этот стек экранов. С помощью кнопки Меню в Siri Remote они могут перемещаться назад через стек, чтобы вернуться к предыдущему экрану или главному меню.

Apple предлагает учитывать следующее при проектировании навигации для вашего приложения tvOS:

• Макет навигации для быстрого и простого поиска контента. Пользователи хотят получить доступ к содержимому в приложении в наименьшем количестве касаний, нажимает и проводите пальцем по возможности. Упрощение навигации и упорядочение содержимого до минимального количества экранов.
• Создание интерфейса жидкости с помощью сенсорного интерфейса — убедитесь, что пользователь может перемещаться между фокусируемыми элементами с минимальными трениями с помощью наименьшего количества жестов.
• Проектирование с фокусом в уме . Так как пользователь взаимодействует с содержимым в комнате, им необходимо переместить фокус на элемент пользовательского интерфейса, прежде чем взаимодействовать с ним с помощью Siri Remote. Пользователи будут разочарованы вашим приложением, если для них требуется слишком много жестов, чтобы достичь своих целей.
• Укажите обратную навигацию с помощью кнопки меню. Чтобы создать простой и знакомый интерфейс, пользователи могут перемещаться назад с помощью кнопки меню Siri Remote. Нажатие кнопки меню всегда должно вернуться к предыдущему экрану или вернуться в главное меню приложения. На верхнем уровне приложения нажмите кнопку меню , чтобы вернуться на начальный экран Apple TV.
• Как правило, избегайте отображения кнопки "Назад", так как нажатие кнопки меню в Siri Remote перемещается назад через стек экрана, избегайте отображения дополнительного элемента управления, дублирующего это поведение. Исключением из этого правила является приобретение экранов или экранов с разрушительными действиями (например, удаление содержимого), где также должна отображаться кнопка "Отмена ".
• Показать большие коллекции на одном экране, а не многие — Siri Remote был разработан для перехода через большую коллекцию содержимого быстро и просто с помощью жестов. Если ваше приложение работает с большой коллекцией фокусируемых элементов, попробуйте сохранить их на одном экране вместо того, чтобы разбить их на многие экраны, которые требуют больше навигации по части пользователя.
• Используйте стандартные элементы управления для навигации . Опять же, чтобы создать простой и знакомый пользовательский интерфейс, где это возможно, используйте встроенные UIKit элементы управления, такие как элементы управления страницы, панели вкладок, сегментированные элементы управления, представления таблиц, представления коллекции и разделенные представления для навигации приложения. Так как пользователь уже знаком с этими элементами, они интуитивно смогут перемещаться по вашему приложению.
• Пользу горизонтальной навигации по содержимому - из-за природы Apple TV, прокрутка слева вправо на Siri Remote является более естественной, чем вверх и вниз. Этот параметр следует учитывать при разработке макетов контента для приложения.

Фокус и выбор

На Apple TV изображение, кнопка или другой элемент пользовательского интерфейса считается фокусом , когда он является целью текущей навигации.

В отличие от устройств iOS, в которых пользователь напрямую взаимодействует с элементами на сенсорном экране устройства, пользователи взаимодействуют с элементами tvOS из всей комнаты с помощью Siri Remote. Для представления и обработки этого взаимодействия с пользователем Apple TV использует модель на основе Фокуса .

С помощью жестов и нажатий кнопки в Siri Remote пользователь перемещает фокус с одного элемента пользовательского интерфейса на другой. После перехода фокуса на нужный элемент пользователь щелкает, чтобы выбрать содержимое или активировать действие, представленное этим элементом.

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

Apple предлагает следующие предложения по работе с Фокусом и выбором:

• Используйте встроенные элементы управления пользовательского интерфейса для эффектов движения. С помощью UIKit API фокусировки в пользовательском интерфейсе модель фокусировки автоматически применяет движения и визуальные эффекты по умолчанию к элементам пользовательского интерфейса. Это позволяет приложению чувствовать себя собственным и знакомым пользователям платформы Apple TV и обеспечивает гибкое и интуитивно понятное перемещение между фокусируемыми элементами.
• Перемещение фокуса в ожидаемых направлениях — на Apple TV почти каждый элемент использует непрямую манипуляцию. Например, пользователь использует Siri Remote для перемещения фокуса, а система автоматически прокручивает интерфейс для отображения текущего фокуса. Если приложение реализует этот тип взаимодействия, убедитесь, что фокус перемещается в направлении жеста пользователя. Таким образом, если пользователь проводит пальцем вправо на удаленном фокусе Siri, должен перейти вправо (что может привести к прокрутке экрана влево). Одним из исключений из этого правила являются элементы полноэкранного экрана, использующие прямую манипуляцию (при перемещении вверх по элементу вверх).
• Убедитесь, что элемент с фокусом очевиден . Так как пользователи взаимодействуют с элементами пользовательского интерфейса издалека, важно выделить текущий ориентированный элемент. Обычно это будет обрабатываться автоматически встроенными UIKit элементами. Для пользовательских элементов управления используйте такие функции, как размер элемента или тени для отображения фокуса.
• Используйте parallax, чтобы сделать ориентированные элементы адаптивными — небольшие, циклические жесты в удаленном режиме Siri приводят к нежному, реальному перемещению фокусировки. Этот эффект Parallax встроен в UIKit многоуровневые изображения , чтобы дать пользователю чувство соединения с фокусным элементом.
• Создание фокусируемых элементов соответствующего размера — большие элементы с большим интервалом проще выбирать и перемещаться, чем небольшие элементы.
• Элемент пользовательского интерфейса конструктора, чтобы выглядеть хорошо или нефокусировано . Обычно Apple TV представляет элемент фокусировки, увеличив его размер. Убедитесь, что элементы пользовательского интерфейса приложений выглядят отлично на любом размере презентации и при необходимости предоставляют ресурсы для элементов большего размера.
• Представление изменений фокуса динамичный — используйте анимацию для плавного перехода между элементами с фокусом и нефокусным состоянием, чтобы сохранить переходы от джаривания.
• Не отображайте курсор . Пользователи ожидают навигации по пользовательскому интерфейсу приложения с помощью фокуса, а не путем перемещения курсора по экрану. Пользовательский интерфейс всегда должен использовать модель фокусировки для представления согласованного взаимодействия с пользователем.

Работа с фокусом

Может потребоваться создать пользовательский элемент управления, который может стать элементом с фокусируемым элементом. Если это так переопределит CanBecomeFocused свойство и возврат true, иначе возвращается false. Например:

public class myView : UIView
{
    public override bool CanBecomeFocused {
        get {return true;}
    }
}

В любое время можно использовать Focused свойство элемента управления, чтобы узнать, является ли он текущим элементом UIKit . Если true элемент пользовательского интерфейса в данный момент имеет фокус, в противном случае он не выполняется. Например:

// Is my view in focus?
if (myView.Focused) {
    // Do something
    ...
}

Хотя вы не можете напрямую переместить фокус на другой элемент пользовательского интерфейса с помощью кода, можно указать, какой элемент пользовательского интерфейса сначала получает фокус при загрузке экрана, задав для свойства значение PreferredFocusedView true. Например:

// Make the play button the starting focus item
playButton.PreferredFocusedView = true;

Работа с обновлениями фокуса

Когда пользователь приводит к перемещению фокуса с одного элемента пользовательского интерфейса на другой (например, в ответ на жест на Siri Remote), событие обновления фокуса будет отправлено как элементу, теряющем фокус, так и элементу.

Для пользовательских элементов, наследующих от UIView или UIViewController, можно переопределить несколько методов для работы с событием обновления фокуса:

• DidUpdateFocus — этот метод будет вызываться в любой момент, когда представление получает или теряет фокус.
• ShouldUpdateFocus — используйте этот метод для определения места перемещения фокуса.

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

Работа с направляющими фокуса

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

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

Рассмотрим следующий макет пользовательского интерфейса:

Так как кнопка "Дополнительные сведения" не попадает на горизонтальную и вертикальную сетку с кнопкой "Купить", она будет недоступна пользователю. Однако это можно легко исправить с помощью руководства фокуса для предоставления подсказок движения подсистеме фокусировки.

Руководство фокуса (UIFocusGuide) предоставляет невидимую область представления в качестве фокусируемой подсистемы фокусировки, что позволяет перенаправлять фокус на другое представление.

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

public UIFocusGuide FocusGuide = new UIFocusGuide ();
...

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();

    // Add Focus Guide to layout
    View.AddLayoutGuide (FocusGuide);

    // Define Focus Guide that will allow the user to move
    // between the More Info and Buy buttons.
    FocusGuide.LeftAnchor.ConstraintEqualTo (BuyButton.LeftAnchor).Active = true;
    FocusGuide.TopAnchor.ConstraintEqualTo (MoreInfoButton.TopAnchor).Active = true;
    FocusGuide.WidthAnchor.ConstraintEqualTo (BuyButton.WidthAnchor).Active = true;
    FocusGuide.HeightAnchor.ConstraintEqualTo (MoreInfoButton.HeightAnchor).Active = true;
}

Во-первых, создается и добавляется в UIFocusGuide коллекцию руководства по макету AddLayoutGuide представления с помощью метода.

Затем направляющие фокуса вверху, левом, ширине и высоте привязываются относительно кнопки "Дополнительные сведения " и "Купить ", чтобы разместить их между ними. См.

Также важно отметить, что новые ограничения активируются, так как они создаются путем задания свойства Active trueследующим образом:

FocusGuide.LeftAnchor.ConstraintEqualTo (...).Active = true;

С помощью нового руководства фокуса, установленного и добавленного в представление, метод контроллера DidUpdateFocus представления можно переопределить, а следующий код добавлен для перемещения между кнопками "Дополнительные сведения " и "Купить ".

public override void DidUpdateFocus (UIFocusUpdateContext context, UIFocusAnimationCoordinator coordinator)
{
    base.DidUpdateFocus (context, coordinator);

    // Get next focusable item from context
    var nextFocusableItem = context.NextFocusedView;

    // Anything to process?
    if (nextFocusableItem == null) return;

    // Decide the next focusable item based on the current
    // item with focus
    if (nextFocusableItem == MoreInfoButton) {
        // Move from the More Info to Buy button
        FocusGuide.PreferredFocusedView = BuyButton;
    } else if (nextFocusableItem == BuyButton) {
        // Move from the Buy to the More Info button
        FocusGuide.PreferredFocusedView = MoreInfoButton;
    } else {
        // No valid move
        FocusGuide.PreferredFocusedView = null;
    }
}

Во-первых, этот код получает NextFocusedView из UIFocusUpdateContext переданного (context). Если это представление null, обработка не требуется, и метод завершился.

nextFocusableItem Затем вычисляется. Если оно соответствует кнопке "Дополнительные сведения " или "Купить ", фокус отправляется на обратную кнопку с помощью свойства "Руководство фокуса PreferredFocusedView ". Например:

// Move from the More Info to Buy button
FocusGuide.PreferredFocusedView = BuyButton;

Если ни кнопка не является источником смены фокуса, PreferredFocusedView то свойство очищается:

// No valid move
FocusGuide.PreferredFocusedView = null;

Работа с фокусом в коллекциях

При определении того, может ли отдельный элемент быть фокусируемым в UICollectionView или а UITableView, вы переопределите методы UICollectionViewDelegate или UITableViewDelegate соответственно. Например:

public class CardHandDelegate : UICollectionViewDelegateFlowLayout
{
    ...
    public override bool CanFocusItem (UICollectionView collectionView, NSIndexPath indexPath)
    {
        if (indexPath == null) {
            return false;
        } else {
            var controller = collectionView as CardHandViewController;
            return !controller.Hand [indexPath.Row].IsFaceDown;
        }
    }
}

Метод CanFocusItem возвращает true , если текущий элемент может находиться в фокусе, в противном случае возвращается false.

Если вы хотите UICollectionView запомнить или UITableView восстановить фокус на последнем элементе, когда он теряет и восстанавливает фокус, задайте RemembersLastFocusedIndexPath для свойства значение true.

Фокус и параллакс

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

Если пользователь делает медленный, циклический жест на удаленном устройстве Siri, фокусный элемент будет перестраивать в режиме реального времени в ответ на это движение. По мере того как происходит, освещенный блеск применяется к его изображению, что делает поверхность, как представляется, блеск. После определенного количества бездействия все неактивное содержимое неактивно и элемент "Фокус" будет увеличиваться еще больше.

Эти эффекты работают вместе, чтобы обеспечить психическое соединение между контентом на экране телевизора и пользователем, взаимодействующим с Apple TV из дивана.

На Apple TV этот эффект Parallax используется во всей системе для передачи чувства трехмерной глубины и динамики в фокус-элементы. tvOS использует ряд прозрачных, многоуровневых изображений, которые перемещаются и масштабируются динамически для создания этого эффекта.

Многоуровневые изображения необходимы для значка приложения tvOS и поддерживаются для динамического содержимого верхней полки. Хотя и не требуется, Apple настоятельно предлагает реализовать многоуровневые изображения в любом другом фокусируемом элементе в пользовательском интерфейсе приложения.

Включение Параллакса

Элемент UIImageView управления (или любой элемент управления, наследующий от UIImageView) автоматически поддерживает эффект Parallax. По умолчанию эта поддержка отключена, чтобы включить ее, используйте следующий код:

myImageView.AdjustsImageWhenAncestorFocused = true;

Если задано это свойство true, представление изображения автоматически получает эффект Parallax при выборе пользователем и фокусе.

Итоги

В этой статье описывается концепция Фокуса и его использование для обработки навигации в пользовательском интерфейсе приложения Xamarin.tvOS. В ней рассматривается, как встроенные элементы управления навигацией tvOS используют фокус, выделение и выделение для обеспечения навигации. Далее он рассмотрел, как фокус можно использовать с параллаксом и многоуровневыми изображениями, чтобы предоставить визуальные подсказки для текущего состояния навигации для конечного пользователя. Наконец, она изучила работу с фокусом, обновлениями фокуса, фокусом в коллекциях и включением Parallax.

Связанные ссылки

• tvOS
• Руководства по пользовательскому интерфейсу tvOS
• Руководство по программированию приложений для tvOS