Udostępnij za pośrednictwem

Praca z przyciskami systemu tvOS na platformie Xamarin

  • Artykuł

Ostrzeżenie

Projektant systemu iOS zostały wycofane w programie Visual Studio 2019 w wersji 16.8 i Visual Studio 2019 dla komputerów Mac w wersji 8.8 i usunięte w programie Visual Studio 2019 w wersji 16.9 i Visual Studio dla komputerów Mac w wersji 8.9. Zalecanym sposobem kompilowania interfejsów użytkownika systemu iOS jest bezpośrednie na komputerze Mac z uruchomionym narzędziem Xcode Interface Builder. Aby uzyskać więcej informacji, zobacz Projektowanie interfejsów użytkownika za pomocą programu Xcode.

Użyj wystąpienia UIButton klasy, aby utworzyć przycisk z możliwością koncentracji uwagi, który można wybrać w oknie systemu tvOS. Gdy użytkownik wybierze przycisk, wysyła komunikat Akcja do obiektu docelowego, aby aplikacja Xamarin.tvOS odpowiadała na dane wejściowe użytkownika.

Przykładowe przyciski

Aby uzyskać więcej informacji na temat pracy z funkcją koncentracji uwagi i nawigowania za pomocą pilota Siri, zobacz dokumentację Praca z nawigacją i fokusem oraz kontrolerami zdalnymi i Bluetooth Siri.

Informacje o przyciskach

W systemie tvOS przyciski są używane do akcji specyficznych dla aplikacji i mogą zawierać tytuł, ikonę lub oba te elementy. Gdy użytkownik nawiguje po interfejsie użytkownika aplikacji przy użyciu funkcji Siri Remote, fokus przechodzi do danego przycisku, zmieniając tekst i kolory tła. Cień jest również stosowany do przycisku dodającego efekt 3D, który wydaje się pojawiać się powyżej pozostałej części interfejsu użytkownika.

Przykładowe przyciski

Firma Apple ma następujące sugestie dotyczące pracy z przyciskami:

  • Użyj tytułu lub ikony — chociaż zarówno ikona, jak i tytuł mogą być zawarte w przycisku, spacja jest ograniczona, więc nie próbuj połączyć obu tych elementów.
  • Wyraźnie oznacz przyciski destruktywne — jeśli przycisk wykonuje destrukcyjną akcję (taką jak usunięcie pliku), wyraźnie oznacz go jako tekst i/lub ikonę. Akcje destrukcyjne powinny zawsze przedstawiać alert z prośbą użytkownika o ograniczenie akcji.
  • Nie używaj przycisków Wstecz — przycisk Menu na zdalnym siri służy do powrotu do poprzedniego ekranu. Jednym wyjątkiem od tej reguły jest zakup w aplikacji lub destrukcyjne akcje, w których powinien być wyświetlany przycisk Anuluj .

Aby uzyskać więcej informacji na temat pracy z fokusem i nawigacją, zobacz dokumentację Praca z nawigacją i fokusem .

Ikony przycisków

Firma Apple sugeruje, że używasz prostych, rozpoznawalnych obrazów dla ikon przycisku. Nadmiernie złożone ikony są trudne do rozpoznania na ekranie telewizora w pokoju na kanapie, więc spróbuj użyć najprostszej reprezentacji możliwej do uzyskania pomysłu. Jeśli to możliwe, użyj standardowych, dobrze znanych obrazów dla ikon (takich jak lupa do wyszukiwania).

Tytuły przycisków

Firma Apple ma następujące sugestie dotyczące tworzenia tytułów przycisków:

  • Pokaż tekst opisowy poniżej przycisków ikon — jeśli to możliwe, umieść jasny, opisowy tekst poniżej tylko przyciski, aby dodatkowo uzyskać cel przycisku.
  • Użyj czasowników lub fraz zleceń dla tytułu — jasno określ akcję, która będzie wykonywana po kliknięciu przycisku przez użytkownika.
  • Użyj wielkich liter w stylu tytułu — z wyjątkiem artykułów, połączeń lub przyimków (cztery litery lub mniej), każdy wyraz tytułu przycisku powinien być wielkich liter.
  • Użyj krótkiego tytułu do punktu — użyj najkrótszego możliwego czasownika, aby opisać akcję przycisku.

Przyciski i scenorysy

Najprostszym sposobem pracy z przyciskami w aplikacji platformy Xamarin.tvOS jest dodanie ich do interfejsu użytkownika aplikacji przy użyciu platformy Xamarin Projektant dla systemu iOS.

  1. W Eksplorator rozwiązań kliknij Main.storyboard dwukrotnie plik i otwórz go do edycji.

  2. Przeciągnij przycisk z biblioteki i upuść go w widoku:

    Przycisk

  3. W Eksploratorze właściwości można dostosować kilka właściwości przycisku, takich jak tytuł i kolor tekstu:

    Właściwości przycisku

  4. Następnie przejdź do karty Zdarzenia i połącz zdarzenie z przycisku i wywołaj je ButtonPressed:

    Karta Zdarzenia

  5. Nastąpi automatyczne przełączenie do ViewController.cs widoku, w którym można umieścić nową akcję w kodzie przy użyciu klawiszy strzałek w górę i w dół :

    Umieszczanie nowej akcji w kodzie

  6. Naciśnij klawisz Enter, aby wybrać lokalizację:

    Edytor kodu

  7. Zapisz zmiany we wszystkich plikach.

Tak długo, jak właściwość przycisku Enabled jest true i nie jest objęta inną kontrolką lub widokiem, można utworzyć element w fokusie za pomocą Siri Remote. Jeśli użytkownik wybierze przycisk i kliknie powierzchnię dotykową, ButtonPressed akcja zdefiniowana powyżej zostanie wykonana.

Ważne

Chociaż istnieje możliwość przypisania akcji, takich jak TouchUpInside do UIButton obiektu podczas tworzenia programu obsługi zdarzeń, nigdy nie zostanie wywołana, ponieważ urządzenie Apple TV nie ma ekranu dotykowego ani nie obsługuje zdarzeń dotykowych. Podczas tworzenia akcji dla elementów interfejsu użytkownika systemu tvOS należy zawsze używać domyślnego typu akcji.

Aby uzyskać więcej informacji na temat pracy z scenorysami, zobacz przewodnik Szybki start dotyczący funkcji Hello, tvOS.

Przyciski i kod

Opcjonalnie można utworzyć element UIButton w kodzie języka C# i dodać go do widoku aplikacji tvOS. Na przykład:

var button = new UIButton(UIButtonType.System);
button.Frame = new CGRect (25, 25, 300, 150);
button.SetTitle ("Hello", UIControlState.Normal);
button.AllEvents += (sender, e) => {
    // Do something when the button is clicked
    ...
};
View.AddSubview (button);

Podczas tworzenia nowego UIButton kodu należy określić go UIButtonType jako jeden z następujących elementów:

  • System — jest to standardowy typ przycisku prezentowany przez system tvOS i jest typem, który będzie używany najczęściej.
  • DetailDisclosure — przedstawia typ przycisku "wyłącz" używany do ukrywania lub wyświetlania szczegółowych informacji.
  • InfoDark — ciemny przycisk szczegółowych informacji wyświetla "i" w okręgu.
  • InfoLight — jasny przycisk szczegółowych informacji wyświetlany jako "i" w okręgu.
  • AddContact — wyświetl przycisk jako przycisk Dodaj kontakt.
  • Niestandardowy — umożliwia dostosowanie kilku cech przycisku.

Następnie zdefiniujesz rozmiar i lokalizację przycisku na ekranie. Przykład:

button.Frame = new CGRect (25, 25, 300, 150);

Następnie ustaw tytuł przycisku. UIButtons są inne niż większość UIKit kontrolek, w których mają stan, więc nie można po prostu zmienić tytułu, musisz zmienić go dla danego UIControlStateelementu . Na przykład:

button.SetTitle ("Hello", UIControlState.Normal);

Następnie użyj AllEvents zdarzenia, aby zobaczyć, kiedy użytkownik kliknął przycisk. Przykład:

button.AllEvents += (sender, e) => {
    // Do something when the button is clicked
    ...
};

Na koniec dodasz przycisk do widoku, aby go wyświetlić:

View.AddSubview (button);

Ważne

Chociaż istnieje możliwość przypisania akcji, takich jak TouchUpInside do elementu , nigdy nie zostanie wywołana, ponieważ urządzenie Apple TV nie ma ekranu dotykowego UIButtonani nie obsługuje zdarzeń dotykowych. Zawsze należy używać zdarzeń, takich jak AllEvents lub PrimaryActionTriggered.

Stylowanie przycisku

System tvOS udostępnia kilka właściwości UIButton , których można użyć do zapewnienia tytułu i stylu, takich jak kolor tła i obrazy.

Tytuły przycisków

Jak widzieliśmy powyżej, różnią się od większości UIKit kontrolek, w których mają stan, UIButtons więc nie można po prostu zmienić tytułu, musisz zmienić go dla danego UIControlStateelementu . Na przykład:

button.SetTitle ("Hello", UIControlState.Normal);

Kolor tytułu przycisku można ustawić przy użyciu SetTitleColor metody . Na przykład:

button.SetTitleColor (UIColor.White, UIControlState.Normal);

Możesz też dostosować cień tytułu przy użyciu elementu SetTitleShadowColor. Na przykład:

button.SetTitleShadowColor(UIColor.Black, UIControlState.Normal);

Możesz ustawić cień tytułu tak, aby zmienił się z Engraved na Embossed, gdy przycisk jest wyróżniony przy użyciu następującego kodu:

button.ReverseTitleShadowWhenHighlighted = true;

Ponadto możesz użyć tekstu przypisanego jako tytułu przycisku. Na przykład:

var normalAttributedTitle = new NSAttributedString (buttonTitle, foregroundColor: UIColor.Blue, strikethroughStyle: NSUnderlineStyle.Single);
myButton.SetAttributedTitle (normalAttributedTitle, UIControlState.Normal);

var highlightedAttributedTitle = new NSAttributedString (buttonTitle, foregroundColor: UIColor.Green, strikethroughStyle: NSUnderlineStyle.Thick);
myButton.SetAttributedTitle (highlightedAttributedTitle, UIControlState.Highlighted);

Obrazy przycisków

Obiekt UIButton może mieć dołączony do niego obraz i może używać obrazu jako tła.

Aby ustawić obraz tła przycisku dla danego UIControlStateelementu , użyj następującego kodu:

button.SetBackgroundImage(UIImage.FromFile("my image.png"), UIControlState.Normal);

AdjustsImageWhenHiglighted Ustaw właściwość , aby true narysować obraz jaśniejszy, gdy przycisk jest wyróżniony (jest to wartość domyślna). AdjustsImageWhenDisabled Ustaw właściwość , aby true narysować obraz ciemniejszy, gdy przycisk jest wyłączony (ponownie jest to wartość domyślna).

Aby ustawić obraz wyświetlany na przycisku, użyj następującego kodu:

button.SetImage(UIImage.FromFile("my image.png"), UIControlState.Normal);

TintColor Użyj właściwości , aby ustawić odcień koloru, który jest stosowany zarówno do tytułu, jak i obrazu przycisku. W przypadku przycisków Custom typu ta właściwość nie ma wpływu, musisz samodzielnie zaimplementować TintColor zachowanie.

Podsumowanie

W tym artykule opisano projektowanie i pracę z przyciskami wewnątrz aplikacji platformy Xamarin.tvOS. Pokazano, jak pracować z przyciskami w systemie iOS Projektant i jak tworzyć przyciski w kodzie języka C#. Na koniec pokazano, jak zmodyfikować tytuł przycisku i zmienić jego styl i wygląd.