Xamarin.Forms TableView

Článek
12/02/2021
5 min ke čtení

TableView je zobrazení pro zobrazování rolovacích seznamů dat nebo možností, kde jsou řádky, které nesdílejí stejnou šablonu. Na rozdíl od ovládacího prvku ListViewnemá koncept prvku ItemsSource , takže položky je nutné přidat ručně jako podřízené.

Příklad TableView

Případy použití

TableView je užitečné v těchto případech:

prezentace seznamu nastavení
shromažďování dat ve formuláři nebo
zobrazení dat, která jsou prezentována jinak než na řádku (například čísla, procenta a obrázky).

TableView zpracovává rolování a rozložení řádků v atraktivních částech, což je běžné nutné pro výše uvedené scénáře. TableViewOvládací prvek používá v případě, že je k dispozici základní zobrazení pro jednotlivé platformy a vytváří pro každou platformu nativní vzhled.

Struktura

Prvky v TableView jsou uspořádány do oddílů. V kořenu TableView je TableRoot , který je nadřazený jedné nebo více TableSection instancím. Každá TableSection se skládá z nadpisu a jedné nebo více ViewCell instancí:

<TableView Intent="Settings">
    <TableRoot>
        <TableSection Title="Ring">
            <SwitchCell Text="New Voice Mail" />
            <SwitchCell Text="New Mail" On="true" />
        </TableSection>
    </TableRoot>
</TableView>

Ekvivalentní kód jazyka C#:

Content = new TableView
{
    Root = new TableRoot
    {
        new TableSection("Ring")
        {
          // TableSection constructor takes title as an optional parameter
          new SwitchCell { Text = "New Voice Mail" },
          new SwitchCell { Text = "New Mail", On = true }
        }
    },
    Intent = TableIntent.Settings
};

Příznaky

TableViewzpřístupňuje Xamarin_Forms TableView _TableView_Intent "data-LINKTYPE =" absolutní cesta ">Intent vlastnost, která může být nastavena na libovolný TableIntent člen výčtu:

Data – pro použití při zobrazování datových položek. Všimněte si, že ovládací prvek ListView může být lepší volbou pro posouvání seznamů dat.
Form – pro použití v případě, že TableView funguje jako formulář.
Menu – pro použití při prezentování nabídky výběru.
Settings – pro použití při zobrazení seznamu nastavení konfigurace.

TableIntentHodnota, kterou zvolíte, může mít vliv na to, jak TableView se bude zobrazovat na jednotlivých platformách. I v případě, že nejsou jasné rozdíly, je osvědčeným postupem vybrat TableIntent , který nejlépe odpovídá způsobu použití tabulky.

Kromě toho může být barva textu zobrazeného pro každý z nich TableSection změněna nastavením TextColor vlastnosti na Color .

Předdefinované buňky

Xamarin.Forms obsahuje předdefinované buňky pro shromažďování a zobrazování informací. I když ListView a TableView můžou používat všechny stejné buňky SwitchCell a EntryCell jsou pro TableView scénář nejrelevantnější.

Podrobný popis TextCell a ImageCellnajdete v tématu vzhled buňky ListView .

SwitchCell

SwitchCellje ovládací prvek, který se má použít k prezentaci a zachytávání stavu/vypnutí nebo true/false . Definuje následující vlastnosti:

Text – text, který se má zobrazit vedle přepínače
On – bez ohledu na to, zda se přepínač zobrazuje jako zapnuto nebo vypnuto.
OnColor – Color přepínač, když je na pozici.

Všechny tyto vlastnosti jsou svázány.

SwitchCell také zpřístupňuje OnChanged událost, která umožňuje reagovat na změny stavu buňky.

Příklad SwitchCell

EntryCell

EntryCell je užitečné v případě, že potřebujete zobrazit textová data, která může uživatel upravovat. Definuje následující vlastnosti:

Keyboard – Klávesnice, která se má zobrazit při úpravách K dispozici jsou možnosti pro věci, jako jsou číselné hodnoty, e-mail, telefonní čísla atd. Další informace najdete v dokumentaci k rozhraní API.
Label – Text popisku, který se zobrazí vlevo od pole textové zadání.
LabelColor – Barva textu popisku
Placeholder – Text, který se má zobrazit v poli pro zadání, pokud má hodnotu null nebo je prázdný. Tento text zmizí při zahájení zadávání textu.
Text – Text v poli pro zadání
HorizontalTextAlignment – Vodorovné zarovnání textu Hodnoty jsou zarovnané na střed, vlevo nebo vpravo. Podívejte se na dokumentaci k rozhraní API.
VerticalTextAlignment – Svislé zarovnání textu Hodnoty jsou Start , Center nebo End .

EntryCell také zpřístupňuje Completed událost, která je vyvolána, když uživatel při úpravě textu narazí na tlačítko Hotovo na klávesnici.

Příklad EntryCell

Vlastní buňky

Pokud nejsou předdefinované buňky dostatečné, můžou se vlastní buňky používat k prezentování a zachycení dat způsobem, který dává smysl pro vaši aplikaci. Například můžete chtít zobrazit posuvník, který uživateli umožní zvolit neprůhlednost obrázku.

Všechny vlastní buňky musí být odvozeny ze ViewCell stejné základní třídy, kterou používají všechny předdefinované typy buněk.

Toto je příklad vlastní buňky:

Příklad vlastní buňky

Následující příklad ukazuje kód XAML použitý k vytvoření na TableView snímcích obrazovky výše:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DemoTableView.TablePage"
             Title="TableView">
      <TableView Intent="Settings">
          <TableRoot>
              <TableSection Title="Getting Started">
                  <ViewCell>
                      <StackLayout Orientation="Horizontal">
                          <Image Source="bulb.png" />
                          <Label Text="left"
                                 TextColor="#f35e20" />
                          <Label Text="right"
                                 HorizontalOptions="EndAndExpand"
                                 TextColor="#503026" />
                      </StackLayout>
                  </ViewCell>
              </TableSection>
          </TableRoot>
      </TableView>
</ContentPage>

Ekvivalentní kód jazyka C#:

var table = new TableView();
table.Intent = TableIntent.Settings;
var layout = new StackLayout() { Orientation = StackOrientation.Horizontal };
layout.Children.Add (new Image() { Source = "bulb.png"});
layout.Children.Add (new Label()
{
    Text = "left",
    TextColor = Color.FromHex("#f35e20"),
    VerticalOptions = LayoutOptions.Center
});
layout.Children.Add (new Label ()
{
    Text = "right",
    TextColor = Color.FromHex ("#503026"),
    VerticalOptions = LayoutOptions.Center,
    HorizontalOptions = LayoutOptions.EndAndExpand
});
table.Root = new TableRoot ()
{
    new TableSection("Getting Started")
    {
        new ViewCell() {View = layout}
    }
};
Content = table;

Kořenový element v rámci TableView je TableRoot a je TableSection bezprostředně pod TableRoot . ViewCellJe definována přímo pod TableSection , a StackLayout slouží ke správě rozložení vlastní buňky, i když zde lze použít libovolné rozložení.

Poznámka

Na rozdíl od, nevyžaduje, ListViewTableView aby vlastní (nebo žádné) buňky byly definovány v ItemTemplate .

Výška řádku

TableViewTřída má dvě vlastnosti, které lze použít ke změně výšky řádku buněk:

Xamarin_Forms _TableView_RowHeight "data-LINKTYPE =" absolutní cesta ">RowHeight – Nastaví výšku každého řádku na int .
Xamarin_Forms _TableView_HasUnevenRows "data-LINKTYPE =" absolutní cestu ">HasUnevenRows – řádky mají různou výšku, pokud je nastavena na true . Všimněte si, že při nastavení této vlastnosti na hodnotu true budou výšky řádků automaticky vypočítávány a aplikovány Xamarin.Forms .

když se výška obsahu v buňce TableView změní, výška řádku se implicitně aktualizuje na androidu a Univerzální platforma Windows (UWP). V iOS ale musí být Vynucená aktualizace nastavením Xamarin_Forms vlastnosti _TableView_HasUnevenRows data-LINKTYPE = "absolutní cesta" >HasUnevenRowstrue a Xamarin_Forms voláním HasUnevenRows _Cell_ForceUpdateSize metody data-LINKTYPE = "absolutní cesta" Cell.ForceUpdateSize .

Následující příklad XAML ukazuje TableView , který obsahuje ViewCell :

<ContentPage ...>
    <TableView ...
               HasUnevenRows="true">
        <TableRoot>
            ...
            <TableSection ...>
                ...
                <ViewCell x:Name="_viewCell"
                          Tapped="OnViewCellTapped">
                    <Grid Margin="15,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Label Text="Tap this cell." />
                        <Label x:Name="_target"
                               Grid.Row="1"
                               Text="The cell has changed size."
                               IsVisible="false" />
                    </Grid>
                </ViewCell>
            </TableSection>
        </TableRoot>
    </TableView>
</ContentPage>

Při ViewCell klepnutí na tlačítko se OnViewCellTapped spustí obslužná rutina události:

void OnViewCellTapped(object sender, EventArgs e)
{
    _target.IsVisible = !_target.IsVisible;
    _viewCell.ForceUpdateSize();
}

OnViewCellTappedObslužná rutina události zobrazuje nebo skrývá sekundu Label v a ViewCell explicitně aktualizuje velikost buňky voláním OnViewCellTapped metody Xamarin_Forms _Cell_ForceUpdateSize "data-LINKTYPE =" absolutní cesta ">Cell.ForceUpdateSize .

Na následujících snímcích obrazovky se zobrazuje buňka před klepnutím na:

ViewCell před změnou velikosti

Na následujících snímcích obrazovky se po klepnutí na tuto buňku zobrazuje:

ViewCell po změně velikosti

Důležité

Pokud se tato funkce přestanou používat, existuje silná možnost snížení výkonu.

TableView (ukázka)