Práce s tabulkami v iOS Designeru

Scénáře jsou WYSIWYG způsob, jak vytvářet aplikace pro iOS a jsou podporované uvnitř Visual Studio mac 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 si můžete vybrat ze dvou typů obsahu buněk: dynamický nebo statický prototyp obsahu.

Dynamický prototyp obsahu

Objekt s obsahem prototypu je obvykle určen k zobrazení seznamu dat, kde se prototyp buňky (nebo buňky, jak můžete definovat více než jeden) znovu používá pro každou položku v UITableView seznamu. Buňky není nutné vytvořit instanci, získávají se v metodě voláním GetViewDequeueReusableCell metody . UITableViewSource

Statický obsah

UITableViewObjekty se 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í Storyboard-Driven aplikace

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

Příklady obrazovek

Uživatelské rozhraní bude vytvořeno pomocí scénáře a obě obrazovky budou používat UITableView. Hlavní obrazovka používá k rozložení řádku prototypový obsah 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í v Visual Studio (Vytvořit) Nový Project... Aplikaci s jedním zobrazením (C#)a nazývat ji StoryboardTables.

Dialogové okno Vytvořit nový projekt

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

Úprava scénáře

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

  • Nejprve nastavte rozložení požadovaných kontrolerů 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 na ně bylo možné odkazovat v kódu.

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

Rozložení kontrolerů zobrazení

První změnou scénáře je odstranění existujícího zobrazení podrobností a jeho nahrazení za UITableViewController. Postupujte takto:

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

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

  3. Z kořenového kontroleru zobrazení vytvořte segázi do druhého kontroleru zobrazení tabulky, který jste právě přidali. Pokud chcete vytvořit virtuální zařízení, přetáhněte control+drag z buňky Detail na nově přidaný UITableViewController. V části Se do výběru zvolte Možnost Zobrazit.

  4. Vyberte nové segové, které jste vytvořili, a dejte mu identifikátor, který bude odkazovat na tuto segázi v kódu. Klikněte na se do pole identifikátoru a do pole TaskSegueOblast vlastnostízadejte , například: TaskSegue
    Pojmenování na panelu vlastností

  5. Dále nakonfigurujte dvě zobrazení tabulky tak, že je vyberete a pomocí Oblast vlastností. Nezapomeňte vybrat Zobrazení a ne Zobrazit kontroler – s výběrem můžete pomoct pomocí osnovy dokumentu.

  6. Změňte kontroler kořenového zobrazení na Content: Dynamic Prototypes (Zobrazení na webu Návrhová plocha bude označené Prototype Content (Obsah prototypu):

    Nastavení vlastnosti Content na dynamické prototypy

  7. Změňte nový UITableViewController naContent: Static Cells.

  8. Nový UITableViewController musí mít nastavený název třídy a identifikátor. Vyberte kontroler zobrazení a do pole Třída zadejte TaskDetailViewControllerOblast vlastností – tím se v souboru Oblast řešení. Jako podrobnosti zadejte StoryboardID,jakje znázorněno v následujícím příkladu. Toto zobrazení použijete později k načtení tohoto zobrazení v kódu C#:

    Nastavení ID scénáře

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

    Návrhová plocha

Vytvoření uživatelského rozhraní

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

Kořenový kontroler zobrazení

Nejprve vyberte buňku prototypu v kontroleru hlavního zobrazení a nastavte identifikátor jako taskcell, jak je znázorněno níže. Ten se později použije v kódu k načtení instance této buňky UITableViewCell:

nastavení identifikátoru buňky

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

Položka tlačítka s pruhem na navigačním panelu

Postupujte následovně:

  • Přetáhněte položku pruhového tlačítka z panelu nástrojů na pravou stranu navigačního panelu.
  • Na panelu Oblast vlastnostív části Položka pruhového tlačítka vyberte Identifikátor: Přidat (aby se z něj tlačítko plus.
  • Pojmechte ho, aby ho bylo možné identifikovat v kódu v pozdější fázi. Všimněte si, že kořenovému kontroleru zobrazení budete muset dát název třídy (například ItemViewController),aby bylo možné nastavit název položky tlačítka Pruh.

Kontroler zobrazení TaskDetail

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

rozložení zobrazení podrobností

Postup vytvoření úplného rozložení je následující:

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

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

Vyberte horní část a v části Zobrazení tabulky vlastnosti změňte Řádky na 3,jak je znázorněno níže:

Nastavení horní části na tři řádky

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

  • Styl:Vlastní
  • Identifikátor:Zvolte jedinečný identifikátor každé buňky (např. "title", "notes", "done").
  • Přetáhněte požadované ovládací prvky, aby se na snímku obrazovky vytvářely rozložení (na správné buňky umístěte UILabel, UITextField a UISwitch a nastavte popisky odpovídajícím způsobem. Title (Název), Notes (Poznámky) a Done (Hotovo).

V druhé části nastavte Řádky na 1 a uchopte dolní úchyt pro změnu velikosti buňky, aby byla vyšší.

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

  • Nastavte pozadí:Vymazat barvu .

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

    Nastavení dvou tlačítek v dolní části

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

Přidání třídy UIKit a ovládacích prvků pojmenování

Při vytváření scénáře je 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. Pojmete je takto:

  • Title UITextField:TitleText
  • Poznámky UITextField:NotesText
  • UISwitch:DoneSwitch
  • Delete UIButton : DeleteButton
  • Uložit UIButton:SaveButton

Přidání kódu

Zbývající část práce se bude dělat v jazyce Visual Studio Mac nebo Windows pomocí jazyka 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 třídu, která bude poskytovat způsob, jak získat a nastavit hodnotu ID, Name, Notes a Done Boolean, abychom mohli tyto hodnoty používat v Chores celé aplikaci.

Do Chores třídy 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 mimo Storyboard spočívá v tom, že metoda nemusí vytvořit instanci žádné buňky – metoda vždy vrátí instanci prototypové buňky (s odpovídajícím GetViewtheDequeueReusableCell identifikátorem).

Následující kód pochází 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];
}

Pokud chcete RootTableSource použít třídu , vytvořte novou kolekci v ItemViewController konstruktoru ' :

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ředejte ViewWillAppear kolekci zdroji a přiřaďte ji k zobrazení tabulky:

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

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

Pokud teď aplikaci spustíte, hlavní obrazovka se teď načte a zobrazí seznam dvou úloh. Když se úkolu dotýkáte segů definovaných scénářem, zobrazí se obrazovka podrobností, ale v tuto chvíli se nezobrazí žádná data.

Pokud chcete "odeslat parametr" v segéně, přepište metodu a nastavte vlastnosti pro PrepareForSegueDestinationViewControllerTaskDetailViewController (v tomto příkladu). Vytvoří se instance třídy Kontroleru cílového zobrazení, ale zatím se uživateli nezobrazí – to znamená, že můžete nastavit vlastnosti třídy, ale nemůžete 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
        }
      }
    }

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

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

Teď se otevře obrazovka s podrobnostmi a zobrazí informace o vybraném úkolu. Tlačítka Uložit a Odstranit bohužel neexistuje. Před implementací tlačítek přidejte do souboru ItemViewController.cs tyto metody, kterými aktualizujete 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 do metody TouchUpInsideViewDidLoad souboru TouchUpInside. Odkaz na vlastnost byl vytvořen speciálně, abychom mohli volat a , které toto zobrazení zavře DelegateItemViewController v rámci jejich SaveTaskDeleteTask 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í funkcí, která se má sestavit, je vytvoření nových úloh. V souboru ItemViewController.cs přidejte metodu, která vytvoří nové úlohy a otevře zobrazení podrobností. Pokud chcete vytvořit instanci zobrazení ze scénáře, použijte metodu s pro toto zobrazení – v tomto příkladu bude InstantiateViewControllerIdentifier "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 tlačítko v navigačním panelu v metodě souboru ItemViewController.csnastavte tak, aby ho volalo:

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

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

Dokončená aplikace

Příklad ukazuje:

  • Vytvoření tabulky s prototypem obsahu, kde jsou buňky definovány pro opětovné použití k zobrazení seznamů dat.
  • Vytvoření tabulky se statickým obsahem pro sestavení vstupního formuláře To zahrnovalo změnu stylu tabulky a přidání oddílů, buněk a ovládacích prvků uživatelského rozhraní.
  • Jak vytvořit segu a přepsat metodu , abyste cílovému zobrazení oznámili PrepareForSegue všechny parametry, které vyžaduje.
  • Načítání zobrazení scénáře přímo pomocí Storyboard.InstantiateViewController metody .