Bagikan melalui

Xamarin.Forms TableView

  • Artikel

TableView adalah tampilan untuk menampilkan daftar data atau pilihan yang dapat digulir di mana ada baris yang tidak berbagi templat yang sama. Tidak seperti ListView, TableView tidak memiliki konsep , sehingga item harus ditambahkan secara manual sebagai turunan ItemsSource.

Contoh TableView

Kasus penggunaan

TableView berguna ketika:

  • menyajikan daftar pengaturan,
  • mengumpulkan data dalam formulir, atau
  • memperlihatkan data yang disajikan secara berbeda dari baris ke baris (misalnya angka, persentase, dan gambar).

TableView menangani pengguliran dan peletakan baris di bagian yang menarik, kebutuhan umum untuk skenario di atas. Kontrol ini TableView menggunakan tampilan setara yang mendasar setiap platform saat tersedia, menciptakan tampilan asli untuk setiap platform.

Struktur

Elemen dalam diatur TableView ke dalam bagian. Di akar TableView adalah TableRoot, yang merupakan induk dari satu atau beberapa TableSection instans. Masing-masing TableSection terdiri dari judul dan satu atau beberapa ViewCell instans:

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

Kode C# yang setara adalah:

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

Tampilan

TableViewIntent mengekspos properti, yang dapat diatur ke salah TableIntent satu anggota enumerasi:

  • Data – untuk digunakan saat menampilkan entri data. Perhatikan bahwa ListView mungkin merupakan opsi yang lebih baik untuk menggulir daftar data.
  • Form – untuk digunakan saat TableView bertindak sebagai Formulir.
  • Menu – untuk digunakan saat menyajikan menu pilihan.
  • Settings – untuk digunakan saat menampilkan daftar pengaturan konfigurasi.

Nilai TableIntent yang Anda pilih dapat memengaruhi bagaimana munculnya TableView di setiap platform. Bahkan jika tidak ada perbedaan yang jelas, ini adalah praktik terbaik untuk memilih TableIntent yang paling cocok dengan cara Anda ingin menggunakan tabel.

Selain itu, warna teks yang ditampilkan untuk masing-masing TableSection dapat diubah dengan mengatur TextColor properti ke Color.

Sel bawaan

Xamarin.Forms dilengkapi dengan sel bawaan untuk mengumpulkan dan menampilkan informasi. Meskipun ListView dan TableView dapat menggunakan semua sel yang sama, SwitchCell dan EntryCell paling relevan untuk TableView skenario.

Lihat Tampilan Sel ListView untuk deskripsi terperinci tentang TextCell dan ImageCell.

SwitchCell

SwitchCell adalah kontrol yang digunakan untuk menyajikan dan menangkap on/off atau true/false status. Ini mendefinisikan properti berikut:

  • Text – teks untuk ditampilkan di samping sakelar.
  • On – apakah sakelar ditampilkan sebagai aktif atau nonaktif.
  • OnColor – sakelar Color saat berada di posisi aktif.

Semua properti ini dapat diikat.

SwitchCell juga mengekspos OnChanged peristiwa, memungkinkan Anda merespons perubahan dalam status sel.

Contoh SwitchCell

EntryCell

EntryCell berguna ketika Anda perlu menampilkan data teks yang dapat diedit pengguna. Ini mendefinisikan properti berikut:

  • Keyboard – Keyboard untuk ditampilkan saat mengedit. Ada opsi untuk hal-hal seperti nilai numerik, email, nomor telepon, dll. Lihat dokumen API.
  • Label – Teks label untuk ditampilkan di sebelah kiri bidang entri teks.
  • LabelColor – Warna teks label.
  • Placeholder – Teks untuk ditampilkan di bidang entri saat null atau kosong. Teks ini menghilang ketika entri teks dimulai.
  • Text – Teks di bidang entri.
  • HorizontalTextAlignment – Perataan horizontal teks. Nilai diratakan tengah, kiri, atau kanan. Lihat dokumen API.
  • VerticalTextAlignment – Perataan vertikal teks. Nilainya adalah Start, Center, atau End.

EntryCell juga mengekspos Completed peristiwa, yang diaktifkan ketika pengguna menekan tombol 'selesai' pada keyboard saat mengedit teks.

Contoh EntryCell

Sel kustom

Saat sel bawaan tidak cukup, sel kustom dapat digunakan untuk menyajikan dan mengambil data dengan cara yang masuk akal untuk aplikasi Anda. Misalnya, Anda mungkin ingin menyajikan slider untuk memungkinkan pengguna memilih keburaman gambar.

Semua sel kustom harus berasal dari ViewCell, kelas dasar yang sama dengan yang digunakan semua jenis sel bawaan.

Ini adalah contoh sel kustom:

Contoh Sel Kustom

Contoh berikut menunjukkan XAML yang digunakan untuk membuat TableView pada cuplikan layar di atas:

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

Kode C# yang setara adalah:

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;

Elemen akar di bawah TableView adalah TableRoot, dan ada TableSection segera di bawah TableRoot. ViewCell ditentukan langsung di bawah TableSection, dan StackLayout digunakan untuk mengelola tata letak sel kustom, meskipun tata letak apa pun dapat digunakan di sini.

Catatan

Tidak seperti ListView, TableView tidak mengharuskan sel kustom (atau apa pun) didefinisikan dalam ItemTemplate.

Tinggi baris

Kelas TableView memiliki dua properti yang dapat digunakan untuk mengubah tinggi baris sel:

  • RowHeight – mengatur tinggi setiap baris ke int.
  • HasUnevenRows – baris memiliki tinggi yang bervariasi jika diatur ke true. Perhatikan bahwa saat mengatur properti ini ke true, tinggi baris akan secara otomatis dihitung dan diterapkan oleh Xamarin.Forms.

Saat tinggi konten dalam sel dalam diubahTableView, tinggi baris diperbarui secara implisit di Android dan Platform Windows Universal (UWP). Namun, pada iOS harus diperbarui dengan mengatur HasUnevenRows properti ke true dan dengan memanggil Cell.ForceUpdateSize metode .

Contoh XAML berikut menunjukkan TableView yang berisi 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>

Saat diketuk ViewCell , penanganan OnViewCellTapped aktivitas dijalankan:

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

Penanganan OnViewCellTapped aktivitas memperlihatkan atau menyembunyikan yang kedua Label di ViewCell, dan secara eksplisit memperbarui ukuran sel dengan memanggil Cell.ForceUpdateSize metode .

Cuplikan layar berikut menunjukkan sel sebelum diketuk:

ViewCell sebelum diubah ukurannya

Cuplikan layar berikut menunjukkan sel setelah diketuk:

ViewCell setelah diubah ukurannya

Penting

Ada kemungkinan penurunan performa yang kuat jika fitur ini terlalu banyak digunakan.