Automatická změna velikosti výšky řádku v Xamarin.iOS

  • Článek
  • 2 min ke čtení

Upozornění

Návrhář pro iOS byl v Visual Studio 2019 verze 16.8 a Visual Studio 2019 pro Mac verze 8.8 zastaralý a odebrán v Visual Studio 2019 verze 16.9 a Visual Studio pro Mac verze 8.9. Doporučený způsob vytváření uživatelských rozhraní pro iOS je přímo na Macu, na kterém běží Tvůrce rozhraní Xcode. Další informace najdete v tématu Návrh uživatelských rozhraní pomocí Xcode.

Od iOS 8 přidal Apple možnost vytvořit zobrazení tabulky (UITableView), které může automaticky zvětšit a zmenšit výšku daného řádku na základě velikosti obsahu pomocí automatického rozložení, tříd velikostí a omezení.

iOS 11 přidal možnost automatického rozbalení řádků. Záhlaví, zápatí a buňky teď můžou mít na základě jejich obsahu automaticky velikost. Pokud je ale tabulka vytvořená v iOS Designeru, Tvůrci rozhraní nebo pokud má pevnou výšku řádků, musíte ručně povolit buňky s vlastní velikostí, jak je popsáno v této příručce.

Rozložení buňky v iOS Designeru

Otevřete scénář pro zobrazení tabulky, pro které chcete mít automatickou velikost řádku v iOS Designeru, vyberte prototyp buňky a navrhujte rozložení buňky. Příklad:

The Cell's Prototype design

Pro každý prvek v prototypu přidejte omezení, která zachovávají prvky ve správném umístění, protože zobrazení tabulky se změní na otočení nebo různé velikosti obrazovky zařízení s iOSem. Například připnutí Title k horní, levé a pravé části zobrazení obsahu buňky:

Pinning the Title to the top, left and right of the Cells Content View

V případě naší ukázkové tabulky je malé Label (pod Title) pole, které může zmenšit a zvětšit, aby se zvětšila nebo zmenšila výška řádku. Chcete-li dosáhnout tohoto efektu, přidejte následující omezení pro připnutí levé, pravé, horní a dolní části popisku:

These constraints to pin the left, right, top and bottom of the label

Teď, když jsme plně omezili prvky v buňce, musíme objasnit, který prvek by se měl roztáhnout. Chcete-li to provést, nastavte prioritu řazení obsahu a prioritukomprese obsahu podle potřeby v části Rozložení na panelu Vlastností:

The Layout section of the Properties Pad

Nastavte prvek, který chcete rozbalit, aby měl nižší hodnotu Priorita huggingu a nižší hodnotu Priority komprese.

Dále musíme vybrat prototyp buňky a dát mu jedinečný identifikátor:

Giving the Cell Prototype a unique Identifier

V případě našeho příkladu . GrowCell Tuto hodnotu použijeme později při naplnění tabulky.

Důležité

Pokud tabulka obsahuje více než jeden typ buňky (Prototyp), musíte zajistit, aby každý typ obsahoval vlastní jedinečný typ Identifier pro automatické změny velikosti řádků.

Pro každý prvek prototypu buňky přiřaďte název , který ho zpřístupní kódu jazyka C#. Příklad:

Assign a Name to expose it to C# code

Dále přidejte vlastní třídu pro UITableViewController, UITableView a UITableCell (prototyp). Příklad:

Adding a custom class for the UITableViewController, the UITableView and the UITableCell

Nakonec se ujistěte, že se v popisku zobrazí veškerý očekávaný obsah, nastavte vlastnost Řádky na 0:

The Lines property set to 0

S definovaným uživatelským rozhraním přidáme kód, který povolí změnu velikosti automatické výšky řádku.

Povolení automatické změny velikosti výšky

V zdroji dat () nebo zdroji tabulky () nebo ve zdroji (UITableViewDatasourceUITableViewSource) musíme použít Identifier buňku, kterou jsme definovali v návrháři. Příklad:

public string CellID {
    get { return "GrowCell"; }
}
...

public override UITableViewCell GetCell (UITableView tableView, Foundation.NSIndexPath indexPath)
{
    var cell = tableView.DequeueReusableCell (CellID, indexPath) as GrowRowTableCell;
    var item = Items [indexPath.Row];

    // Setup
    cell.Image = UIImage.FromFile(item.ImageName);
    cell.Title = item.Title;
    cell.Description = item.Description;

    return cell;
}

Ve výchozím nastavení bude zobrazení tabulky nastaveno pro automatickou změnu velikosti výšky řádku. Aby bylo zajištěno, RowHeight měla by být vlastnost nastavena na UITableView.AutomaticDimension. Musíme také nastavit EstimatedRowHeight vlastnost v naší UITableViewController. Příklad:

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

    // Initialize table
    TableView.DataSource = new GrowRowTableDataSource(this);
    TableView.Delegate = new GrowRowTableDelegate (this);
    TableView.RowHeight = UITableView.AutomaticDimension;
    TableView.EstimatedRowHeight = 40f;
    TableView.ReloadData ();
}

Tento odhad nemusí být přesný, pouze hrubý odhad průměrné výšky každého řádku v zobrazení tabulky.

Když se spustí tento kód, každý řádek se zmenší a zvětší na základě výšky posledního popisku v prototypu buňky. Příklad:

A sample table run