Praca z polami tekstowymi i wyszukiwania systemu tvOS na platformie Xamarin

Artykuł
03/16/2017

Jeśli jest to wymagane, aplikacja Xamarin.tvOS może zażądać małych fragmentów tekstu od użytkownika (takich jak identyfikatory użytkowników i hasła) przy użyciu pola tekstowego i klawiatury ekranowej:

Opcjonalnie możesz udostępnić możliwość wyszukiwania słów kluczowych zawartości aplikacji przy użyciu pola wyszukiwania:

Ten dokument zawiera szczegółowe informacje dotyczące pracy z polami tekstowymi i wyszukiwania w aplikacji platformy Xamarin.tvOS.

Informacje o polach tekstowych i wyszukiwania

Jak wspomniano powyżej, jeśli jest to wymagane, system Xamarin.tvOS może przedstawić co najmniej jedno pole tekstowe, aby zebrać małe ilości tekstu od użytkownika przy użyciu ekranu (lub opcjonalnej klawiatury Bluetooth w zależności od wersji tvOS zainstalowanej przez użytkownika).

Ponadto jeśli aplikacja przedstawia użytkownikowi dużą ilość zawartości (np. muzykę, filmy lub kolekcję obrazów), możesz dołączyć pole wyszukiwania, które umożliwia użytkownikowi wprowadzanie niewielkiej ilości tekstu w celu filtrowania listy dostępnych elementów.

Pola tekstowe

W systemie tvOS pole tekstowe jest wyświetlane jako pole wprowadzania o stałej wysokości, zaokrąglonym rogu, które spowoduje wyświetlenie klawiatury na ekranie po kliknięciu go przez użytkownika:

Gdy użytkownik przeniesie fokus do danego pola tekstowego, powiększy się i wyświetli głęboki cień. Należy pamiętać o tym podczas projektowania interfejsu użytkownika, ponieważ pola tekstowe mogą nakładać się na inne elementy interfejsu użytkownika podczas koncentracji uwagi.

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

Użyj pozycji tekstowej oszczędnie — ze względu na charakter klawiatury ekranowej wprowadzanie długich sekcji tekstu lub wypełnianie wielu pól tekstowych jest żmudne dla użytkownika. Lepszym rozwiązaniem jest ograniczenie ilości wpisu tekstowego przy użyciu list zaznaczenia lub przycisków.
Użyj wskazówek, aby komunikować się z celem — pole tekstowe może wyświetlać symbol zastępczy "wskazówki", gdy jest pusty. Jeśli ma to zastosowanie, użyj wskazówek, aby opisać przeznaczenie pola tekstowego zamiast oddzielnej etykiety.
Wybierz odpowiedni domyślny typ klawiatury — system tvOS udostępnia kilka różnych, specjalnie utworzonych typów klawiatury, które można określić dla pola tekstowego. Na przykład klawiatura adresu e-mail może ułatwić wpis, umożliwiając użytkownikowi wybranie z listy ostatnio wprowadzonych adresów.
W razie potrzeby użyj pól bezpiecznego tekstu — pole bezpiecznego tekstu przedstawia znaki wprowadzone jako kropki (zamiast rzeczywistych liter). Zawsze używaj pola bezpiecznego tekstu podczas zbierania poufnych informacji, takich jak hasła.

Klawiatury

Za każdym razem, gdy użytkownik kliknie pole tekstowe w interfejsie użytkownika, zostanie wyświetlona liniowa klawiatura na ekranie. Użytkownik używa urządzenia Touch Surface zdalnego Siri, aby wybrać poszczególne litery z klawiatury i wprowadzić żądane informacje:

Jeśli w bieżącym widoku znajduje się więcej niż jedno pole tekstowe, zostanie automatycznie wyświetlony przycisk Dalej , aby umożliwić użytkownikowi przejście do następnego pola tekstowego. Zostanie wyświetlony przycisk Gotowe dla ostatniego pola tekstowego, który zakończy wpis tekstowy i zwróci użytkownikowi poprzedni ekran.

W dowolnym momencie użytkownik może również nacisnąć przycisk Menu w pozycji Siri Remote, aby zakończyć tekst, a następnie ponownie powrócić do poprzedniego ekranu.

Firma Apple ma następujące sugestie dotyczące pracy z klawiaturami na ekranie:

Wybierz odpowiedni domyślny typ klawiatury — system tvOS udostępnia kilka różnych, specjalnie utworzonych typów klawiatury, które można określić dla pola tekstowego. Na przykład klawiatura adresu e-mail może ułatwić wpis, umożliwiając użytkownikowi wybranie z listy ostatnio wprowadzonych adresów.
Jeśli jest to odpowiednie, użyj widoków akcesoriów klawiatury — oprócz standardowych informacji, które są zawsze wyświetlane, opcjonalne widoki dostępu (takie jak obrazy lub etykiety) można dodać do klawiatury na ekranie, aby wyjaśnić cel wprowadzania tekstu lub pomóc użytkownikowi w wprowadzeniu wymaganych informacji.

Aby uzyskać więcej informacji na temat pracy z klawiaturą ekranową, zobacz dokumentację interfejsu użytkownika firmy Apple, Zarządzanie klawiaturą , widokami niestandardowymi dla danych wejściowych i programowania tekstu w systemie iOS.

Search

Pole wyszukiwania przedstawia wyspecjalizowany ekran zawierający pole tekstowe i klawiaturę ekranową, która umożliwia użytkownikowi filtrowanie kolekcji elementów wyświetlanych poniżej klawiatury:

Gdy użytkownik wprowadza litery w polu wyszukiwania, wyniki poniżej będą automatycznie odzwierciedlać wyniki wyszukiwania. W dowolnym momencie użytkownik może przesunąć fokus na wyniki i wybrać jeden z prezentowanych elementów.

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

Podaj ostatnie wyszukiwania — ponieważ wprowadzanie tekstu za pomocą funkcji Siri Remote może być żmudne, a użytkownicy mają tendencję do powtarzania żądań wyszukiwania, rozważ dodanie sekcji Ostatnich wyników wyszukiwania przed bieżącymi wynikami w obszarze klawiatury.
Jeśli to możliwe, ogranicz liczbę wyników — ponieważ duża lista elementów może być trudna dla użytkownika do analizowania i nawigowania, rozważ ograniczenie liczby zwracanych wyników.
Jeśli jest to odpowiednie, podaj filtry wyników wyszukiwania — jeśli zawartość dostarczona przez aplikację nadaje się sama, rozważ dodanie pasków zakresu, aby umożliwić użytkownikowi dalsze filtrowanie zwróconych wyników wyszukiwania.

Aby uzyskać więcej informacji, zobacz Dokumentacja klasy UISearchController firmy Apple.

Praca z polami tekstowymi

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

Należy wykonać następujące czynności:

Visual Studio dla komputerów Mac
Program Visual Studio

W okienku rozwiązania kliknij Main.storyboard dwukrotnie plik, aby otworzyć go do edycji.
Przeciągnij co najmniej jedno pole tekstowe int powierzchni projektowej na widok:
Wybierz pola tekstowe i nadaj każdemu unikatową nazwę na karcie Widżet okienka właściwości:
W sekcji Pole tekstowe można zdefiniować elementy, takie jak wskazówka symbolu zastępczegoi wartość domyślna:
Przewiń w dół, aby zdefiniować właściwości, takie jak sprawdzanie pisowni, wielkie litery i domyślny typ klawiatury:
Zapisz zmiany w scenorysie.

W Eksplorator rozwiązań kliknij Main.storyboard dwukrotnie plik, aby otworzyć go do edycji.
Przeciągnij co najmniej jedno pole tekstowe int powierzchni projektowej na widok:
Wybierz pola tekstowe i nadaj każdemu unikatową nazwę na karcie Widżet Eksploratora właściwości:
W sekcji Pole tekstowe można zdefiniować elementy, takie jak wskazówka symbolu zastępczegoi wartość domyślna:
Przewiń w dół, aby zdefiniować właściwości, takie jak sprawdzanie pisowni, wielkie litery i domyślny typ klawiatury:
Zapisz zmiany w scenorysie.

W kodzie można pobrać lub ustawić wartość pola tekstowego przy użyciu jego Text właściwości:

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

Opcjonalnie możesz użyć zdarzeń pola tekstowego Started i , Ended aby reagować na wpis tekstowy rozpoczynający się i kończący.

Praca z polami wyszukiwania

Najprostszym sposobem pracy z polami wyszukiwania w aplikacji platformy Xamarin.tvOS jest dodanie ich do projektu interfejsu użytkownika przy użyciu Projektant interfejsu.

Należy wykonać następujące czynności:

Visual Studio dla komputerów Mac
Program Visual Studio

W okienku rozwiązania kliknij Main.storyboard dwukrotnie plik, aby otworzyć go do edycji.
Przeciągnij nowy kontroler widoku kolekcji do scenorysu, aby przedstawić wyniki wyszukiwania użytkownika:
Na karcie Widżet okienka właściwości użyj elementu SearchResultsViewController Classi SearchResults dla identyfikatora scenorysu:
Wybierz prototyp komórki na powierzchni projektowej.
Na karcie Widżet Eksploratora właściwości użyj dla SearchResultCell klasy i ImageCell identyfikatora:
Układ projektu prototypu komórki i uwidocznij każdy element z unikatową nazwą na karcie Widżet Eksploratora właściwości:
Zapisz zmiany w scenorysie.

W Eksplorator rozwiązań kliknij Main.storyboard dwukrotnie plik, aby otworzyć go do edycji.
Przeciągnij nowy kontroler widoku kolekcji do scenorysu, aby przedstawić wyniki wyszukiwania użytkownika:
Na karcie Widżet Eksploratora właściwości użyj elementu SearchResultsViewController Classi SearchResults dla identyfikatora scenorysu:
Wybierz prototyp komórki na powierzchni projektowej.
Na karcie Widżet Eksploratora właściwości użyj dla SearchResultCell klasy i ImageCell identyfikatora:
Układ projektu prototypu komórki i uwidocznij każdy element z unikatową nazwą na karcie Widżet Eksploratora właściwości:
Zapisz zmiany w scenorysie.

Następnie należy podać klasę, która będzie działać jako model danych dla wyników wyszukiwania przez użytkownika. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy nazwę projektu i wybierz polecenie Dodaj>nowy plik...>Ogólna>pusta klasa i podaj nazwę:

Na przykład aplikacja, która umożliwia użytkownikowi wyszukiwanie kolekcji obrazów według tytułu i słowa kluczowego, może wyglądać następująco:

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

Komórka widoku kolekcji

Po wprowadzeniu modelu danych zmodyfikuj komórkę prototypu (SearchResultViewCell.cs) i umieść ją w następujący sposób:

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
    }

}

Metoda UpdateUI będzie używana do wyświetlania poszczególnych pól elementów PictureInformation ( PictureInfo właściwości) w nazwanych elementach interfejsu użytkownika za każdym razem, gdy właściwość jest aktualizowana. Na przykład obraz i tytuł skojarzony z obrazem.

Kontroler widoku kolekcji

Następnie zmodyfikuj kontroler widoku kolekcji wyników wyszukiwania (SearchResultsViewController.cs) i ustaw go tak:

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

Najpierw interfejs jest dodawany do klasy w IUISearchResultsUpdating celu obsługi filtru kontrolera wyszukiwania aktualizowanego przez użytkownika:

public partial class SearchResultsViewController : UICollectionViewController , IUISearchResultsUpdating

Stała jest również zdefiniowana w celu określenia identyfikatora prototypowej komórki (zgodnej z identyfikatorem zdefiniowanym w powyższym Projektant interfejsu), który będzie używany później, gdy kontroler kolekcji zażąda nowej komórki:

public const string CellID = "ImageCell";

Magazyn jest tworzony dla pełnej listy wyszukiwanych elementów, wyszukiwanego terminu filtru i listy elementów pasujących do tego terminu:

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

SearchFilter Po zmianie listy pasujących elementów zostanie zaktualizowana, a zawartość widoku kolekcji zostanie ponownie załadowana. Ta rutyna FindPictures jest odpowiedzialna za znajdowanie elementów pasujących do nowego terminu wyszukiwania:

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

Wartość SearchFilter elementu zostanie zaktualizowana (co spowoduje zaktualizowanie widoku kolekcji wyników), gdy użytkownik zmieni filtr na kontrolerze wyszukiwania:

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

Metoda PopulatePictures początkowo wypełnia kolekcję dostępnych elementów:

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

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

W tym przykładzie wszystkie przykładowe dane są tworzone w pamięci podczas ładowania kontrolera widoku kolekcji. W prawdziwej aplikacji te dane prawdopodobnie będą odczytywane z bazy danych lub usługi internetowej i tylko w razie potrzeby, aby nie ograniczać pamięci urządzenia Apple TV.

Metody NumberOfSections i GetItemsCount zapewniają liczbę pasowanych elementów:

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

Metoda GetCell zwraca nową komórkę prototypu (na podstawie zdefiniowanej CellID powyżej w scenorysie) dla każdego elementu w widoku kolekcji:

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

Metoda jest wywoływana WillDisplayCell przed wyświetleniem komórki, aby można ją było skonfigurować:

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

Metoda DidUpdateFocus udostępnia użytkownikowi opinię wizualną podczas wyróżniania elementów w widoku kolekcji wyników:

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

ItemSelected Na koniec metoda obsługuje użytkownika wybierającego element (kliknięcie urządzenia Touch Surface za pomocą funkcji Siri Remote) w widoku kolekcji wyników:

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

Jeśli pole wyszukiwania zostało wyświetlone jako modalny widok okna dialogowego (w górnej części widoku wywołującego go), użyj DismissViewController metody , aby odrzucić widok wyszukiwania, gdy użytkownik wybierze element. W tym przykładzie pole wyszukiwania jest prezentowane jako zawartość karty Widok tabulacji, więc nie jest tu odrzucane.

Aby uzyskać więcej informacji na temat widoków kolekcji, zobacz dokumentację Dotyczącą pracy z widokami kolekcji.

Prezentowanie pola wyszukiwania

Istnieją dwa główne sposoby prezentowania pola wyszukiwania (i skojarzonych z nim na ekranie klawiatury i wyników wyszukiwania) dla użytkownika w systemie tvOS:

Modalny widok okna dialogowego — pole wyszukiwania można wyświetlić za pomocą bieżącego widoku i kontrolera widoku jako widoku modalnego okna dialogowego pełnoekranowego. Zwykle odbywa się to w odpowiedzi na kliknięcie przycisku lub innego elementu interfejsu użytkownika. Okno dialogowe jest odrzucane, gdy użytkownik wybierze element z wyników wyszukiwania.
Wyświetl zawartość — pole wyszukiwania jest bezpośrednią częścią danego widoku. Na przykład jako zawartość karty wyszukiwania w kontrolerze widoku kart.

W przykładzie z możliwością wyszukiwania listy obrazów przedstawionych powyżej pole wyszukiwania jest wyświetlane jako Wyświetl zawartość na karcie Wyszukiwania, a kontroler widoku karty wyszukiwania wygląda następująco:

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

Najpierw zdefiniowana jest stała zgodna z identyfikatorem scenorysu przypisanym do kontrolera widoku kolekcji wyników wyszukiwania w Projektant interfejsu:

public const string SearchResultsID = "SearchResults";

ShowSearchController Następnie metoda tworzy nowy kontroler kolekcji widoków wyszukiwania i wyświetla, że jest potrzebny:

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

W powyższej metodzie po SearchResultsViewController utworzeniu wystąpienia elementu z scenorysu zostanie utworzony nowy UISearchController element w celu przedstawienia pola wyszukiwania i klawiatury na ekranie użytkownikowi. Kolekcja wyników wyszukiwania (zdefiniowana przez element ) będzie wyświetlana SearchResultsViewControllerna tej klawiaturze.

Następnie element SearchBar zostanie skonfigurowany z informacjami, takimi jak wskazówka symbolu zastępczego. Zapewnia to użytkownikowi informacje o typie wyszukiwania, który jest wstępnie sformułowany.

Następnie pole wyszukiwania jest prezentowane użytkownikowi na jeden z dwóch sposobów:

Modalny widok okna dialogowego — metoda jest wywoływana PresentViewController w celu przedstawienia wyszukiwania w istniejącym widoku pełnoekranowym.
Wyświetl zawartość — tworzony UISearchContainerViewController jest element zawierający kontroler wyszukiwania. Zostanie UINavigationController utworzony element zawierający kontener wyszukiwania, a następnie kontroler nawigacji zostanie dodany do kontrolera AddChildViewController (navController)widoku i wyświetlony View.Add (navController.View)widok .

Na koniec i ponownie na podstawie typu ViewDidLoad prezentacji metoda lub ViewDidAppear wywoła ShowSearchController metodę , aby przedstawić wyszukiwanie użytkownikowi:

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

Po uruchomieniu aplikacji i wybraniu przez użytkownika karty wyszukiwania dla użytkownika zostanie wyświetlona pełna niefiltrowana lista elementów:

Gdy użytkownik zacznie wprowadzać wyszukiwany termin, lista wyników będzie filtrowana według tego terminu i automatycznie aktualizowana:

W dowolnym momencie użytkownik może przełączyć fokus na element w wynikach wyszukiwania i kliknąć pozycję Touch Surface zdalnego Siri, aby go wybrać.

Podsumowanie

W tym artykule opisano projektowanie i pracę z polami tekstowymi i wyszukiwania w aplikacji platformy Xamarin.tvOS. Pokazano w nim, jak utworzyć zawartość tekstu i kolekcji wyszukiwania w interfejsie Projektant i pokazać dwa różne sposoby prezentowania pola wyszukiwania użytkownikowi w systemie tvOS.

Udostępnij za pośrednictwem

Praca z polami tekstowymi i wyszukiwania systemu tvOS na platformie Xamarin

Informacje o polach tekstowych i wyszukiwania

Pola tekstowe

Klawiatury

Search

Praca z polami tekstowymi

Praca z polami wyszukiwania

Podawanie modelu danych

Komórka widoku kolekcji

Kontroler widoku kolekcji

Prezentowanie pola wyszukiwania

Podsumowanie

Dodatkowe zasoby

Udostępnij za pośrednictwem

Praca z polami tekstowymi i wyszukiwania systemu tvOS na platformie Xamarin

Informacje o polach tekstowych i wyszukiwania

Pola tekstowe

Klawiatury

Search

Praca z polami tekstowymi

Praca z polami wyszukiwania

Podawanie modelu danych

Komórka widoku kolekcji

Kontroler widoku kolekcji

Prezentowanie pola wyszukiwania

Podsumowanie

Linki powiązane

Dodatkowe zasoby