Xamarin.Forms TableView

Makale
12/02/2021
Okumak için 4 dakika

TableView , aynı şablonu paylaşılamayan satırların olduğu, verilerin veya seçimlerin kaydırılabilir listesini görüntülemek için bir görünüm. ListView'un aksine, bir kavramı yoktur ItemsSource , bu nedenle öğelerin el ile alt öğe olarak eklenmesi gerekir.

TableView örneği

Uygulama alanları

TableView Şu durumlarda yararlı olur:

ayarların bir listesini sunma,
verileri bir biçimde toplama veya
satırdan satıra (örn. sayılar, yüzdeler ve görüntüler) farklı şekilde sunulan verileri gösterme.

TableView Yukarıdaki senaryolar için yaygın bir gereksinim olan etkileyici bölümlerde satırları kaydırmayı ve düzenlemeyi işler. TableViewDenetim, kullanılabilir olduğunda her platformun temel alınan eşdeğer görünümünü kullanır, her platform için yerel bir görünüm oluşturun.

Yapı

İçindeki öğeler TableView bölümler halinde düzenlenir. Öğesinin kökünde, TableViewTableRoot bir veya daha fazla örnek için üst öğesidir TableSection . Her biri TableSection bir başlık ve bir veya daha fazla ViewCell örnek oluşur:

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

Eşdeğer C# kodu:

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

Görünüm

TableViewTableView "Data-LinkType =" Absolute-path ">özelliğini _TableView_Intent Xamarin_Forms gösterir Intent , bu, numaralandırma üyelerinden herhangi birine ayarlanabilir TableIntent :

Data – veri girişleri görüntülenirken kullanım için. ListView 'un veri listelerine yönelik daha iyi bir seçenek olabileceğini unutmayın.
Form – TableView bir form olarak davrandığında kullanım için.
Menu – bir seçimler menüsü sunarken kullanım için.
Settings – yapılandırma ayarları listesi görüntülenirken kullanım için.

TableIntentSeçtiğiniz değer TableView her platformda nasıl göründüğünü etkileyebilir. Açık farklar olmasa bile, TableIntent tabloyu nasıl kullanacağınızı en yakından karşılayan bir en iyi uygulamadır.

Ayrıca, her biri için görüntülenecek metnin rengi, özelliği olarak TableSection ayarlanarak değiştirilebilir TextColorColor .

Yerleşik hücreler

Xamarin.Forms bilgi toplamak ve görüntülemek için yerleşik hücrelerle birlikte gelir. ListViewAynı ve TableView tüm aynı hücreleri kullanabilir, ancak SwitchCellEntryCell bir senaryo için en alakalı bir TableView senaryodur.

Textcell ve ImageCellhakkında ayrıntılı bir açıklama Için bkz. ListView hücre görünümü .

SwitchCell

SwitchCell, bir açık/kapalı veya durum sunmak ve yakalamak için kullanılan denetimdir true/false . Bu dosya şu özellikleri tanımlar:

Text – anahtarın yanında görüntülenecek metin.
On – anahtarın açık veya kapalı olarak görüntülenip görüntülenmediğini belirtir.
OnColor – Color anahtar yerinde olduğunda anahtarın.

Bu özelliklerin tümü bağlanabilir.

SwitchCell Ayrıca, bu olayı gösterir ve bu da, OnChanged hücrenin durumundaki değişikliklere yanıt vermenize olanak tanır.

SwitchCell örneği

EntryCell

EntryCell kullanıcının düzenleyebilmesi için metin verileri görüntülemesi gerektiğinde faydalıdır. Bu dosya şu özellikleri tanımlar:

Keyboard – Düzenlenirken görüntülenecek klavye. Sayısal değerler, e-posta, telefon numarası vb. gibi şeyler için seçenekler vardır. API belgelerine bakın.
Label – Metin girişi alanının solunda görüntülenecek etiket metni.
LabelColor – Etiket metninin rengi.
Placeholder – Null veya boş olduğunda giriş alanında görüntülenecek metin. Metin girişi başladığında bu metin kaybolur.
Text – Giriş alanındaki metin.
HorizontalTextAlignment – Metnin yatay hizalaması. Değerler orta, sol veya sağa hizalanır. Bkz. API belgeleri.
VerticalTextAlignment – Metnin dikey hizalaması. Değerleri Start , Center , veya End .

EntryCell Ayrıca Completed , Kullanıcı metin düzenlenirken klavyede ' bitti ' düğmesine rastlarken tetiklenen olayını da kullanıma sunar.

EntryCell örneği

Özel hücreler

Yerleşik hücreler yeterli olmadığında, verileri uygulamanız için anlamlı hale getiren şekilde sunmak ve yakalamak için özel hücreler kullanılabilir. Örneğin, bir kullanıcının bir görüntünün opaklığını seçmesini sağlamak için bir kaydırıcı sunmak isteyebilirsiniz.

Tüm özel hücreler ViewCell , yerleşik hücre türlerinin hepsi tarafından kullanılan aynı temel sınıftan türemelidir.

Bu bir özel hücre örneğidir:

Özel hücre örneği

Aşağıdaki örnek, yukarıdaki ekran görüntülerinde oluşturmak için kullanılan XAML 'yi göstermektedir TableView :

<?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>

Eşdeğer C# kodu:

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;

Öğesinin altındaki kök öğesi, TableViewTableRoot ve TableSection hemen altında bir TableRoot . , ViewCell Doğrudan altında tanımlanır ve bu, TableSectionStackLayout özel hücrenin yerleşimini yönetmek için kullanılır, ancak burada herhangi bir düzen kullanılabilir.

Not

Aksine ListView , TableView özel (veya any) hücrelerin bir içinde tanımlanmasını gerektirmez ItemTemplate .

Satır yüksekliği

TableViewSınıfı, hücrelerin satır yüksekliğini değiştirmek için kullanılabilecek iki özelliğe sahiptir:

Xamarin_Forms _TableView_RowHeight "Data-LinkType =" Absolute-path ">RowHeight – her bir satırın yüksekliğini bir olarak ayarlar int .
Xamarin_Forms _TableView_HasUnevenRows "Data-LinkType =" Absolute-path ">HasUnevenRows – satırlar olarak ayarlandıysa farklı yükseklikleri vardır true . Bu özelliği olarak ayarlarken true , satır yüksekliklerini tarafından otomatik olarak hesaplanıp uygulanacağını unutmayın Xamarin.Forms .

içindeki bir hücredeki içeriğin yüksekliği TableView değiştirildiğinde, satır yüksekliği Android ve Evrensel Windows Platformu (UWP) üzerinde örtülü olarak güncelleştirilir. Bununla birlikte, iOS üzerinde "Data-LinkType =" Absolute-path ">özelliği _TableView_HasUnevenRows ' Xamarin_Forms ayarlanarak HasUnevenRowstrue ve Xamarin_Forms HasUnevenRows _Cell_ForceUpdateSize" Data-linktype = "Absolute-path" >Cell.ForceUpdateSize yöntemi çağırarak güncelleştirme zorlaması gerekir.

Aşağıdaki XAML örneğinde şunu içeren bir gösterilmektedir TableViewViewCell :

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

ViewCellDokunulduğunda, OnViewCellTapped olay işleyicisi yürütülür:

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

OnViewCellTappedOlay işleyicisi ' de ikincisini gösterir veya gizler LabelViewCell ve Xamarin_Forms OnViewCellTapped _Cell_ForceUpdateSize "Data-LinkType =" Absolute-path ">metodunu çağırarak hücrenin boyutunu açıkça günceller Cell.ForceUpdateSize .

Aşağıdaki ekran görüntüleri, üzerine dokunulmadan önce hücreyi gösterir:

Yeniden boyutlandırmadan önce ViewCell

Aşağıdaki ekran görüntüleri, üzerine dokunduktan sonra hücreyi gösterir:

Yeniden boyutlandırıldıktan sonra ViewCell

Önemli

Bu özellik aşırı kullanılıyorsa, performansın düşmesine neden olan sağlam bir olasılık vardır.

TableView (örnek)