Partager via


Utilisation de champs de recherche et de texte tvOS dans Xamarin

Si nécessaire, votre application Xamarin.tvOS peut demander de petits éléments de texte de l’utilisateur (tels que des ID d’utilisateur et des mots de passe) à l’aide d’un champ de texte et du clavier visuel :

Exemple de champ de recherche

Vous pouvez éventuellement fournir mot clé capacité de recherche du contenu de l’application à l’aide d’un champ de recherche :

Exemples de résultats de recherche

Ce document décrit les détails de l’utilisation de champs texte et de recherche dans une application Xamarin.tvOS.

À propos du texte et des champs de recherche

Comme indiqué ci-dessus, si nécessaire, votre Xamarin.tvOS peut présenter un ou plusieurs champs de texte pour collecter de petites quantités de texte de l’utilisateur à l’aide d’un clavier bluetooth visuel (ou facultatif, selon la version de tvOS installée par l’utilisateur).

En outre, si votre application présente de grandes quantités de contenu à l’utilisateur (par exemple, une musique, des films ou une collection d’images), vous pouvez inclure un champ de recherche qui permet à l’utilisateur d’entrer une petite quantité de texte pour filtrer la liste des éléments disponibles.

Champs de texte

Dans tvOS, un champ de texte est présenté sous la forme d’une zone d’entrée d’angle arrondi fixe qui affiche un clavier visuel lorsque l’utilisateur clique dessus :

Champs de texte dans tvOS

Lorsque l’utilisateur déplace le focus sur un champ de texte donné, il grandit et affiche une ombre profonde. Vous devez garder cela à l’esprit lors de la conception de votre interface utilisateur, car les champs de texte peuvent chevaucher d’autres éléments d’interface utilisateur lors du focus.

Apple propose les suggestions suivantes pour utiliser les champs de texte :

  • Utilisez l’entrée de texte avec modération : en raison de la nature du clavier visuel, la saisie de longues sections de texte ou le remplissage de plusieurs champs de texte est fastidieux pour l’utilisateur. Une meilleure solution consiste à limiter la quantité d’entrée de texte à l’aide de listes de sélection ou de boutons.
  • Utilisez des indicateurs pour communiquer l’objectif : le champ de texte peut afficher l’espace réservé « indicateurs » lorsqu’il est vide. Le cas échéant, utilisez des indicateurs pour décrire l’objectif de votre champ de texte au lieu d’une étiquette distincte.
  • Sélectionnez le type de clavier par défaut approprié - tvOS fournit plusieurs types de clavier créés à usage différent que vous pouvez spécifier pour votre champ de texte. Par exemple, le clavier d’adresse e-mail peut faciliter l’entrée en permettant à l’utilisateur de sélectionner dans une liste d’adresses récemment entrées.
  • Le cas échéant, utilisez des champs de texte sécurisé : un champ de texte sécurisé présente les caractères entrés sous forme de points (au lieu des lettres réelles). Utilisez toujours un champ de texte sécurisé lors de la collecte d’informations sensibles telles que des mots de passe.

Claviers

Chaque fois que l’utilisateur clique sur un champ de texte dans l’interface utilisateur, un clavier linéaire à l’écran s’affiche. L’utilisateur utilise Touch Surface le Siri Remote pour sélectionner des lettres individuelles à partir du clavier et entrer les informations demandées :

Clavier Siri Remote

S’il existe plusieurs champs de texte dans l’affichage actuel, un bouton Suivant s’affiche automatiquement pour faire passer l’utilisateur au champ de texte suivant. Un bouton Terminé s’affiche pour le dernier champ de texte qui met fin à l’entrée de texte et renvoie l’utilisateur à l’écran précédent.

À tout moment, l’utilisateur peut également appuyer sur le bouton Menu sur l’entrée de texte Siri Remote pour mettre fin à l’entrée de texte et revenir à l’écran précédent.

Apple propose les suggestions suivantes pour utiliser des claviers visuels :

  • Sélectionnez le type de clavier par défaut approprié - tvOS fournit plusieurs types de clavier créés à usage différent que vous pouvez spécifier pour votre champ de texte. Par exemple, le clavier d’adresse e-mail peut faciliter l’entrée en permettant à l’utilisateur de sélectionner dans une liste d’adresses récemment entrées.
  • Le cas échéant, utilisez les affichages accessoires clavier - En plus des informations standard qui sont toujours affichées, des vues accessoires facultatives (telles que des images ou des étiquettes) peuvent être ajoutées au clavier visuel pour clarifier l’objectif de l’entrée de texte ou pour aider l’utilisateur à entrer les informations requises.

Pour plus d’informations sur l’utilisation du clavier visuel, consultez la documentation UIKeyboardType d’Apple, Gestion du clavier, vues personnalisées pour l’entrée de données et le guide de programmation de texte sur iOS.

Un champ de recherche présente un écran spécialisé fournissant un champ de texte et un clavier visuel qui permet à l’utilisateur de filtrer une collection d’éléments affichés sous le clavier :

Exemples de résultats de recherche

Lorsque l’utilisateur entre des lettres dans le champ de recherche, les résultats ci-dessous reflètent automatiquement les résultats de la recherche. À tout moment, l’utilisateur peut déplacer le focus vers les résultats et sélectionner l’un des éléments présentés.

Apple propose les suggestions suivantes pour utiliser les champs de recherche :

  • Fournir des recherches récentes : étant donné que la saisie de texte avec Siri Remote peut être fastidieuse et que les utilisateurs ont tendance à répéter les demandes de recherche, envisagez d’ajouter une section des résultats de recherche récents avant les résultats actuels sous la zone de clavier.
  • Dans la mesure du possible, limitez le nombre de résultats : étant donné qu’une grande liste d’éléments peut être difficile pour l’utilisateur d’analyser et de naviguer, envisagez de limiter le nombre de résultats retournés.
  • Si nécessaire, fournissez des filtres de résultats de recherche : si le contenu fourni par votre application se prête, envisagez d’ajouter des barres d’étendue pour permettre à l’utilisateur de filtrer davantage les résultats de la recherche retournés.

Pour plus d’informations, consultez la référence de classe UISearchController d’Apple.

Utilisation des champs de texte

Le moyen le plus simple d’utiliser des champs de texte dans une application Xamarin.tvOS consiste à les ajouter à la conception de l’interface utilisateur à l’aide du concepteur iOS.

Effectuez les actions suivantes :

  1. Dans le Panneau Solution, double-cliquez sur le Main.storyboard fichier pour l’ouvrir pour modification.

  2. Faites glisser un ou plusieurs champs de texte dans l’aire de conception sur un affichage :

    Champ de texte

  3. Sélectionnez les champs de texte et donnez à chacun un nom unique dans l’onglet Widget du panneau Propriétés :

    Onglet Widget du panneau Propriétés

  4. Dans la section Champ de texte, vous pouvez définir des éléments tels que l’indicateur d’espace réservé et la valeur par défaut :

    Section Champ de texte

  5. Faites défiler vers le bas pour définir des propriétés telles que la vérification orthographique, la mise en majuscules et le type de clavier par défaut :

    Vérification orthographique, mise en majuscules et type de clavier par défaut

  6. Enregistrez les modifications apportées à votre Storyboard.

Dans le code, vous pouvez obtenir ou définir la valeur d’un champ de texte à l’aide de sa Text propriété :

Console.WriteLine ("User ID {0} and Password {1}", UserId.Text, Password.Text);

Vous pouvez éventuellement utiliser les Started événements champ de texte et Ended le champ de texte pour répondre à l’entrée de texte de début et de fin.

Utilisation des champs de recherche

Le moyen le plus simple d’utiliser les champs de recherche dans une application Xamarin.tvOS consiste à les ajouter à la conception de l’interface utilisateur à l’aide du Concepteur d’interface.

Effectuez les actions suivantes :

  1. Dans le Panneau Solution, double-cliquez sur le Main.storyboard fichier pour l’ouvrir pour modification.

  2. Faites glisser un nouveau contrôleur de vue collection vers le storyboard pour présenter les résultats de la recherche de l’utilisateur :

    Contrôleur d’affichage de collection

  3. Sous l’onglet Widget du panneau Propriétés, utilisez SearchResultsViewController la classe et SearchResults l’ID storyboard :

    Onglet Widget dans Visual Studio pour Mac où vous pouvez spécifier la classe et le storyboard I D.

  4. Sélectionnez le prototype de cellule sur l’aire de conception.

  5. Sous l’onglet Widget de l’Explorateur de propriétés, utilisez SearchResultCell la classe et ImageCell l’identificateur :

    Onglet Widget dans Visual Studio pour Mac où vous pouvez spécifier la classe et l’identificateur.

  6. Concevoir le prototype de cellule et exposer chaque élément avec un nom unique dans l’onglet Widget de l’Explorateur de propriétés :

    Disposition de la conception du prototype de cellule

  7. Enregistrez les modifications apportées à votre Storyboard.

Fournir un modèle de données

Ensuite, vous devez fournir une classe pour agir en tant que modèle de données pour les résultats recherchés par l’utilisateur. Dans le Explorateur de solutions, cliquez avec le bouton droit sur le nom du projet, puis sélectionnez Ajouter>un nouveau fichier...>Classe general>empty et indiquez un nom :

Sélectionner une classe vide et fournir un nom

Par exemple, une application qui permet à l’utilisateur de rechercher une collection d’images par titre et mot clé peut ressembler à ce qui suit :

using System;
using Foundation;

namespace tvText
{
    public class PictureInformation : NSObject
    {
        #region Computed Properties
        public string Title { get; set;}
        public string ImageName { get; set;}
        public string Keywords { get; set;}
        #endregion

        #region Constructors
        public PictureInformation (string title, string imageName, string keywords)
        {
            // Initialize
            this.Title = title;
            this.ImageName = imageName;
            this.Keywords = keywords;
        }
        #endregion
    }
}

Cellule Vue collection

Avec le modèle de données en place, modifiez la cellule prototype (SearchResultViewCell.cs) et recherchez-la comme suit :

using Foundation;
using System;
using UIKit;

namespace tvText
{
    public partial class SearchResultViewCell : UICollectionViewCell
    {
        #region Private Variables
        private PictureInformation _pictureInfo = null;
        #endregion

        #region Computed Properties
        public PictureInformation PictureInfo {
            get { return _pictureInfo; }
            set {
                _pictureInfo = value;
                UpdateUI ();
            }
        }
        #endregion

        #region Constructors
        public SearchResultViewCell (IntPtr handle) : base (handle)
        {
            // Initialize
            UpdateUI ();
        }
        #endregion

        #region Private Methods
        private void UpdateUI ()
        {
            // Anything to process?
            if (PictureInfo == null) return;

            try {
                Picture.Image = UIImage.FromBundle (PictureInfo.ImageName);
                Picture.AdjustsImageWhenAncestorFocused = true;
                Title.Text = PictureInfo.Title;
                TextColor = UIColor.LightGray;
            } catch {
                // Ignore errors if view isn't fully loaded
            }
        }
        #endregion
    }

}

La UpdateUI méthode sera utilisée pour afficher des champs individuels des éléments PictureInformation (la PictureInfo propriété) dans les éléments d’interface utilisateur nommés chaque fois que la propriété est mise à jour. Par exemple, l’image et le titre associés à l’image.

Contrôleur d’affichage de collection

Ensuite, modifiez le contrôleur d’affichage de collection de résultats de recherche (SearchResultsViewController.cs) et faites-le ressembler à ce qui suit :

using Foundation;
using System;
using UIKit;
using System.Collections.Generic;

namespace tvText
{
    public partial class SearchResultsViewController : UICollectionViewController , IUISearchResultsUpdating
    {
        #region Constants
        public const string CellID = "ImageCell";
        #endregion

        #region Private Variables
        private string _searchFilter = "";
        #endregion

        #region Computed Properties
        public List<PictureInformation> AllPictures { get; set;}
        public List<PictureInformation> FoundPictures { get; set; }
        public string SearchFilter {
            get { return _searchFilter; }
            set {
                _searchFilter = value.ToLower();
                FindPictures ();
                CollectionView?.ReloadData ();
            }
        }
        #endregion

        #region Constructors
        public SearchResultsViewController (IntPtr handle) : base (handle)
        {
            // Initialize
            this.AllPictures = new List<PictureInformation> ();
            this.FoundPictures = new List<PictureInformation> ();
            PopulatePictures ();
            FindPictures ();

        }
        #endregion

        #region Private Methods
        private void PopulatePictures ()
        {
            // Clear list
            AllPictures.Clear ();

            // Add images
            AllPictures.Add (new PictureInformation ("Antipasta Platter","Antipasta","cheese,grapes,tomato,coffee,meat,plate"));
            AllPictures.Add (new PictureInformation ("Cheese Plate", "CheesePlate", "cheese,plate,bread"));
            AllPictures.Add (new PictureInformation ("Coffee House", "CoffeeHouse", "coffee,people,menu,restaurant,cafe"));
            AllPictures.Add (new PictureInformation ("Computer and Expresso", "ComputerExpresso", "computer,coffee,expresso,phone,notebook"));
            AllPictures.Add (new PictureInformation ("Hamburger", "Hamburger", "meat,bread,cheese,tomato,pickle,lettus"));
            AllPictures.Add (new PictureInformation ("Lasagna Dinner", "Lasagna", "salad,bread,plate,lasagna,pasta"));
            AllPictures.Add (new PictureInformation ("Expresso Meeting", "PeopleExpresso", "people,bag,phone,expresso,coffee,table,tablet,notebook"));
            AllPictures.Add (new PictureInformation ("Soup and Sandwich", "SoupAndSandwich", "soup,sandwich,bread,meat,plate,tomato,lettus,egg"));
            AllPictures.Add (new PictureInformation ("Morning Coffee", "TabletCoffee", "tablet,person,man,coffee,magazine,table"));
            AllPictures.Add (new PictureInformation ("Evening Coffee", "TabletMagCoffee", "tablet,magazine,coffee,table"));
        }

        private void FindPictures ()
        {
            // Clear list
            FoundPictures.Clear ();

            // Scan each picture for a match
            foreach (PictureInformation picture in AllPictures) {
                if (SearchFilter == "") {
                    // If no search term, everything matches
                    FoundPictures.Add (picture);
                } else if (picture.Title.Contains (SearchFilter) || picture.Keywords.Contains (SearchFilter)) {
                    // If the search term is in the title or keywords, we've found a match
                    FoundPictures.Add (picture);
                }
            }
        }
        #endregion

        #region Override Methods
        public override nint NumberOfSections (UICollectionView collectionView)
        {
            // Only one section in this collection
            return 1;
        }

        public override nint GetItemsCount (UICollectionView collectionView, nint section)
        {
            // Return the number of matching pictures
            return FoundPictures.Count;
        }

        public override UICollectionViewCell GetCell (UICollectionView collectionView, NSIndexPath indexPath)
        {
            // Get a new cell and return it
            var cell = collectionView.DequeueReusableCell (CellID, indexPath);
            return (UICollectionViewCell)cell;
        }

        public override void WillDisplayCell (UICollectionView collectionView, UICollectionViewCell cell, NSIndexPath indexPath)
        {
            // Grab the cell
            var currentCell = cell as SearchResultViewCell;
            if (currentCell == null)
                throw new Exception ("Expected to display a `SearchResultViewCell`.");

            // Display the current picture info in the cell
            var item = FoundPictures [indexPath.Row];
            currentCell.PictureInfo = item;
        }

        public override void ItemSelected (UICollectionView collectionView, NSIndexPath indexPath)
        {
            // If this Search Controller was presented as a modal view, close
            // it before continuing
            // DismissViewController (true, null);

            // Grab the picture being selected and report it
            var picture = FoundPictures [indexPath.Row];
            Console.WriteLine ("Selected: {0}", picture.Title);
        }

        public void UpdateSearchResultsForSearchController (UISearchController searchController)
        {
            // Save the search filter and update the Collection View
            SearchFilter = searchController.SearchBar.Text ?? string.Empty;
        }

        public override void DidUpdateFocus (UIFocusUpdateContext context, UIFocusAnimationCoordinator coordinator)
        {
            var previousItem = context.PreviouslyFocusedView as SearchResultViewCell;
            if (previousItem != null) {
                UIView.Animate (0.2, () => {
                    previousItem.TextColor = UIColor.LightGray;
                });
            }

            var nextItem = context.NextFocusedView as SearchResultViewCell;
            if (nextItem != null) {
                UIView.Animate (0.2, () => {
                    nextItem.TextColor = UIColor.Black;
                });
            }
        }
        #endregion
    }
}

Tout d’abord, l’interface IUISearchResultsUpdating est ajoutée à la classe pour gérer le filtre du contrôleur de recherche mis à jour par l’utilisateur :

public partial class SearchResultsViewController : UICollectionViewController , IUISearchResultsUpdating

Une constante est également définie pour spécifier l’ID de la cellule prototype (qui correspond à l’ID défini dans le Concepteur d’interface ci-dessus) qui sera utilisé ultérieurement lorsque le contrôleur de collection demande une nouvelle cellule :

public const string CellID = "ImageCell";

Stockage est créé pour la liste complète des éléments recherchés, le terme de filtre de recherche et la liste des éléments correspondant à ce terme :

private string _searchFilter = "";
...

public List<PictureInformation> AllPictures { get; set;}
public List<PictureInformation> FoundPictures { get; set; }
public string SearchFilter {
    get { return _searchFilter; }
    set {
        _searchFilter = value.ToLower();
        FindPictures ();
        CollectionView?.ReloadData ();
    }
}

Lorsque la SearchFilter valeur est modifiée, la liste des éléments correspondants est mise à jour et le contenu de l’affichage collection est rechargé. La FindPictures routine est chargée de rechercher des éléments qui correspondent au nouveau terme de recherche :

private void FindPictures ()
{
    // Clear list
    FoundPictures.Clear ();

    // Scan each picture for a match
    foreach (PictureInformation picture in AllPictures) {
        if (SearchFilter == "") {
            // If no search term, everything matches
            FoundPictures.Add (picture);
        } else if (picture.Title.Contains (SearchFilter) || picture.Keywords.Contains (SearchFilter)) {
            // If the search term is in the title or keywords, we've found a match
            FoundPictures.Add (picture);
        }
    }
}

La valeur du SearchFilter filtre est mise à jour (qui met à jour la vue de collecte de résultats) lorsque l’utilisateur modifie le filtre dans le contrôleur de recherche :

public void UpdateSearchResultsForSearchController (UISearchController searchController)
{
    // Save the search filter and update the Collection View
    SearchFilter = searchController.SearchBar.Text ?? string.Empty;
}

La PopulatePictures méthode remplit initialement la collection d’éléments disponibles :

private void PopulatePictures ()
{
    // Clear list
    AllPictures.Clear ();

    // Add images
    AllPictures.Add (new PictureInformation ("Antipasta Platter","Antipasta","cheese,grapes,tomato,coffee,meat,plate"));
    ...
}

Dans le cadre de cet exemple, tous les exemples de données sont créés en mémoire lorsque le contrôleur de vue de collection se charge. Dans une application réelle, ces données seraient probablement lues à partir d’une base de données ou d’un service web, et uniquement si nécessaire pour ne pas dépasser la mémoire limitée d’Apple TV.

Les NumberOfSections méthodes et GetItemsCount les méthodes fournissent le nombre d’éléments mis en correspondance :

public override nint NumberOfSections (UICollectionView collectionView)
{
    // Only one section in this collection
    return 1;
}

public override nint GetItemsCount (UICollectionView collectionView, nint section)
{
    // Return the number of matching pictures
    return FoundPictures.Count;
}

La GetCell méthode retourne une nouvelle cellule prototype (basée sur la CellID définition ci-dessus dans le Storyboard) pour chaque élément de l’affichage collection :

public override UICollectionViewCell GetCell (UICollectionView collectionView, NSIndexPath indexPath)
{
    // Get a new cell and return it
    var cell = collectionView.DequeueReusableCell (CellID, indexPath);
    return (UICollectionViewCell)cell;
}

La WillDisplayCell méthode est appelée avant l’affichage de la cellule afin qu’elle puisse être configurée :

public override void WillDisplayCell (UICollectionView collectionView, UICollectionViewCell cell, NSIndexPath indexPath)
{
    // Grab the cell
    var currentCell = cell as SearchResultViewCell;
    if (currentCell == null)
        throw new Exception ("Expected to display a `SearchResultViewCell`.");

    // Display the current picture info in the cell
    var item = FoundPictures [indexPath.Row];
    currentCell.PictureInfo = item;
}

La DidUpdateFocus méthode fournit des commentaires visuels à l’utilisateur, car elle met en surbrillance les éléments dans la vue de collection de résultats :

public override void DidUpdateFocus (UIFocusUpdateContext context, UIFocusAnimationCoordinator coordinator)
{
    var previousItem = context.PreviouslyFocusedView as SearchResultViewCell;
    if (previousItem != null) {
        UIView.Animate (0.2, () => {
            previousItem.TextColor = UIColor.LightGray;
        });
    }

    var nextItem = context.NextFocusedView as SearchResultViewCell;
    if (nextItem != null) {
        UIView.Animate (0.2, () => {
            nextItem.TextColor = UIColor.Black;
        });
    }
}

Enfin, la ItemSelected méthode gère l’utilisateur en sélectionnant un élément (en cliquant sur l’aire tactile avec Siri Remote) dans l’affichage collection de résultats :

public override void ItemSelected (UICollectionView collectionView, NSIndexPath indexPath)
{
    // If this Search Controller was presented as a modal view, close
    // it before continuing
    // DismissViewController (true, null);

    // Grab the picture being selected and report it
    var picture = FoundPictures [indexPath.Row];
    Console.WriteLine ("Selected: {0}", picture.Title);
}

Si le champ de recherche a été présenté sous la forme d’une vue de boîte de dialogue modale (en haut de l’affichage qui l’appelle), utilisez la DismissViewController méthode pour ignorer l’affichage de recherche lorsque l’utilisateur sélectionne un élément. Pour cet exemple, le champ de recherche est présenté comme contenu d’un onglet Affichage tabulation, de sorte qu’il n’est pas ignoré ici.

Pour plus d’informations sur les vues de collection, consultez notre documentation Working with Collection Views .

Présentation du champ de recherche

Il existe deux méthodes principales pour présenter un champ de recherche (et ses résultats de recherche et clavier à l’écran associés) à l’utilisateur dans tvOS :

  • Mode Boîte de dialogue modale : le champ de recherche peut être présenté sur l’affichage actuel et le contrôleur de vue sous la forme d’une vue de boîte de dialogue modale en plein écran. Cela est généralement effectué en réponse à l’utilisateur en cliquant sur un bouton ou un autre élément d’interface utilisateur. La boîte de dialogue est ignorée lorsque l’utilisateur sélectionne un élément dans les résultats de la recherche.
  • Afficher le contenu - Le champ de recherche est une partie directe d’une vue donnée. Par exemple, en tant que contenu d’un onglet de recherche dans un contrôleur d’affichage d’onglets.

Pour obtenir l’exemple d’une liste d’images pouvant faire l’objet d’une recherche ci-dessus, le champ de recherche est présenté sous forme de contenu dans l’onglet Recherche et le contrôleur d’affichage tabulation de recherche ressemble à ce qui suit :

using System;
using UIKit;

namespace tvText
{
    public partial class SecondViewController : UIViewController
    {
        #region Constants
        public const string SearchResultsID = "SearchResults";
        #endregion

        #region Computed Properties
        public SearchResultsViewController ResultsController { get; set;}
        #endregion

        #region Constructors
        public SecondViewController (IntPtr handle) : base (handle)
        {
        }
        #endregion

        #region Private Methods
        public void ShowSearchController ()
        {
            // Build an instance of the Search Results View Controller from the Storyboard
            ResultsController = Storyboard.InstantiateViewController (SearchResultsID) as SearchResultsViewController;
            if (ResultsController == null)
                throw new Exception ("Unable to instantiate a SearchResultsViewController.");

            // Create an initialize a new search controller
            var searchController = new UISearchController (ResultsController) {
                SearchResultsUpdater = ResultsController,
                HidesNavigationBarDuringPresentation = false
            };

            // Set any required search parameters
            searchController.SearchBar.Placeholder = "Enter keyword (e.g. coffee)";

            // The Search Results View Controller can be presented as a modal view
            // PresentViewController (searchController, true, null);

            // Or in the case of this sample, the Search View Controller is being
            // presented as the contents of the Search Tab directly. Use either one
            // or the other method to display the Search Controller (not both).
            var container = new UISearchContainerViewController (searchController);
            var navController = new UINavigationController (container);
            AddChildViewController (navController);
            View.Add (navController.View);
        }
        #endregion

        #region Override Methods
        public override void ViewDidLoad ()
        {
            base.ViewDidLoad ();

            // If the Search Controller is being displayed as the content
            // of the search tab, include it here.
            ShowSearchController ();
        }

        public override void ViewDidAppear (bool animated)
        {
            base.ViewDidAppear (animated);

            // If the Search Controller is being presented as a modal view,
            // call it here to display it over the contents of the Search
            // tab.
            // ShowSearchController ();
        }
        #endregion
    }
}

Tout d’abord, une constante est définie qui correspond à l’identificateur storyboard qui a été affecté au contrôleur d’affichage de la collection de résultats de recherche dans le Concepteur d’interface :

public const string SearchResultsID = "SearchResults";

Ensuite, la ShowSearchController méthode crée un contrôleur de collection d’affichage de recherche et affiche les éléments nécessaires :

public void ShowSearchController ()
{
    // Build an instance of the Search Results View Controller from the Storyboard
    ResultsController = Storyboard.InstantiateViewController (SearchResultsID) as SearchResultsViewController;
    if (ResultsController == null)
        throw new Exception ("Unable to instantiate a SearchResultsViewController.");

    // Create an initialize a new search controller
    var searchController = new UISearchController (ResultsController) {
        SearchResultsUpdater = ResultsController,
        HidesNavigationBarDuringPresentation = false
    };

    // Set any required search parameters
    searchController.SearchBar.Placeholder = "Enter keyword (e.g. coffee)";

    // The Search Results View Controller can be presented as a modal view
    // PresentViewController (searchController, true, null);

    // Or in the case of this sample, the Search View Controller is being
    // presented as the contents of the Search Tab directly. Use either one
    // or the other method to display the Search Controller (not both).
    var container = new UISearchContainerViewController (searchController);
    var navController = new UINavigationController (container);
    AddChildViewController (navController);
    View.Add (navController.View);
}

Dans la méthode ci-dessus, une fois instancié SearchResultsViewController à partir du Storyboard, un nouveau UISearchController est créé pour présenter le champ de recherche et le clavier visuel à l’utilisateur. La collection Résultats de la recherche (telle que définie par le SearchResultsViewController) s’affiche sous ce clavier.

Ensuite, il SearchBar est configuré avec des informations telles que l’indicateur d’espace réservé . Cela fournit des informations à l’utilisateur sur le type de recherche préformé.

Ensuite, le champ de recherche est présenté à l’utilisateur de l’une des deux manières suivantes :

  • Mode Boîte de dialogue modale : la PresentViewController méthode est appelée pour présenter la recherche sur l’affichage existant, plein écran.
  • Afficher le contenu : A UISearchContainerViewController est créé pour contenir le contrôleur de recherche. A UINavigationController est créé pour contenir le conteneur de recherche, puis le contrôleur de navigation est ajouté au contrôleur AddChildViewController (navController)de vue et la vue présentée View.Add (navController.View).

Enfin, et à nouveau en fonction du type de présentation, soit la ViewDidLoad ViewDidAppear méthode appelle la ShowSearchController méthode pour présenter la recherche à l’utilisateur :

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

    // If the Search Controller is being displayed as the content
    // of the search tab, include it here.
    ShowSearchController ();
}

public override void ViewDidAppear (bool animated)
{
    base.ViewDidAppear (animated);

    // If the Search Controller is being presented as a modal view,
    // call it here to display it over the contents of the Search
    // tab.
    // ShowSearchController ();
}

Lorsque l’application est exécutée et que l’onglet Recherche sélectionné par l’utilisateur, la liste complète des éléments non filtrées est présentée à l’utilisateur :

Résultats de recherche par défaut

Lorsque l’utilisateur commence à entrer un terme de recherche, la liste des résultats sera filtrée par ce terme et mise à jour automatiquement :

Résultats de recherche filtrés

À tout moment, l’utilisateur peut basculer focus sur un élément dans les résultats de la recherche, puis cliquer sur l’aire tactile de Siri Remote pour le sélectionner.

Résumé

Cet article a abordé la conception et l’utilisation de champs de recherche et de texte à l’intérieur d’une application Xamarin.tvOS. Il a montré comment créer du contenu de la collection de texte et de recherche dans le Concepteur d’interface et il a montré à deux façons différentes qu’un champ de recherche peut être présenté à l’utilisateur dans tvOS.