Práce s tabulkami v iOS Designeru

Scénáře představují WYSIWYG způsob vytváření aplikací pro iOS a podporují se v rámci Visual Studio na Macu a Windows. Další informace o scénářích najdete v dokumentu Úvod do scénářů . Scénáře také umožňují upravovat rozložení buněk v tabulce, což zjednodušuje vývoj s tabulkami a buňkami.

Při konfiguraci vlastností zobrazení tabulky v iOS Designeru existují dva typy obsahu buněk, ze které si můžete vybrat: dynamický nebo statický prototyp obsahu.

Dynamický prototyp obsahu

Obsah UITableView s prototypem je obvykle určen k zobrazení seznamu dat, kde se prototypová buňka (nebo buňky, jak můžete definovat více než jeden), znovu používají pro každou položku v seznamu. Buňky nemusí být vytvořena, jsou získány v GetView metodě voláním DequeueReusableCell metody UITableViewSource.

Statický obsah

UITableViews statickým obsahem umožňují navrhovat tabulky přímo na návrhové ploše. Buňky lze přetáhnout do tabulky a přizpůsobit změnou vlastností a přidáním ovládacích prvků.

Vytvoření aplikace Storyboard-Driven

Příklad StoryboardTable obsahuje jednoduchou aplikaci s hlavními podrobnostmi, která používá oba typy UITableView ve storyboardu. Zbývající část této části popisuje, jak vytvořit malý příklad seznamu úkolů, který bude po dokončení vypadat takto:

Uživatelské rozhraní bude sestaveno pomocí scénáře a obě obrazovky budou používat UITableView. Hlavní obrazovka používá prototypový obsah k rozložení řádku a obrazovka podrobností používá statický obsah k vytvoření formuláře pro zadávání dat pomocí vlastních rozložení buněk.

Názorný postup

Vytvořte nové řešení ve Visual Studio pomocí nového Project... > Aplikace s jedním zobrazením (C#) a volat ji StoryboardTables.

Řešení se otevře s některými soubory jazyka C# a již vytvořeným souborem Main.storyboard . Poklikáním otevřete Main.storyboard soubor v iOS Designeru.

Úprava scénáře

Scénář se upraví ve třech krocích:

• Nejprve nastavte požadované kontrolery zobrazení a nastavte jejich vlastnosti.
• Za druhé vytvořte uživatelské rozhraní přetažením objektů do zobrazení.
• Nakonec do každého zobrazení přidejte požadovanou třídu UIKit a dejte různým ovládacím prvkům název, aby bylo možné na něj odkazovat v kódu.

Po dokončení scénáře můžete kód přidat, aby všechno fungovalo.

Rozložení kontrolerů zobrazení

První změna scénáře odstraní existující zobrazení podrobností a nahradí ho ovládacím panelem UITableViewController. Postupujte takto:

1. Vyberte panel v dolní části kontroleru zobrazení a odstraňte ho.

2. Přetáhněte navigační kontroler a kontroler zobrazení tabulky do scénáře ze sady nástrojů.

3. Vytvořtegue z kořenového kontroleru zobrazení do druhého kontroleru zobrazení tabulky, který byl právě přidán. Chcete-li vytvořit segue, Control+přetažení z buňky Detail do nově přidané UITableViewController. Zvolte možnost Zobrazit v části Výběr segue.

4. Vyberte nový segue, který jste vytvořili, a dejte mu identifikátor, který bude odkazovat na tento segue v kódu. Klikněte na segue a zadejte TaskSegueidentifikátor na panelu Vlastností, například takto:
   

5. Potom nakonfigurujte dvě zobrazení tabulky tak, že je vyberete a použijete panel Vlastností. Ujistěte se, že jste vybrali Možnost Zobrazit, a ne Kontroler zobrazení – k výběru můžete použít osnovu dokumentu.

6. Změňte řadič kořenového zobrazení tak, aby byl obsah: Dynamické prototypy (zobrazení na návrhovém povrchu bude označeno prototypem obsahu ):

   

7. Změňte nový UITableViewController na obsah: Statické buňky.

8. Nová vlastnost UITableViewController musí mít název třídy a sadu identifikátorů. Vyberte kontroler zobrazení a zadejte TaskDetailViewController pro třídu v Oblasti vlastností – tím se vytvoří nový TaskDetailViewController.cs soubor v oblasti řešení. Jako podrobnosti zadejte StoryboardID, jak je znázorněno v následujícím příkladu. Toto zobrazení se použije později k načtení tohoto zobrazení v kódu jazyka C#:

   

9. Návrhová plocha scénáře by teď měla vypadat takto (název navigační položky řadiče kořenového zobrazení byl změněn na "Chore Board"):

   

Vytvoření uživatelského rozhraní

Teď, když jsou zobrazení a segues nakonfigurované, je potřeba přidat prvky uživatelského rozhraní.

Řadič kořenového zobrazení

Nejprve vyberte prototypovou buňku v řadiči hlavního zobrazení a nastavte identifikátor jako buňku úkolu, jak je znázorněno níže. Použije se později v kódu k načtení instance tohoto UITableViewCell:

Dále budete muset vytvořit tlačítko, které přidá nové úkoly, jak je znázorněno níže:

Postupujte následovně:

• Přetáhněte položku tlačítka panelu z panelu nástrojů na pravou stranu navigačního panelu.
• Na panelu Vlastností vyberte v části Položka tlačítka pruhuidentifikátor: Přidat (aby se jedná o + tlačítko plus).
• Pojmenujte ho, aby ho bylo možné identifikovat v kódu v pozdější fázi. Všimněte si, že budete muset řadiči kořenového zobrazení dát název třídy (například ItemViewController), abyste mohli nastavit název položky tlačítka pruhu.

Kontroler zobrazení TaskDetail

Zobrazení podrobností vyžaduje mnohem více práce. Buňky zobrazení tabulky musí být přetaženy do zobrazení a poté naplněny popisky, textovými zobrazeními a tlačítky. Následující snímek obrazovky ukazuje dokončené uživatelské rozhraní se dvěma oddíly. Jeden oddíl obsahuje tři buňky, tři popisky, dvě textová pole a jeden přepínač, zatímco druhý oddíl má jednu buňku se dvěma tlačítky:

Postup sestavení kompletního rozložení:

Vyberte zobrazení tabulky a otevřete panel vlastností. Aktualizujte následující vlastnosti:

• Oddíly: 2
• Styl: Seskupené
• Oddělovač: Žádný
• Výběr: Bez výběru

Vyberte horní oddíl a v části Vlastnosti > zobrazení oddílu změňte řádky na 3, jak je znázorněno níže:

Pro každou buňku otevřete panel vlastností a nastavte:

• Styl: Vlastní
• Identifikátor: Zvolte jedinečný identifikátor pro každou buňku (např. "title", "notes", "done").
• Přetažením požadovaných ovládacích prvků vytvořte rozložení zobrazené na snímku obrazovky (umístěte UILabel, UITextField a UISwitch na správné buňky a nastavte popisky odpovídajícím způsobem, tj. Název, poznámky a hotovo).

V druhé části nastavte řádkyna 1 a uchopte dolní úchyt pro změnu velikosti buňky, aby byl vyšší.

• Nastavte identifikátor: na jedinečnou hodnotu (např. "save").

• Nastavit pozadí: Vymazat barvu .

• Přetáhněte dvě tlačítka na buňku a nastavte jejich názvy odpovídajícím způsobem (tj. Uložit a odstranit), jak je znázorněno níže:

  

V tomto okamžiku můžete také chtít nastavit omezení buněk a ovládacích prvků, abyste zajistili adaptivní rozložení.

Přidání ovládacích prvků uiKit – třída a pojmenování

Při vytváření scénáře existuje několik posledních kroků. Nejprve musíme každému z našich ovládacích prvků dát název v části Název identity>, aby je bylo možné později použít v kódu. Pojmenujte je takto:

• Název UITextField : TitleText
• Notes UITextField : NotesText
• UISwitch : DoneSwitch
• Odstranit UIButton : DeleteButton
• Uložit UIButton : SaveButton

Přidání kódu

Zbývající část práce se provede v Visual Studio na Macu nebo Windows s C#. Všimněte si, že názvy vlastností použité v kódu odrážejí ty, které jsou nastavené v návodu výše.

Nejprve chceme vytvořit Chores třídu, která poskytne způsob, jak získat a nastavit hodnotu ID, Název, Poznámky a Hotovou logickou hodnotu, abychom mohli tyto hodnoty používat v celé aplikaci.

Do třídy Chores přidejte následující kód:

public class Chores {
    public int Id { get; set; }
    public string Name { get; set; }
    public string Notes { get; set; }
    public bool Done { get; set; }
  }

Dále vytvořte RootTableSource třídu, která dědí z UITableViewSource.

Rozdíl mezi tímto zobrazením a zobrazením tabulky bez scénáře spočívá v tom, že GetView metoda nemusí vytvářet instance žádných buněk – theDequeueReusableCell metoda vždy vrátí instanci prototypové buňky (s odpovídajícím identifikátorem).

Následující kód je ze RootTableSource.cs souboru:

public class RootTableSource : UITableViewSource
{
// there is NO database or storage of Tasks in this example, just an in-memory List<>
Chores[] tableItems;
string cellIdentifier = "taskcell"; // set in the Storyboard

    public RootTableSource(Chores[] items)
    {
        tableItems = items;
    }

public override nint RowsInSection(UITableView tableview, nint section)
{
  return tableItems.Length;
}

public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
{
  // in a Storyboard, Dequeue will ALWAYS return a cell, 
  var cell = tableView.DequeueReusableCell(cellIdentifier);
  // now set the properties as normal
  cell.TextLabel.Text = tableItems[indexPath.Row].Name;
  if (tableItems[indexPath.Row].Done)
    cell.Accessory = UITableViewCellAccessory.Checkmark;
  else
    cell.Accessory = UITableViewCellAccessory.None;
  return cell;
}
public Chores GetItem(int id)
{
  return tableItems[id];
}

Chcete-li použít RootTableSource třídu, vytvořte novou kolekci v konstruktoru ItemViewController':

chores = new List<Chore> {
      new Chore {Name="Groceries", Notes="Buy bread, cheese, apples", Done=false},
      new Chore {Name="Devices", Notes="Buy Nexus, Galaxy, Droid", Done=false}
    };

Předání ViewWillAppear kolekce do zdroje a přiřazení k zobrazení tabulky:

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

    TableView.Source = new RootTableSource(chores.ToArray());
}

Pokud aplikaci spustíte teď, hlavní obrazovka se teď načte a zobrazí seznam dvou úloh. Když se úkol dotkne segue definované scénářem, zobrazí se obrazovka podrobností, ale v tuto chvíli se nezobrazí žádná data.

Pokud chcete parametr odeslat v segue, přepište PrepareForSegue metodu a nastavte vlastnosti na objektu DestinationViewController ( TaskDetailViewController v tomto příkladu). Cílová třída kontroleru zobrazení se vytvoří instance, ale ještě není zobrazena uživateli – to znamená, že můžete nastavit vlastnosti třídy, ale ne upravovat žádné ovládací prvky uživatelského rozhraní:

public override void PrepareForSegue (UIStoryboardSegue segue, NSObject sender)
    {
      if (segue.Identifier == "TaskSegue") { // set in Storyboard
        var navctlr = segue.DestinationViewController as TaskDetailViewController;
        if (navctlr != null) {
          var source = TableView.Source as RootTableSource;
          var rowPath = TableView.IndexPathForSelectedRow;
          var item = source.GetItem(rowPath.Row);
          navctlr.SetTask (this, item); // to be defined on the TaskDetailViewController
        }
      }
    }

SetTask V TaskDetailViewController metodě přiřadí své parametry vlastnostem, aby je bylo možné odkazovat v ViewWillAppear. Vlastnosti ovládacího prvku nelze změnit, SetTask protože nemusí existovat, pokud PrepareForSegue je volána:

Chore currentTask {get;set;}
    public ItemViewController Delegate {get;set;} // will be used to Save, Delete later

public override void ViewWillAppear (bool animated)
    {
      base.ViewWillAppear (animated);
      TitleText.Text = currentTask.Name;
      NotesText.Text = currentTask.Notes;
      DoneSwitch.On = currentTask.Done;
    }

    // this will be called before the view is displayed
    public void SetTask (ItemViewController d, Chore task) {
      Delegate = d;
      currentTask = task;
    }

Segue teď otevře obrazovku podrobností a zobrazí vybrané informace o úkolu. Pro tlačítka Uložit a odstranit bohužel neexistuje žádná implementace. Před implementací tlačítek přidejte tyto metody do ItemViewController.cs a aktualizujte podkladová data a zavřete obrazovku podrobností:

public void SaveTask(Chores chore)
{
  var oldTask = chores.Find(t => t.Id == chore.Id);
        NavigationController.PopViewController(true);
}

public void DeleteTask(Chores chore)
{
  var oldTask = chores.Find(t => t.Id == chore.Id);
  chores.Remove(oldTask);
        NavigationController.PopViewController(true);
}

Dále budete muset přidat obslužnou rutinu události tlačítka TouchUpInside do ViewDidLoad metody TaskDetailViewController.cs. Odkaz Delegate na ItemViewController vlastnost byl vytvořen speciálně tak, abychom mohli volat SaveTask a DeleteTask, které zavřít toto zobrazení jako součást jejich operace:

SaveButton.TouchUpInside += (sender, e) => {
        currentTask.Name = TitleText.Text;
        currentTask.Notes = NotesText.Text;
        currentTask.Done = DoneSwitch.On;
        Delegate.SaveTask(currentTask);
      };

DeleteButton.TouchUpInside += (sender, e) => Delegate.DeleteTask(currentTask);

Poslední zbývající část funkce, která se má sestavit, je vytváření nových úkolů. V ItemViewController.cs přidejte metodu, která vytvoří nové úlohy a otevře zobrazení podrobností. Pokud chcete vytvořit instanci zobrazení z scénáře, použijte InstantiateViewController metodu pro Identifier toto zobrazení – v tomto příkladu bude "detail":

public void CreateTask () 
    {
      // first, add the task to the underlying data
      var newId = chores[chores.Count - 1].Id + 1;
      var newChore = new Chore{Id = newId};
      chores.Add (newChore);

      // then open the detail view to edit it
      var detail = Storyboard.InstantiateViewController("detail") as TaskDetailViewController;
      detail.SetTask (this, newChore);
      NavigationController.PushViewController (detail, true);
    }

Nakonec v navigačním panelu v metodě ItemViewController.csViewDidLoad zavolejte tlačítko:

AddButton.Clicked += (sender, e) => CreateTask ();

Tím se dokončí příklad Scénáře – dokončená aplikace vypadá takto:

Příklad ukazuje:

• Vytvoření tabulky s prototypovým obsahem, kde jsou buňky definované pro opakované použití k zobrazení seznamů dat.
• Vytvoření tabulky se statickým obsahem pro vytvoření vstupního formuláře To zahrnuje změnu stylu tabulky a přidání oddílů, buněk a ovládacích prvků uživatelského rozhraní.
• Jak vytvořit segue a přepsat metodu PrepareForSegue upozorňovat cílové zobrazení všech parametrů, které vyžaduje.
• Načítá se zobrazení scénáře přímo pomocí Storyboard.InstantiateViewController metody.

Související odkazy

• StoryboardTable (ukázka)
• Úvod do scénářů