Práce se zobrazeními tabulky tvOS v Xamarinu

Tento článek se věnuje návrhu a práci se zobrazeními tabulek a kontrolery zobrazení tabulek uvnitř aplikace Xamarin.tvOS.

V tvOS se zobrazení tabulky zobrazuje jako jeden sloupec posouvání řádků, který lze volitelně uspořádat do skupin nebo oddílů. Zobrazení tabulek by se měla používat v případě, že potřebujete uživateli efektivně zobrazit velké množství dat, a to srozumitelně a srozumitelně.

Zobrazení tabulek se obvykle zobrazují na jedné straně rozděleného zobrazení jako navigace s podrobnostmi o vybrané položce zobrazené na opačné straně:

Zobrazení ukázkové tabulky

O zobrazeních tabulek

Objekt UITableView zobrazí jeden sloupec posouvatelných řádků jako hierarchický seznam informací, které lze volitelně uspořádat do skupin nebo oddílů:

Vybraná položka

Apple nabízí pro práci s tabulkami následující návrhy:

  • Buďte si vědomi šířky – snažte se najít správnou rovnováhu v šířkách tabulky. Pokud je tabulka příliš široká, může být obtížné ji naskenovat z vzdálenosti a může se dostat z dostupné oblasti obsahu. Pokud je tabulka příliš úzká, může to způsobit zkrácení nebo zabalení informací, opět to může být pro uživatele obtížné číst z celé místnosti.
  • Rychle zobrazit obsah tabulky – pro velké seznamy dat opožděně načtěte obsah a začněte zobrazovat informace ihned po zobrazení tabulky uživateli. Pokud načtení tabulky trvá dlouho, může uživatel ztratit zájem o vaši aplikaci nebo si myslet, že je uzamčená.
  • Inform User of Long Content Loads (Informovat uživatele o načítání dlouhého obsahu) – Pokud je doba načítání tabulky nevyhnutelná, předložte indikátor průběhu nebo indikátor aktivity, aby věděl, že aplikace není uzamčená.

Typy buněk v zobrazení tabulky

Slouží UITableViewCell k reprezentaci jednotlivých řádků dat v zobrazení tabulky. Apple definovali několik výchozích typů buněk tabulky:

  • Výchozí – Tento typ představuje možnost Obrázek na levé straně buňky a nadpis zarovnaný doleva na pravé straně.
  • Podnadpis – Tento typ na prvním řádku představuje nadpis zarovnaný doleva a na dalším řádku menší podnadpis zarovnaný doleva.
  • Hodnota 1 – Tento typ představuje nadpis zarovnaný doleva s světlejším podnadpisem zarovnanou doprava na stejném řádku.
  • Hodnota 2 – Tento typ představuje nadpis zarovnaný doprava s světlejším podnadpisem zarovnanou vlevo na stejném řádku.

Všechny výchozí typy buněk zobrazení tabulky podporují také grafické prvky, jako jsou indikátory zpřístupnění nebo značky zaškrtnutí.

Kromě toho můžete definovat vlastní typ buňky zobrazení tabulky a prezentovat prototyp buňky ,kterou buď vytvoříte v Návrháři rozhraní, nebo prostřednictvím kódu.

Apple nabízí následující návrhy pro práci s buňkami v zobrazení tabulky:

  • Vyhněte se oříznutí textu – Jednotlivé řádky textu nechte krátké, aby se nezkrátilo. Pro uživatele je obtížné analyzovat zkrácená slova nebo fráze z celé místnosti.
  • Vezměte v úvahu zaostřený stav řádku – vzhledem k tomu, že se řádek zvětšuje a při fokusu má zaoblenější rohy, musíte otestovat vzhled buňky ve všech stavech. Obrázky nebo text mohou být oříznuty nebo vypadat nesprávně ve stavu Focused.
  • Používejte upravitelné tabulky jen tak, že přesunutí nebo odstranění řádků tabulky je v TVSu časově náročnější než v iOSu. Musíte se pečlivě rozhodnout, jestli tato funkce přidá vaši aplikaci pro tvOS nebo ji bude rušit.
  • Tam, kde je to vhodné, vytvořte vlastní typy buněk – i když jsou integrované typy buněk zobrazení tabulky skvělé pro mnoho situací, zvažte vytvoření vlastních typů buněk pro nestandardní informace, které poskytují větší kontrolu a lepší prezentují informace uživateli.

Práce se zobrazeními tabulek

Nejjednodušší způsob, jak pracovat se zobrazeními tabulek v aplikaci Xamarin.tvOS, je vytvořit a upravit jejich vzhled v Návrháři rozhraní.

Pokud chcete začít, proveďte následující:

  1. V Visual Studio pro Mac nový projekt aplikace tvOS, vyberte tvOSApp Single View App (aplikace s jedním zobrazením) a klikněte na tlačítko Next (Další):

    Výběr aplikace s jedním zobrazením

  2. Zadejte Název aplikace a klikněte na Další:

    Zadejte Název aplikace.

  3. Upravte název Project anázev řešení nebo přijměte výchozí hodnoty a kliknutím na tlačítko Vytvořit vytvořte nové řešení:

    Název Project a řešení

  4. V Oblast řešenípoklikejte na soubor a otevřete ho v iOS Designeru:

    Soubor Main.storyboard

  5. Vyberte a odstraňte výchozí kontroler zobrazení:

    Výběr a odstranění výchozího kontroleru zobrazení

  6. Z panelu nástrojů vyberte Kontroler rozdělené zobrazení a přetáhněte ho na Návrhová plocha.

  7. Ve výchozím nastavení získáte rozdělené zobrazení s kontroleru navigačního zobrazení a kontroleru zobrazení tabulky na levé straně a kontroleru zobrazení na pravé straně. Toto je navrhované použití zobrazení tabulky apple v TVSu:

    Přidání rozdělené zobrazení

  8. Budete muset vybrat všechny části zobrazení tabulky a přiřadit mu vlastní název třídy na kartě Widget v Průzkumníku vlastností, abyste k ní měli přístup později v kódu jazyka C#. Například kontroler zobrazení tabulky:

    Přiřazení názvu třídy

  9. Ujistěte se, že jste vytvořili vlastní třídu pro kontroler zobrazení tabulky, zobrazení tabulky a všechny prototypové buňky. Visual Studio pro Mac přidá vlastní třídy do stromu Project při jejich vytváření:

    Vlastní třídy v Project stromu

  10. Dále vyberte zobrazení tabulky v Návrhová plocha a podle potřeby upravte jeho vlastnosti. Například počet prototypů buněk astyl (prostý nebo seskupený):

    Karta widgetu

  11. Pro každou buňku prototypuji vyberte a přiřaďte jedinečný identifikátor na kartě Widget v Průzkumníku vlastností. Tento krok je velmi důležitý, protože tento identifikátor budete potřebovat později, až tabulku naplníte. Například AttrCell :

    Karta Widget

  12. Můžete také vybrat, že se buňka zobrazí jako jeden z výchozích typů buněk zobrazení tabulky prostřednictvím rozevíracího seznamu Styl, nebo ji nastavíte na Vlastní a použijete Návrhová plocha k rozložení buňky přetažením dalších widgetů uživatelského rozhraní ze sady nástrojů:

    Rozložení buňky

  13. Přiřaďte každému prvku uživatelského rozhraní v návrhu Prototyp buňky na kartě Widget v Průzkumníku vlastností jedinečný Název, abyste k nim měli přístup později v kódu C#:

    Přiřazení názvu

  14. Opakujte výše uvedený krok pro všechny prototypové buňky v zobrazení tabulky.

  15. Dále přiřaďte vlastní třídy zbývající části návrhu uživatelského rozhraní, rozložení zobrazení Podrobnosti a přiřaďte jedinečné názvy každému prvku uživatelského rozhraní v zobrazení Podrobnosti, abyste k nim měli přístup také v jazyce C#. Příklad:

    Rozložení uživatelského rozhraní

  16. Uložte změny do scénáře.

Návrh datového modelu

Pokud chcete usnadnit práci s informacemi, které bude zobrazení tabulky zobrazovat, a usnadnit prezentování podrobných informací (když uživatel vybere nebo zvýrazní řádky v zobrazení tabulky), vytvořte pro prezentované informace vlastní třídu nebo třídy, které budou fungovat jako datový model.

Vezměme si příklad aplikace pro rezervaci cest, která obsahuje seznam měst,z nichž každá obsahuje jedinečný seznam položek, které si uživatel může vybrat. Uživatel bude moct označit atrakci jako oblíbenou, vybrat a získat pokyny k atrakci a rezervovat let do daného města.

Pokud chcete vytvořit datový model pro atrakci,klikněte pravým tlačítkem na název Project v okně Oblast řešení vyberte Přidatnový soubor.... Jako Název zadejte a klikněte na tlačítko Nový:

Jako Název zadejteInformation (Informace o programu)

Upravte AttractionInformation.cs soubor tak, aby vypadal takto:

using System;
using Foundation;

namespace tvTable
{
    public class AttractionInformation : NSObject
    {
        #region Computed Properties
        public CityInformation City { get; set;}
        public string Name { get; set;}
        public string Description { get; set;}
        public string ImageName { get; set;}
        public bool IsFavorite { get; set;}
        public bool AddDirections { get; set;}
        #endregion

        #region Constructors
        public AttractionInformation (string name, string description, string imageName)
        {
            // Initialize
            this.Name = name;
            this.Description = description;
            this.ImageName = imageName;
        }
        #endregion
    }
}

Tato třída poskytuje vlastnosti pro uložení informací o dané ádosti.

Potom znovu klikněte pravým tlačítkem Project název souboru Oblast řešeníavyberte Přidat nový soubor.... Jako Název zadejte a klikněte na tlačítko Nový:

Jako Název zadejte CityInformation.

Upravte CityInformation.cs soubor tak, aby vypadal takto:

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

namespace tvTable
{
    public class CityInformation : NSObject
    {
        #region Computed Properties
        public string Name { get; set; }
        public List<AttractionInformation> Attractions { get; set;}
        public bool FlightBooked { get; set;}
        #endregion

        #region Constructors
        public CityInformation (string name)
        {
            // Initialize
            this.Name = name;
            this.Attractions = new List<AttractionInformation> ();
        }
        #endregion

        #region Public Methods
        public void AddAttraction (AttractionInformation attraction)
        {
            // Mark as belonging to this city
            attraction.City = this;

            // Add to collection
            Attractions.Add (attraction);
        }

        public void AddAttraction (string name, string description, string imageName)
        {
            // Create attraction
            var attraction = new AttractionInformation (name, description, imageName);

            // Mark as belonging to this city
            attraction.City = this;

            // Add to collection
            Attractions.Add (attraction);
        }
        #endregion
    }
}

Tato třída obsahuje všechny informace o cílovém městě ,kolekci sčítačů pro toto město a poskytuje dvě pomocné metody ( ), které usnadňují přidávání atrakcí do města.

Zdroj dat zobrazení tabulky

Každé zobrazení tabulky vyžaduje, aby zdroj dat ( ) poskytoval data pro tabulku a vygeneroval potřebné řádky podle UITableViewDataSource požadavků zobrazení tabulky.

Pro výše uvedený příklad klikněte pravým tlačítkem na název Project v Průzkumník řešení, vyberte Přidatnový soubor... a zavolejte ho a kliknutím na tlačítko Nový vytvořte. V dalším kroku upravte AttractionTableDatasource.cs soubor tak, aby vypadal takto:

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

namespace tvTable
{
    public class AttractionTableDatasource : UITableViewDataSource
    {
        #region Constants
        const string CellID = "AttrCell";
        #endregion

        #region Computed Properties
        public AttractionTableViewController Controller { get; set;}
        public List<CityInformation> Cities { get; set;}
        #endregion

        #region Constructors
        public AttractionTableDatasource (AttractionTableViewController controller)
        {
            // Initialize
            this.Controller = controller;
            this.Cities = new List<CityInformation> ();
            PopulateCities ();
        }
        #endregion

        #region Public Methods
        public void PopulateCities ()
        {
            // Clear existing
            Cities.Clear ();

            // Define cities and attractions
            var Paris = new CityInformation ("Paris");
            Paris.AddAttraction ("Eiffel Tower", "Is a wrought iron lattice tower on the Champ de Mars in Paris, France.", "EiffelTower");
            Paris.AddAttraction ("Musée du Louvre", "is one of the world's largest museums and a historic monument in Paris, France.", "Louvre");
            Paris.AddAttraction ("Moulin Rouge", "French for 'Red Mill', is a cabaret in Paris, France.", "MoulinRouge");
            Paris.AddAttraction ("La Seine", "Is a 777-kilometre long river and an important commercial waterway within the Paris Basin.", "RiverSeine");
            Cities.Add (Paris);

            var SanFran = new CityInformation ("San Francisco");
            SanFran.AddAttraction ("Alcatraz Island", "Is located in the San Francisco Bay, 1.25 miles (2.01 km) offshore from San Francisco.", "Alcatraz");
            SanFran.AddAttraction ("Golden Gate Bridge", "Is a suspension bridge spanning the Golden Gate strait between San Francisco Bay and the Pacific Ocean", "GoldenGateBridge");
            SanFran.AddAttraction ("San Francisco", "Is the cultural, commercial, and financial center of Northern California.", "SanFrancisco");
            SanFran.AddAttraction ("Telegraph Hill", "Is primarily a residential area, much quieter than adjoining North Beach.", "TelegraphHill");
            Cities.Add (SanFran);

            var Houston = new CityInformation ("Houston");
            Houston.AddAttraction ("City Hall", "It was constructed in 1938-1939, and is located in Downtown Houston.", "CityHall");
            Houston.AddAttraction ("Houston", "Is the most populous city in Texas and the fourth most populous city in the US.", "Houston");
            Houston.AddAttraction ("Texas Longhorn", "Is a breed of cattle known for its characteristic horns, which can extend to over 6 ft.", "LonghornCattle");
            Houston.AddAttraction ("Saturn V Rocket", "was an American human-rated expendable rocket used by NASA between 1966 and 1973.", "Rocket");
            Cities.Add (Houston);
        }
        #endregion

        #region Override Methods
        public override UITableViewCell GetCell (UITableView tableView, Foundation.NSIndexPath indexPath)
        {
            // Get cell
            var cell = tableView.DequeueReusableCell (CellID) as AttractionTableCell;

            // Populate cell
            cell.Attraction = Cities [indexPath.Section].Attractions [indexPath.Row];

            // Return new cell
            return cell;
        }

        public override nint NumberOfSections (UITableView tableView)
        {
            // Return number of cities
            return Cities.Count;
        }

        public override nint RowsInSection (UITableView tableView, nint section)
        {
            // Return the number of attractions in the given city
            return Cities [(int)section].Attractions.Count;
        }

        public override string TitleForHeader (UITableView tableView, nint section)
        {
            // Get the name of the current city
            return Cities [(int)section].Name;
        }
        #endregion
    }
}

Podívejme se podrobně na několik částí třídy.

Nejprve jsme definovali konstantu pro uložení jedinečného identifikátoru buňky prototypu (jedná se o stejný identifikátor přiřazený v návrháři rozhraní výše), přidali jsme zástupce zpět do kontroleru zobrazení tabulky a vytvořili úložiště pro naše data:

const string CellID = "AttrCell";
public AttractionTableViewController Controller { get; set;}
public List<CityInformation> Cities { get; set;}

Dále uložíme kontroler zobrazení tabulky a při vytvoření třídy sestavíme a naplníme zdroj dat (pomocí výše definovaných datových modelů):

public AttractionTableDatasource (AttractionTableViewController controller)
{
    // Initialize
    this.Controller = controller;
    this.Cities = new List<CityInformation> ();
    PopulateCities ();
}

Pro příklad metoda jednoduše vytvoří objekty datového modelu v paměti, ale tyto objekty je možné snadno číst z databáze nebo webové služby PopulateCities ve skutečné aplikaci:

public void PopulateCities ()
{
    // Clear existing
    Cities.Clear ();

    // Define cities and attractions
    var Paris = new CityInformation ("Paris");
    Paris.AddAttraction ("Eiffel Tower", "Is a wrought iron lattice tower on the Champ de Mars in Paris, France.", "EiffelTower");
    ...
}

Metoda NumberOfSections vrátí počet oddílů v tabulce:

public override nint NumberOfSections (UITableView tableView)
{
    // Return number of cities
    return Cities.Count;
}

V případě zobrazení tabulek v prostém stylu vždy vraťte hodnotu 1.

Metoda RowsInSection vrátí počet řádků v aktuálním oddílu:

public override nint RowsInSection (UITableView tableView, nint section)
{
    // Return the number of attractions in the given city
    return Cities [(int)section].Attractions.Count;
}

V případě zobrazení prostých tabulek opět vrátí celkový počet položek ve zdroji dat.

Metoda TitleForHeader vrátí název pro daný oddíl:

public override string TitleForHeader (UITableView tableView, nint section)
{
    // Get the name of the current city
    return Cities [(int)section].Name;
}

Jako typ Zobrazení prosté tabulky ponechte název prázdný ( ).

Nakonec na žádost v zobrazení tabulky vytvořte a naplňte prototyp buňky pomocí GetCell metody :

public override UITableViewCell GetCell (UITableView tableView, Foundation.NSIndexPath indexPath)
{
    // Get cell
    var cell = tableView.DequeueReusableCell (CellID) as AttractionTableCell;

    // Populate cell
    cell.Attraction = Cities [indexPath.Section].Attractions [indexPath.Row];

    // Return new cell
    return cell;
}

Další informace o práci s najdete v dokumentaci UITableViewDatasourceUITableViewDatasource společnosti Apple.

Delegát zobrazení tabulky

Každé zobrazení tabulky vyžaduje, aby delegát ( ) reagoval na interakci uživatele nebo jiné systémové UITableViewDelegate události v tabulce.

Pro výše uvedený příklad klikněte pravým tlačítkem na název Project v Průzkumník řešení, vyberte Přidatnový soubor... a zavolejte ho a kliknutím na tlačítko Nový vytvořte. V dalším kroku upravte AttractionTableDelegate.cs soubor tak, aby vypadal takto:

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

namespace tvTable
{
    public class AttractionTableDelegate : UITableViewDelegate
    {
        #region Computed Properties
        public AttractionTableViewController Controller { get; set;}
        #endregion

        #region Constructors
        public AttractionTableDelegate (AttractionTableViewController controller)
        {
            // Initializw
            this.Controller = controller;
        }
        #endregion

        #region Override Methods
        public override void RowSelected (UITableView tableView, Foundation.NSIndexPath indexPath)
        {
            var attraction = Controller.Datasource.Cities [indexPath.Section].Attractions [indexPath.Row];
            attraction.IsFavorite = (!attraction.IsFavorite);

            // Update UI
            Controller.TableView.ReloadData ();
        }

        public override bool CanFocusRow (UITableView tableView, Foundation.NSIndexPath indexPath)
        {
            // Inform caller of highlight change
            RaiseAttractionHighlighted (Controller.Datasource.Cities [indexPath.Section].Attractions [indexPath.Row]);
            return true;
        }
        #endregion

        #region Events
        public delegate void AttractionHighlightedDelegate (AttractionInformation attraction);
        public event AttractionHighlightedDelegate AttractionHighlighted;

        internal void RaiseAttractionHighlighted (AttractionInformation attraction)
        {
            // Inform caller
            if (this.AttractionHighlighted != null) this.AttractionHighlighted (attraction);
        }
        #endregion
    }
}

Podívejme se podrobně na několik částí této třídy.

Nejprve vytvoříme zástupce kontroleru zobrazení tabulky při vytvoření třídy:

public AttractionTableViewController Controller { get; set;}
...

public AttractionTableDelegate (AttractionTableViewController controller)
{
    // Initialize
    this.Controller = controller;
}

Když pak vyberete řádek (uživatel klikne na Dotykovou plochu Apple Remote), chceme vybranou položku Řádek označit jako oblíbenou:

public override void RowSelected (UITableView tableView, Foundation.NSIndexPath indexPath)
{
    var attraction = Controller.Datasource.Cities [indexPath.Section].Attractions [indexPath.Row];
    attraction.IsFavorite = (!attraction.IsFavorite);

    // Update UI
    Controller.TableView.ReloadData ();
}

Když pak uživatel zvýrazní řádek (tím, že mu dát Focus pomocí Apple Remote Touch Surface), chceme v části Podrobnosti v našem děleném kontroleru zobrazení prezentovat podrobnosti o lomeném řádku:

public override bool CanFocusRow (UITableView tableView, Foundation.NSIndexPath indexPath)
{
    // Inform caller of highlight change
    RaiseAttractionHighlighted (Controller.Datasource.Cities [indexPath.Section].Attractions [indexPath.Row]);
    return true;
}
...

public delegate void AttractionHighlightedDelegate (AttractionInformation attraction);
public event AttractionHighlightedDelegate AttractionHighlighted;

internal void RaiseAttractionHighlighted (AttractionInformation attraction)
{
    // Inform caller
    if (this.AttractionHighlighted != null) this.AttractionHighlighted (attraction);
}

Metoda je volána pro každý řádek, který se má v zobrazení CanFocusRow tabulky zaměřit. Pokud true řádek může získat fokus, vrátí se . false V tomto příkladu jsme vytvořili vlastní událost, která bude vyvolána na každém řádku při AttractionHighlighted přijetí fokusu.

Další informace o práci s najdete v dokumentaci UITableViewDelegate Apple UITableViewDelegate

Buňka zobrazení tabulky

Pro každou buňku prototypu, kterou jste přidali do zobrazení tabulky v návrháři rozhraní, jste také vytvořili vlastní instanci buňky zobrazení tabulky ( ), která vám umožní naplnit novou buňku UITableViewCell (řádek) při vytváření.

Pro příklad aplikace poklikejte na soubor a otevřete ho pro úpravy, aby vypadal AttractionTableCell.cs takto:

using System;
using Foundation;
using UIKit;

namespace tvTable
{
    public partial class AttractionTableCell : UITableViewCell
    {
        #region Private Variables
        private AttractionInformation _attraction = null;
        #endregion

        #region Computed Properties
        public AttractionInformation Attraction {
            get { return _attraction; }
            set {
                _attraction = value;
                UpdateUI ();
            }
        }
        #endregion

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

        #region Private Methods
        private void UpdateUI ()
        {
            // Trap all errors
            try {
                Title.Text = Attraction.Name;
                Favorite.Hidden = (!Attraction.IsFavorite);
            } catch {
                // Since the UI might not be fully loaded, ignore
                // all errors at this point
            }
        }
        #endregion
    }
}

Tato třída poskytuje úložiště pro objekt ZDM AttractionInformation (jak je definováno výše) zobrazený v daném řádku:

private AttractionInformation _attraction = null;
...

public AttractionInformation Attraction {
    get { return _attraction; }
    set {
        _attraction = value;
        UpdateUI ();
    }
}

Metoda UpdateUI podle potřeby naplní widgety uživatelského rozhraní (přidané do prototypu buňky v Návrháři rozhraní):

private void UpdateUI ()
{
    // Trap all errors
    try {
        Title.Text = Attraction.Name;
        Favorite.Hidden = (!Attraction.IsFavorite);
    } catch {
        // Since the UI might not be fully loaded, ignore
        // all errors at this point
    }
}

Další informace o práci s objektem UITableViewCell najdete v dokumentaci apple UITableViewCell

Kontroler zobrazení tabulky

Kontroler zobrazení tabulky ( ) spravuje zobrazení tabulky, které bylo přidáno do UITableViewController scénáře prostřednictvím Návrháře rozhraní.

Pro příklad aplikace poklikejte na soubor a otevřete ho pro úpravy, aby vypadal AttractionTableViewController.cs takto:

using System;
using Foundation;
using UIKit;

namespace tvTable
{
    public partial class AttractionTableViewController : UITableViewController
    {
        #region Computed Properties
        public AttractionTableDatasource Datasource {
            get { return TableView.DataSource as AttractionTableDatasource; }
        }

        public AttractionTableDelegate TableDelegate {
            get { return TableView.Delegate as AttractionTableDelegate; }
        }
        #endregion

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

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

            // Setup table
            TableView.DataSource = new AttractionTableDatasource (this);
            TableView.Delegate = new AttractionTableDelegate (this);
            TableView.ReloadData ();
        }
        #endregion
    }
}

Pojďme se na tuto třídu podívat blíže. Nejprve jsme vytvořili zástupce, které usnadňují přístup k tabulkového zobrazení a DataSourceTableDelegate . Později je použijeme ke komunikaci mezi zobrazením tabulky na levé straně Rozdělené zobrazení a Zobrazením podrobností na pravé straně.

Nakonec, když je zobrazení tabulky načteno do paměti, vytvoříme instance a (obě vytvořené výše) a připojíme AttractionTableDatasourceAttractionTableDelegate je k zobrazení tabulky.

Další informace o práci s najdete v dokumentaci UITableViewController Apple UITableViewController

Stažení všech dohromady

Jak je uvedeno na začátku tohoto dokumentu, zobrazení tabulek se obvykle zobrazují na jedné straně rozděleného zobrazení jako navigace s podrobnostmi o vybrané položce zobrazenými na opačné straně. Například:

Spuštění ukázkové aplikace

Vzhledem k tomu, že se jedná o standardní vzor v TVSu, podívejme se na poslední kroky, které vše svedou dohromady a vzájemně spolupracují levé a pravé strany Rozdělené zobrazení.

Zobrazení podrobností

Pro příklad výše uvedené cestovní aplikace je definována vlastní třída ( ) pro standardní kontroler zobrazení uvedený na pravé straně rozdělené zobrazení jako AttractionViewController zobrazení podrobností:

using System;
using Foundation;
using UIKit;

namespace tvTable
{
    public partial class AttractionViewController : UIViewController
    {
        #region Private Variables
        private AttractionInformation _attraction = null;
        #endregion

        #region Computed Properties
        public AttractionInformation Attraction {
            get { return _attraction; }
            set {
                _attraction = value;
                UpdateUI ();
            }
        }

        public MasterSplitView SplitView { get; set;}
        #endregion

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

        #region Public Methods
        public void UpdateUI ()
        {
            // Trap all errors
            try {
                City.Text = Attraction.City.Name;
                Title.Text = Attraction.Name;
                SubTitle.Text = Attraction.Description;

                IsFlighBooked.Hidden = (!Attraction.City.FlightBooked);
                IsFavorite.Hidden = (!Attraction.IsFavorite);
                IsDirections.Hidden = (!Attraction.AddDirections);
                BackgroundImage.Image = UIImage.FromBundle (Attraction.ImageName);
                AttractionImage.Image = BackgroundImage.Image;
            } catch {
                // Since the UI might not be fully loaded, ignore
                // all errors at this point
            }
        }
        #endregion

        #region Override Methods
        public override void ViewWillAppear (bool animated)
        {
            base.ViewWillAppear (animated);

            // Ensure the UI Updates
            UpdateUI ();
        }
        #endregion

        #region Actions
        partial void BookFlight (NSObject sender)
        {
            // Ask user to book flight
            AlertViewController.PresentOKCancelAlert ("Book Flight",
                                                      string.Format ("Would you like to book a flight to {0}?", Attraction.City.Name),
                                                      this,
                                                      (ok) => {
                Attraction.City.FlightBooked = ok;
                IsFlighBooked.Hidden = (!Attraction.City.FlightBooked);
            });
        }

        partial void GetDirections (NSObject sender)
        {
            // Ask user to add directions
            AlertViewController.PresentOKCancelAlert ("Add Directions",
                                                     string.Format ("Would you like to add directions to {0} to you itinerary?", Attraction.Name),
                                                     this,
                                                     (ok) => {
                                                         Attraction.AddDirections = ok;
                                                         IsDirections.Hidden = (!Attraction.AddDirections);
                                                     });
        }

        partial void MarkFavorite (NSObject sender)
        {
            // Flip favorite state
            Attraction.IsFavorite = (!Attraction.IsFavorite);
            IsFavorite.Hidden = (!Attraction.IsFavorite);

            // Reload table
            SplitView.Master.TableController.TableView.ReloadData ();
        }
        #endregion
    }
}

Tady jsme dodali, že Sesmykací ( ) se zobrazuje jako vlastnost a vytvořili jsme metodu, která naplní widgety uživatelského rozhraní přidané do zobrazení v UpdateUI Návrháři rozhraní.

Také jsme definovali zástupce zpět na kontroler rozdělených zobrazení ( ), který použijeme ke sdělování změn SplitView zpět do zobrazení tabulky ( AcctractionTableView ).

Nakonec byly do tří instancí vytvořených v návrháři rozhraní přidány vlastní akce (události), které uživateli umožňují označit atrakci jako oblíbenou, získat pokyny k a rezervovat let do daného UIButton města. UIButton

Kontroler navigačního zobrazení

Protože je kontroler zobrazení tabulky vnořený v kontroleru navigačního zobrazení na levé straně rozděleného zobrazení, byl kontroleru navigačního zobrazení přiřazena vlastní třída ( ) v Návrháři rozhraní a byla MasterNavigationController definována takto:

using System;
using Foundation;
using UIKit;

namespace tvTable
{
    public partial class MasterNavigationController : UINavigationController
    {
        #region Computed Properties
        public MasterSplitView SplitView { get; set;}
        public AttractionTableViewController TableController {
            get { return TopViewController as AttractionTableViewController; }
        }
        #endregion

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

Tato třída jen definuje několik zástupců, aby bylo snazší komunikovat na obou stranách kontroleru rozdělených zobrazení:

  • SplitView – Je odkaz na kontroler rozdělených zobrazení ( ), do které patří MainSpiltViewController kontroler navigačního zobrazení.
  • TableController – Získá kontroler zobrazení tabulky ( ), který se zobrazí AttractionTableViewController jako horní zobrazení v kontroleru zobrazení navigace.

Kontroler rozdělené zobrazení

Vzhledem k tomu, že kontroler rozdělených zobrazení je základem naší aplikace, vytvořili jsme pro něj vlastní třídu ( ) v Návrháři rozhraní a definovali MasterSplitViewController jsme ji takto:

using System;
using Foundation;
using UIKit;

namespace tvTable
{
    public partial class MasterSplitView : UISplitViewController
    {
        #region Computed Properties
        public AttractionViewController Details {
            get { return ViewControllers [1] as AttractionViewController; }
        }

        public MasterNavigationController Master {
            get { return ViewControllers [0] as MasterNavigationController; }
        }
        #endregion

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

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

            // Initialize
            Master.SplitView = this;
            Details.SplitView = this;

            // Wire-up events
            Master.TableController.TableDelegate.AttractionHighlighted += (attraction) => {
                // Display new attraction
                Details.Attraction = attraction;
            };
        }
        #endregion
    }
}

Nejprve vytvoříme zástupce na straně Podrobností u rozdělených zobrazení ( ) a na straně předlohy ( ). To opět usnadňuje komunikaci mezi oběma stranami později.

Když je rozdělené zobrazení načteno do paměti, připojíme kontroler rozděleného zobrazení k oběma stranám rozděleného zobrazení a odpovíme uživateli se zvýrazněním atrakce v zobrazení tabulky ( ) zobrazením nového přehledu na straně podrobnosti rozděleného AttractionHighlighted zobrazení. AttractionHighlighted

Úplnou implementaci zobrazení tabulek uvnitř rozděleného zobrazení najdete v ukázkové aplikaci tvTables.

Podrobná zobrazení tabulek

Vzhledem k tomu, že tvOS je založené na iOSu, jsou zobrazení tabulek a kontrolery zobrazení tabulek navržené a chovají se podobným způsobem. Podrobnější informace o práci se zobrazením tabulky v aplikaci Xamarin najdete v naší dokumentaci k práci s tabulkami a buňkami pro iOS.

Souhrn

Tento článek popisuje návrh a práci se zobrazeními tabulek v aplikaci Xamarin.tvOS. A nabízí příklad práce se zobrazením tabulky v rozdělených zobrazeních, což je typické použití zobrazení tabulky v aplikaci pro tvOS.