Uso dei pulsanti tvOS in Xamarin

Avviso

IOS Designer è stato deprecato in Visual Studio 2019 versione 16.8 e Visual Studio 2019 per Mac versione 8.8 e rimosso in Visual Studio 2019 versione 16.9 e Visual Studio per Mac versione 8.9. Il modo consigliato per creare interfacce utente iOS è direttamente in un Mac che esegue Interface Builder di Xcode. Per altre informazioni, vedere Progettazione di interfacce utente con Xcode.

Usare un'istanza della UIButton classe per creare un pulsante selezionabile e selezionabile in una finestra tvOS. Quando l'utente seleziona un pulsante, invia un messaggio di azione all'oggetto di destinazione che consente all'app Xamarin.tvOS di rispondere all'input dell'utente.

Pulsanti di esempio

Per altre informazioni sull'uso dello stato attivo e sulla navigazione con Siri Remote, vedi la documentazione Sull'uso della navigazione e dello stato attivo e dei controller Remote e Bluetooth di Siri.

Informazioni sui pulsanti

In tvOS i pulsanti vengono usati per azioni specifiche dell'app e possono contenere un titolo, un'icona o entrambi. Quando l'utente passa all'interfaccia utente dell'app usando Siri Remote, lo stato attivo passa al pulsante specificato, modificando il testo e i colori di sfondo. Un'ombreggiatura viene applicata anche al pulsante aggiungendo un effetto 3D che sembra salire sopra il resto dell'interfaccia utente.

Pulsanti di esempio

Apple offre i suggerimenti seguenti per l'uso dei pulsanti:

  • Usa un titolo o un'icona - Mentre sia un'icona che un titolo possono essere inclusi in un pulsante, lo spazio è limitato, quindi prova a non combinare entrambi.
  • Contrassegna chiaramente i pulsanti distruttivi : se il pulsante esegue un'azione distruttiva (ad esempio l'eliminazione di un file), contrassegnarlo chiaramente come tale usando testo e/o icona. Le azioni distruttive devono sempre presentare un avviso che chiede all'utente di limitare l'azione.
  • Non usare i pulsanti Indietro: il pulsante Menu in Siri Remote viene usato per tornare alla schermata precedente. L'unica eccezione a questa regola riguarda gli acquisti in-app o le azioni distruttive in cui deve essere visualizzato un pulsante Annulla .

Per altre informazioni sull'uso dello stato attivo e dello spostamento, vedere la documentazione Sull'uso dello spostamento e dello stato attivo .

Icone dei pulsanti

Apple suggerisce di usare immagini semplici e altamente riconoscibili per le icone button. Icone eccessivamente complesse sono difficili da riconoscere su uno schermo TV nella stanza su un divano, quindi cercare di usare la rappresentazione più semplice possibile per ottenere l'idea attraverso. Quando possibile, usare immagini standard e ben noto per le icone (ad esempio una lente di ingrandimento per la ricerca).

Titoli dei pulsanti

Apple offre i suggerimenti seguenti quando si creano i titoli per i pulsanti:

  • Mostra testo descrittivo sotto icone Pulsanti - Dove possibile, posizionare testo chiaro e descrittivo sotto l'icona solo Pulsanti per ottenere ulteriormente lo scopo del pulsante.
  • Usare verbi o frasi verbi per il titolo : indicare chiaramente l'azione che verrà eseguita quando l'utente fa clic sul pulsante.
  • Usa maiuscole e minuscole in stile titolo: ad eccezione di articoli, congiunzioni o preposizioni (quattro lettere o meno), ogni parola del titolo del pulsante deve essere maiuscola.
  • Usa un titolo breve, to-the-point: usa il più breve possibile verbo per descrivere l'azione del pulsante.

Pulsanti e storyboard

Il modo più semplice per usare i pulsanti in un'app Xamarin.tvOS consiste nell'aggiungerli all'interfaccia utente dell'app usando Xamarin Designer per iOS.

  1. Nella Esplora soluzioni fare doppio clic sul Main.storyboard file e aprirlo per la modifica.

  2. Trascinare un pulsante dalla libreria e rilasciarlo nella visualizzazione:

    Pulsante A

  3. In Esplora proprietà è possibile modificare diverse proprietà del pulsante, ad esempio titolo e colore del testo:

    Proprietà dei pulsanti

  4. Passare quindi alla scheda Eventi e collegare un evento dal pulsante e chiamarlo ButtonPressed:

    Scheda Eventi

  5. Si passerà automaticamente alla ViewController.cs visualizzazione in cui è possibile posizionare la nuova azione nel codice usando i tasti freccia Su e Giù :

    Inserimento di una nuova azione nel codice

  6. Premere INVIO per selezionare il percorso:

    Editor di codice

  7. Salvare le modifiche apportate a tutti i file.

Finché la proprietà di Enabled un pulsante è true e non è coperta da un altro controllo o visualizzazione, può essere reso l'elemento attivo con Siri Remote. Se l'utente seleziona il pulsante e fa clic su Touch Surface, verrà eseguita l'azione ButtonPressed definita in precedenza.

Importante

Anche se è possibile assegnare azioni come TouchUpInside a quando UIButton si crea un gestore eventi, non verrà mai chiamato perché Apple TV non ha un touch screen o supporta gli eventi di tocco. È consigliabile usare sempre il tipo di azione predefinito durante la creazione di azioni per gli elementi dell'interfaccia utente tvOS.

Per altre informazioni sull'uso degli storyboard, vedere la guida introduttiva hello, tvOS.

Pulsanti e codice

Facoltativamente, è possibile creare un oggetto UIButton nel codice C# e aggiungerlo alla visualizzazione dell'app tvOS. Ad esempio:

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

Quando si crea un nuovo UIButton nel codice, specificarne il valore UIButtonType come uno dei seguenti:

  • System - Questo è il tipo standard di pulsante presentato da tvOS ed è il tipo che userai più spesso.
  • DetailDisclosure : presenta un tipo di pulsante "disattiva" usato per nascondere o visualizzare informazioni dettagliate.
  • InfoDark - Pulsante di informazioni dettagliate scuro visualizzato un "i" in un cerchio.
  • InfoLight : un pulsante di informazioni dettagliate chiaro ha visualizzato un "i" in un cerchio.
  • AddContact : visualizza il pulsante come pulsante Aggiungi contatto.
  • Personalizzato : consente di personalizzare diversi tratti del pulsante.

Successivamente, definisci le dimensioni dello schermo e la posizione del pulsante. Esempio:

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

Impostare quindi il titolo per il pulsante. UIButtons sono diversi dalla maggior parte dei UIKit controlli in quanto hanno uno stato, quindi non è sufficiente modificare il titolo, è necessario modificarlo per un determinato UIControlStateoggetto . Ad esempio:

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

Usare quindi l'evento AllEvents per vedere quando l'utente ha fatto clic sul pulsante. Esempio:

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

Infine, aggiungi il pulsante alla visualizzazione per visualizzarlo:

View.AddSubview (button);

Importante

Anche se è possibile assegnare azioni come TouchUpInside a un UIButton, non verrà mai chiamato perché Apple TV non ha un touch screen o supporta gli eventi di tocco. È consigliabile usare sempre eventi come AllEvents o PrimaryActionTriggered.

Applicazione di stili a un pulsante

tvOS offre diverse proprietà di un oggetto UIButton che può essere usato per fornire il titolo e lo stile con elementi come colore di sfondo e immagini.

Titoli dei pulsanti

Come illustrato in precedenza, UIButtons sono diversi dalla maggior UIKit parte dei controlli in quanto hanno uno Stato in modo da non poter semplicemente modificare il titolo, è necessario modificarlo per un determinato UIControlStateoggetto . Ad esempio:

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

È possibile impostare il colore del titolo per il pulsante usando il SetTitleColor metodo . Ad esempio:

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

E puoi regolare l'ombreggiatura del titolo usando .SetTitleShadowColor Ad esempio:

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

È possibile impostare l'ombreggiatura del titolo per passare da Inciso a rilievo quando il pulsante viene evidenziato usando il codice seguente:

button.ReverseTitleShadowWhenHighlighted = true;

Inoltre, è possibile usare il testo con attributi come titolo del pulsante. Ad esempio:

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

Immagini pulsante

Un UIButton oggetto può avere un'immagine collegata e può usare un'immagine come sfondo.

Per impostare l'immagine di sfondo di un pulsante per un determinato UIControlStateoggetto , usare il codice seguente:

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

Impostare la AdjustsImageWhenHiglighted proprietà su true per disegnare l'immagine più chiara quando il pulsante è evidenziato (impostazione predefinita). Impostare la AdjustsImageWhenDisabled proprietà su true per disegnare l'immagine più scura quando il pulsante è disabilitato (anche in questo caso questa è l'impostazione predefinita).

Per impostare l'immagine visualizzata sul pulsante, usare il codice seguente:

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

Utilizzare la TintColor proprietà per impostare una tinta di colore applicata sia al titolo che all'immagine del pulsante. Per i pulsanti del Custom tipo, questa proprietà non ha alcun effetto, è necessario implementare manualmente il TintColor comportamento.

Riepilogo

Questo articolo ha illustrato la progettazione e l'uso dei pulsanti all'interno di un'app Xamarin.tvOS. Ha illustrato come usare i pulsanti in Progettazione iOS e come creare pulsanti nel codice C#. Infine, ha mostrato come modificare il titolo di un pulsante e modificarne lo stile e l'aspetto.