Praca z nawigacją i fokusem systemu tvOS na platformie Xamarin

  • Artykuł

W tym artykule opisano koncepcję koncentracji uwagi oraz sposób jej użycia do prezentowania i obsługi nawigacji wewnątrz aplikacji platformy Xamarin.tvOS.

W tym artykule opisano koncepcję koncentracji uwagi i sposób jej użycia do obsługi nawigacji w interfejsie użytkownika aplikacji platformy Xamarin.tvOS. Sprawdzimy, w jaki sposób wbudowane kontrolki nawigacji systemu tvOS używają fokusu, wyróżniania i zaznaczenia w celu zapewnienia nawigacji interfejsu użytkownika aplikacji Xamarin.tvOS.

tvOS apps User Interface Navigation

Następnie przyjrzymy się temu, jak fokus może być używany z obrazami parallax i warstwowymi, aby zapewnić wizualne wskazówki dotyczące bieżącego stanu nawigacji dla użytkownika końcowego.

Na koniec przyjrzymy się pracy z fokusem, fokusem Aktualizacje, przewodnikami fokusu, fokusem w kolekcjach i włączaniem parallax w widokach obrazów w aplikacjach platformy Xamarin.tvOS.

Użytkownicy aplikacji Xamarin.tvOS nie będą wchodzić w interakcje z interfejsem bezpośrednio w systemie iOS, gdzie naciskają obrazy na ekranie urządzenia, ale pośrednio z całego pokoju przy użyciu Funkcji Siri Remote. Należy pamiętać o tym podczas projektowania interfejsu użytkownika aplikacji, tak aby przepływał naturalnie, ale użytkownik zanurzył się w środowisku apple TV.

Udana aplikacja tvOS implementuje nawigację w sposób, który płynnie obsługuje przeznaczenie aplikacji i strukturę prezentowanych danych bez zwracania uwagi na samą nawigację. Zaprojektuj nawigację tak, aby była naturalna i znana bez dominacji w interfejsie użytkownika lub rysowania fokusu od zawartości i środowiska użytkownika aplikacji.

The tvOS settings app

Podczas korzystania z urządzenia Apple TV użytkownik zazwyczaj przechodzi przez skumulowany zestaw ekranów, z których każdy prezentuje dany zestaw zawartości. Z kolei każdy nowy ekran może prowadzić do co najmniej jednego podekranu zawartości przy użyciu standardowych kontrolek interfejsu użytkownika, takich jak przyciski, paski tabulacji, tabele, widoki kolekcji lub widoki podzielone.

Przy każdym nowym ekranie danych użytkownik przechodzi bardziej szczegółowo do tego stosu ekranów. Za pomocą przycisku Menu w zdalnym menu Siri mogą przechodzić do tyłu przez stos, aby powrócić do poprzedniego ekranu lub menu głównego.

Firma Apple sugeruje, aby podczas projektowania nawigacji dla aplikacji tvOS pamiętać o następujących kwestiach:

  • Układ nawigacji w celu szybkiego i łatwego znajdowania zawartości — użytkownicy chcą uzyskać dostęp do zawartości w aplikacji w najmniejszej liczbie naciśnięć, kliknięć i machnięcia tak szybko, jak to możliwe. Uprość nawigację i organizuj zawartość w minimalnej liczbie ekranów.
  • Tworzenie interfejsu płynnego przy użyciu dotyku — upewnij się, że użytkownik może przechodzić między elementami z możliwością koncentracji uwagi przy minimalnym tarciu przy użyciu najmniejszej liczby możliwych gestów.
  • Projektowanie z myślą o fokusie — ponieważ użytkownik wchodzi w interakcję z zawartością w całym pomieszczeniu, musi przenieść fokus do elementu interfejsu użytkownika przed rozpoczęciem interakcji z nim przy użyciu funkcji Siri Remote. Użytkownicy będą sfrustrowani aplikacją, jeśli wymaga zbyt wielu gestów, aby osiągnąć swoje cele.
  • Zapewnij nawigację wstecz za pomocą przycisku Menu — aby utworzyć łatwe i znane środowisko, umożliwia użytkownikom przechodzenie do tyłu za pomocą przycisku Menu zdalnego Siri. Naciśnięcie przycisku Menu powinno zawsze powrócić do poprzedniego ekranu lub wrócić do menu głównego aplikacji. Na najwyższym poziomie aplikacji naciśnięcie przycisku Menu powinno powrócić do ekranu głównego apple TV.
  • Zazwyczaj unikaj wyświetlania przycisku Wstecz — ponieważ naciśnięcie przycisku Menu na zdalnym siri przechodzi do tyłu przez stos ekranu, unikaj wyświetlania dodatkowej kontrolki, która duplikuje to zachowanie. Wyjątkiem od tej reguły jest zakup ekranów lub ekranów z destrukcyjnymi akcjami (takimi jak usuwanie zawartości), w których powinien być również wyświetlany przycisk Anuluj .
  • Pokaż duże kolekcje na jednym ekranie, zamiast wielu — Pilot Siri został zaprojektowany tak, aby poruszać się po dużej kolekcji zawartości szybko i łatwo za pomocą gestów. Jeśli aplikacja współpracuje z dużą kolekcją elementów z możliwością koncentracji uwagi, rozważ ich przechowywanie na jednym ekranie, zamiast rozbijać je na wiele ekranów, które wymagają większej nawigacji po stronie użytkownika.
  • Użyj kontrolek standardowych na potrzeby nawigacji — ponownie, aby utworzyć łatwe i znane środowisko użytkownika, w miarę możliwości, używać wbudowanych UIKit kontrolek, takich jak kontrolki strony, paski tabulacji, kontrolki segmentowane, widoki tabeli, widoki kolekcji i widoki podzielone dla nawigacji aplikacji. Ponieważ użytkownik jest już zaznajomiony z tymi elementami, intuicyjnie będzie mógł nawigować po aplikacji.
  • Preferuj nawigację w poziomie zawartości — ze względu na charakter urządzenia Apple TV przesuwanie w lewo do prawej strony na ekranie Siri Remote jest bardziej naturalne niż w górę i w dół. Rozważ tę opcję podczas projektowania układów zawartości dla aplikacji.

Fokus i wybór

Na urządzeniu Apple TV obraz, przycisk lub inny element interfejsu użytkownika jest uznawany za fokus , gdy jest to element docelowy bieżącej nawigacji.

Focus and Selection example

W przeciwieństwie do urządzeń z systemem iOS, na których użytkownik bezpośrednio wchodzi w interakcję z elementami na ekranie dotykowym urządzenia, użytkownicy wchodzą w interakcje z elementami tvOS z całego pokoju przy użyciu funkcji Siri Remote. Aby przedstawić tę interakcję użytkownika i obsłużyć tę interakcję, urządzenie Apple TV korzysta z modelu opartego na fokusie.

Za pomocą gestów i przycisków naciśniętych na urządzeniu Siri Remote użytkownik przenosi fokus z jednego elementu interfejsu użytkownika do innego. Po przesunięciu fokusu na żądany element użytkownik klika, aby wybrać zawartość lub aktywować akcję reprezentowaną przez ten element.

W miarę zmiany fokusu subtelne animacje i efekty (takie jak efekt parallax na obrazach) są używane do wyraźnego identyfikowania elementu interfejsu użytkownika, który obecnie ma fokus.

Firma Apple ma następujące sugestie dotyczące pracy z fokusem i wyborem:

  • Użyj wbudowanych kontrolek interfejsu użytkownika dla efektów ruchu — przy użyciu UIKit interfejsu API koncentracji uwagi i interfejsu API koncentracji uwagi model koncentracji uwagi automatycznie zastosuje domyślne efekty ruchu i wizualizacji do elementów interfejsu użytkownika. Dzięki temu aplikacja czuje się natywnie i znajoma dla użytkowników platformy Apple TV i umożliwia płynne i intuicyjne przemieszczanie się między elementami z możliwością koncentracji uwagi.
  • Przenieś fokus w oczekiwanych kierunkach — w usłudze Apple TV prawie każdy element używa manipulacji pośredniej. Na przykład użytkownik używa funkcji Siri Remote do przenoszenia fokusu, a system automatycznie przewija interfejs, aby zachować widoczność aktualnie ukierunkowanego elementu. Jeśli aplikacja implementuje ten typ interakcji, upewnij się, że fokus porusza się w kierunku gestu użytkownika. Jeśli więc użytkownik przesuwa palcem w prawo na zdalnym fokusie Siri powinien przejść w prawo (co może spowodować przewinięcie ekranu w lewo). Jednym wyjątkiem od tej reguły są elementy pełnoekranowe, które używają bezpośredniej manipulacji (gdzie przesuwanie w górę przesuwa element w górę).
  • Upewnij się, że element ukierunkowany jest oczywisty — ponieważ użytkownicy wchodzą w interakcje z elementami interfejsu użytkownika z daleka, ważne jest, aby obecnie skoncentrowany element wyróżniał się. Zazwyczaj jest to obsługiwane automatycznie przez wbudowane UIKit elementy. W przypadku kontrolek niestandardowych użyj funkcji, takich jak rozmiar elementu lub cień, aby pokazać fokus.
  • Użyj parametru Parallax, aby elementy ukierunkowane reagowały — małe, okrągłe gesty na zdalnym skutek Siri w delikatnym, czasie rzeczywistym ruchu elementu ukierunkowanego. Ten efekt parallax jest wbudowany w UIKitwarstwowe obrazy , aby dać użytkownikowi poczucie połączenia z elementem ukierunkowanym.
  • Tworzenie elementów z możliwością koncentracji uwagi o odpowiednim rozmiarze — duże elementy z dużą pulą odstępów są łatwiejsze do wybierania i nawigowania niż mniejsze elementy.
  • Projektowanie elementu interfejsu użytkownika w celu wyglądu dobrego fokusu lub bez fokusu — zazwyczaj apple TV reprezentuje element skoncentrowany, zwiększając jego rozmiar. Upewnij się, że elementy interfejsu użytkownika aplikacji wyglądają świetnie w dowolnym rozmiarze prezentacji i w razie potrzeby dostarczają zasoby dla elementów o większych rozmiarach.
  • Przedstawianie zmian fokusu płynnie — używaj animacji, aby płynnie zanikać między elementami Skoncentrowany i Nieskoncentrowany stan, aby zachować przechodzenie z jarring.
  • Nie wyświetlaj kursora — użytkownicy oczekują nawigowania po interfejsie użytkownika aplikacji przy użyciu fokusu, a nie przez przeniesienie kursora wokół ekranu. Interfejs użytkownika powinien zawsze używać modelu koncentracji uwagi do prezentowania spójnego środowiska użytkownika.

Praca z fokusem

Czasami chcesz utworzyć kontrolkę niestandardową, która może stać się elementem fokusowym. Jeśli tak zastąpić CanBecomeFocused właściwość i zwrócić wartość , w przeciwnym razie zwróć truewartość false. Na przykład:

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

W dowolnym momencie możesz użyć Focused właściwości kontrolki UIKit , aby sprawdzić, czy jest to bieżący element. Jeśli true element interfejsu użytkownika ma obecnie fokus, w przeciwnym razie nie. Na przykład:

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

Chociaż nie można bezpośrednio przenieść fokusu do innego elementu interfejsu użytkownika za pomocą kodu, możesz określić, który element interfejsu użytkownika najpierw pobiera fokus, gdy ekran jest ładowany, ustawiając jego PreferredFocusedView właściwość na true. Na przykład:

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

Praca z Aktualizacje fokusu

Gdy użytkownik powoduje przeniesienie fokusu z jednego elementu interfejsu użytkownika na inny (na przykład w odpowiedzi na gest na zdalnym Siri), zdarzenie aktualizacji fokusu zostanie wysłane zarówno do elementu tracącego fokus, jak i elementu uzyskującego fokus.

W przypadku elementów niestandardowych dziedzicujących z UIView klasy lub UIViewControllermożna zastąpić kilka metod, aby pracować ze zdarzeniem aktualizacji fokusu:

  • DidUpdateFocus — ta metoda będzie wywoływana za każdym razem, gdy widok zyskuje lub traci fokus.
  • ShouldUpdateFocus — użyj tej metody, aby zdefiniować, gdzie fokus może zostać przeniesiony.

Aby zażądać, aby aparat koncentracji uwagi przenosi fokus z powrotem do elementu interfejsu PreferredFocusedView użytkownika, wywołaj SetNeedsUpdateFocus metodę kontrolera widoku.

Ważne

Wywołanie SetNeedsUpdateFocus ma wpływ tylko wtedy, gdy kontroler widoku, względem którego jest wywoływany, zawiera widok, który aktualnie ma fokus.

Praca z przewodnikami fokusu

Aparat koncentracji uwagi wbudowany w system tvOS doskonale nadaje się do obsługi ruchów między elementami, które mieszczą się w siatce poziomej i pionowej. Zazwyczaj trzeba nic więcej zrobić, niż dodać elementy interfejsu użytkownika do projektu interfejsu, a aparat koncentracji uwagi automatycznie obsłuży ruch między tymi elementami bez interwencji dewelopera.

Jednak czasami ze względu na konieczność projektowania interfejsu użytkownika, gdy elementy interfejsu użytkownika nie spadną na siatkę poziomą i pionową i mogą być niedostępne, ponieważ są ukośne dla siebie. Dzieje się tak, ponieważ aparat koncentracji uwagi został zaprojektowany tak, aby obsługiwał tylko prosty ruch w górę, w dół, w lewo i w prawo między elementami interfejsu użytkownika.

Przykładowy układ interfejsu użytkownika:

Working with Focus Guides example

Ponieważ przycisk Więcej informacji nie znajduje się na siatce poziomej i pionowej z przyciskiem Kup, byłby niedostępny dla użytkownika. Można to jednak łatwo poprawić za pomocą przewodnika fokusu, aby zapewnić wskazówki dotyczące ruchu aparatu koncentracji uwagi.

Przewodnik fokusu (UIFocusGuide) uwidacznia niewidoczny obszar widoku jako fokus dla aparatu koncentracji uwagi, co umożliwia przekierowanie fokusu do innego widoku.

Aby rozwiązać powyższy przykład, do kontrolera widoku można dodać następujący kod, aby utworzyć przewodnik fokusu między przyciskami Więcej informacji i Kup :

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

Najpierw zostanie utworzony i UIFocusGuide dodany do kolekcji Podręcznik układu widoku przy użyciu AddLayoutGuide metody .

Następnie prowadnica fokusu Górna, Lewa, Szerokość i Wysokość Kotwice są dostosowywane względem przycisków Więcej informacji i Kup , aby ustawić je między nimi. Zobacz:

Example Focus Guide

Należy również pamiętać, że nowe ograniczenia są aktywowane w miarę ich tworzenia przez ustawienie właściwości Active na true:

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

Po ustanowieniu i dodaniu nowego przewodnika koncentracji uwagi do widoku można zastąpić metodę kontrolera DidUpdateFocus widoku, a następujący kod dodany w celu przejścia między przyciskami Więcej informacji i Kup :

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

Najpierw ten kod pobiera element NextFocusedView z UIFocusUpdateContext obiektu , który został przekazany (context). Jeśli ten widok ma nullwartość , nie jest wymagane żadne przetwarzanie i metoda została zakończona.

Następnie zostanie obliczona nextFocusableItem wartość . Jeśli pasuje do przycisków Więcej informacji lub Kup , fokus jest wysyłany do przeciwnego przycisku przy użyciu właściwości Przewodnik PreferredFocusedView koncentracji uwagi. Na przykład:

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

W przypadku, gdy żaden przycisk nie jest źródłem przesunięcia fokusu, PreferredFocusedView właściwość jest czyszczone:

// No valid move
FocusGuide.PreferredFocusedView = null;

Praca z fokusem w kolekcjach

Podczas podejmowania decyzji, czy pojedynczy element może być fokusem w elemencie UICollectionViewUITableViewlub , zastąpisz odpowiednio metody UICollectionViewDelegate lub UITableViewDelegate . Na przykład:

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

Metoda CanFocusItem zwraca wartość true , jeśli bieżący element może być fokusem, w przeciwnym razie zwraca wartość false.

Jeśli chcesz, aby obiekt UICollectionView lub UITableView , aby zapamiętać i przywrócić fokus do ostatniego elementu, gdy utraci i odzyska fokus, ustaw RemembersLastFocusedIndexPath właściwość na truewartość .

Fokus i parallax

Jak wspomniano powyżej, element interfejsu użytkownika jest uważany za fokus , gdy jest to bieżący element podczas zdarzenia nawigacji. Zazwyczaj w miarę jak element jest w centrum uwagi, rozmiar jest nieco zwiększony i jest wizualnie podwyższony przy użyciu cienia.

Jeśli użytkownik wykonuje powolny, okrągły gest na zdalnym Siri, element skoncentrowany będzie kołysać się w czasie rzeczywistym w odpowiedzi na ten ruch. W miarę kołysania się, oświetlony szen jest stosowany do jego obrazu, co sprawia, że powierzchnia wydaje się świecić. Po określonej ilości braku aktywności każda zawartość poza fokusem zostanie przygaszone, a element Ukierunkowany wzrośnie jeszcze większa.

Efekty te współpracują ze sobą, aby zapewnić połączenie psychiczne między zawartością na ekranie telewizora a użytkownikiem wchodzącym w interakcję z urządzeniem Apple TV z kanapy.

W apple TV ten efekt Parallax jest używany w całym systemie, aby przekazać poczucie głębokości 3D i dynamiki do elementów w centrum uwagi. System tvOS używa serii przezroczystych, warstwowych obrazów, które przenosi i skaluje dynamicznie w celu utworzenia tego efektu.

Obrazy warstwowe są wymagane dla ikony aplikacji tvOS i są obsługiwane w przypadku zawartości dynamicznej najwyższej półki. Chociaż nie jest to wymagane, firma Apple zdecydowanie sugeruje zaimplementowanie obrazów warstwowych w innych elementach z możliwością koncentracji uwagi w interfejsie użytkownika aplikacji.

Włączanie parallax

Kontrolka (lub dowolna kontrolka UIImageView dziedziczona po UIImageView) automatycznie obsługuje efekt parallax. Domyślnie ta obsługa jest wyłączona, aby ją włączyć, użyj następującego kodu:

myImageView.AdjustsImageWhenAncestorFocused = true;

Po ustawieniu tej właściwości na truewartość widok obrazu automatycznie uzyska efekt parallax po wybraniu go przez użytkownika i fokusu.

Podsumowanie

W tym artykule opisano koncepcję koncentracji uwagi i sposób jej użycia do obsługi nawigacji w interfejsie użytkownika aplikacji platformy Xamarin.tvOS. Sprawdza, w jaki sposób wbudowane kontrolki nawigacji systemu tvOS używają fokusu, wyróżniania i zaznaczenia w celu zapewnienia nawigacji. Następnie przyjrzeliśmy się temu, jak fokus może być używany z obrazami parallax i warstwowymi w celu zapewnienia wizualnych wskazówek dotyczących bieżącego stanu nawigacji dla użytkownika końcowego. Na koniec przeanalizowała pracę z fokusem, fokusem Aktualizacje, fokusem w kolekcjach i włączaniem parallaxu.