Xamarin.Forms TabbedPage

Artikel
11/06/2020

Xamarin.FormsTabbedPage Terdiri dari daftar tab dan area detail yang lebih besar, dengan setiap tab memuat konten ke area detail. Cuplikan layar berikut menunjukkan TabbedPage di iOS dan Android:

Di iOS, daftar tab muncul di bagian bawah layar, dan area detail di atas. Setiap tab terdiri dari judul dan ikon, yang harus berupa file PNG dengan saluran alfa. Dalam orientasi potret, ikon bilah tab muncul di atas judul tab. Dalam orientasi lanskap, ikon dan judul muncul berdampingan. Selain itu, bilah tab reguler atau ringkas dapat ditampilkan, tergantung pada perangkat dan orientasi. Jika ada lebih dari lima tab, tab Lainnya akan muncul, yang dapat digunakan untuk mengakses tab tambahan.

Di Android, daftar tab muncul di bagian atas layar, dan area detailnya ada di bawah ini. Setiap tab terdiri dari judul dan ikon, yang harus berupa file PNG dengan saluran alfa. Namun, tab dapat dipindahkan ke bagian bawah layar dengan platform khusus. Jika ada lebih dari lima tab, dan daftar tab berada di bagian bawah layar, tab Lainnya akan muncul yang dapat digunakan untuk mengakses tab tambahan. Untuk informasi tentang persyaratan ikon, lihat Tab tentang material.io dan Mendukung kepadatan piksel yang berbeda pada developer.android.com. Untuk informasi tentang memindahkan tab ke bagian bawah layar, lihat Mengatur Penempatan dan Warna Toolbar TabbedPage.

Pada Platform Windows Universal (UWP), daftar tab muncul di bagian atas layar, dan area detail di bawah ini. Setiap tab terdiri dari judul. Namun, ikon dapat ditambahkan ke setiap tab dengan platform khusus. Untuk informasi selengkapnya, lihat Ikon TabbedPage di Windows.

Tip

File Grafik Vektor Yang Dapat Diskalakan (SVG) dapat ditampilkan sebagai ikon tab pada TabbedPage:

Kelas iOS TabbedRenderer memiliki metode yang dapat GetIcon diganti yang dapat digunakan untuk memuat ikon tab dari sumber tertentu. Selain itu, versi ikon yang dipilih dan tidak dipilih dapat disediakan jika diperlukan.
Kelas Android AppCompat TabbedPageRenderer memiliki metode yang dapat SetTabIconImageSource diganti yang dapat digunakan untuk memuat ikon tab dari kustom Drawable. Atau, file SVG dapat dikonversi ke sumber daya yang dapat digambar vektor, yang secara otomatis dapat ditampilkan oleh Xamarin.Forms. Untuk informasi selengkapnya tentang mengonversi file SVG ke sumber daya yang dapat digambar vektor, lihat Menambahkan grafik vektor multi-kepadatan pada developer.android.com.

Membuat TabbedPage

Dua pendekatan dapat digunakan untuk membuat TabbedPage:

Isi TabbedPage dengan kumpulan objek anak Page , seperti kumpulan ContentPage objek. Untuk informasi selengkapnya, lihat Mengisi TabbedPage dengan Koleksi Halaman.
Tetapkan koleksi ke ItemsSource properti dan tetapkan DataTemplate ke ItemTemplate properti untuk mengembalikan halaman untuk objek dalam koleksi. Untuk informasi selengkapnya, lihat Mengisi TabbedPage dengan templat.

Dengan kedua pendekatan, TabbedPage akan menampilkan setiap halaman saat pengguna memilih setiap tab.

Penting

Disarankan agar TabbedPage harus diisi dengan NavigationPage instans dan ContentPage saja. Ini akan membantu memastikan pengalaman pengguna yang konsisten di semua platform.

Selain itu, TabbedPage tentukan properti berikut:

BarBackgroundColor, dari jenis Color, warna latar belakang bilah tab.
BarTextColor, dari jenis Color, warna teks pada bilah tab.
SelectedTabColor, dari jenis Color, warna tab saat dipilih.
UnselectedTabColor, dari jenis Color, warna tab saat tidak dipilih.

Semua properti ini didukung oleh BindableProperty objek, yang berarti dapat ditata, dan properti dapat menjadi target pengikatan data.

Peringatan

TabbedPageDalam , setiap Page objek dibuat saat TabbedPage dibangun. Ini dapat menyebabkan pengalaman pengguna yang buruk, terutama jika TabbedPage adalah halaman akar aplikasi. Namun, Xamarin.Forms Shell memungkinkan halaman yang diakses melalui bilah tab untuk dibuat sesuai permintaan, sebagai respons terhadap navigasi. Untuk informasi selengkapnya, lihat Xamarin.Forms Shell.

Mengisi TabbedPage dengan koleksi Halaman

TabbedPage Dapat diisi dengan kumpulan objek anakPage, seperti kumpulan ContentPage objek. Ini dicapai dengan menambahkan Page objek ke TabbedPage.Children koleksi. Ini dicapai dalam XAML sebagai berikut:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage"
            x:Class="TabbedPageWithNavigationPage.MainPage">
    <local:TodayPage />
    <NavigationPage Title="Schedule" IconImageSource="schedule.png">
        <x:Arguments>
            <local:SchedulePage />
        </x:Arguments>
    </NavigationPage>
</TabbedPage>

Catatan

Properti Children kelas MultiPage<T> , dari mana TabbedPage berasal, adalah ContentProperty dari MultiPage<T>. Oleh karena itu, di XAML tidak perlu secara eksplisit menetapkan Page objek ke Children properti.

Kode C# yang setara adalah:

public class MainPageCS : TabbedPage
{
  public MainPageCS ()
  {
    NavigationPage navigationPage = new NavigationPage (new SchedulePageCS ());
    navigationPage.IconImageSource = "schedule.png";
    navigationPage.Title = "Schedule";

    Children.Add (new TodayPageCS ());
    Children.Add (navigationPage);
  }
}

Dalam contoh ini, diisi TabbedPage dengan dua Page objek. Anak pertama adalah ContentPage objek, dan anak kedua berisi NavigationPageContentPage objek.

Cuplikan layar berikut menunjukkan ContentPage objek dalam TabbedPage:

Memilih tab lain menampilkan ContentPage objek yang mewakili tab:

Pada tab Jadwal , ContentPage objek dibungkus dalam NavigationPage objek.

Peringatan

NavigationPage Meskipun dapat ditempatkan di , tidak disarankan TabbedPageuntuk menempatkan TabbedPage ke dalam NavigationPage. Ini karena, di iOS, UITabBarController selalu bertindak sebagai pembungkus untuk UINavigationController. Untuk informasi selengkapnya, lihat Antarmuka Pengontrol Tampilan Gabungan di Pustaka Pengembang iOS.

Menavigasi dalam tab

Navigasi dapat dilakukan dalam tab, asalkan ContentPage objek dibungkus dalam NavigationPage objek. Ini dicapai dengan memanggil PushAsync metode pada Navigation properti ContentPage objek:

await Navigation.PushAsync (new UpcomingAppointmentsPage ());

Halaman yang dinavigasi ditentukan sebagai argumen ke PushAsync metode . Dalam contoh ini, UpcomingAppointmentsPage halaman didorong ke tumpukan navigasi, di mana halaman tersebut menjadi halaman aktif:

Untuk informasi selengkapnya tentang melakukan navigasi menggunakan NavigationPage kelas , lihat Navigasi Hierarkis.

Mengisi TabbedPage dengan templat

TabbedPage dapat diisi dengan halaman dengan menetapkan kumpulan data ke ItemsSource properti , dan dengan menetapkan ke ItemTemplate properti yang men-template DataTemplate data sebagai Page objek. Ini dicapai dalam XAML sebagai berikut:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:local="clr-namespace:TabbedPageDemo;assembly=TabbedPageDemo"
            x:Class="TabbedPageDemo.TabbedPageDemoPage"
            ItemsSource="{x:Static local:MonkeyDataModel.All}">            
  <TabbedPage.Resources>
    <ResourceDictionary>
      <local:NonNullToBooleanConverter x:Key="booleanConverter" />
    </ResourceDictionary>
  </TabbedPage.Resources>
  <TabbedPage.ItemTemplate>
    <DataTemplate>
      <ContentPage Title="{Binding Name}" IconImageSource="monkeyicon.png">
        <StackLayout Padding="5, 25">
          <Label Text="{Binding Name}" Font="Bold,Large" HorizontalOptions="Center" />
          <Image Source="{Binding PhotoUrl}" WidthRequest="200" HeightRequest="200" />
          <StackLayout Padding="50, 10">
            <StackLayout Orientation="Horizontal">
              <Label Text="Family:" HorizontalOptions="FillAndExpand" />
              <Label Text="{Binding Family}" Font="Bold,Medium" />
            </StackLayout>
            ...
          </StackLayout>
        </StackLayout>
      </ContentPage>
    </DataTemplate>
  </TabbedPage.ItemTemplate>
</TabbedPage>

Kode C# yang setara adalah:

public class TabbedPageDemoPageCS : TabbedPage
{
  public TabbedPageDemoPageCS ()
  {
    var booleanConverter = new NonNullToBooleanConverter ();

    ItemTemplate = new DataTemplate (() =>
    {
      var nameLabel = new Label
      {
        FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label)),
        FontAttributes = FontAttributes.Bold,
        HorizontalOptions = LayoutOptions.Center
      };
      nameLabel.SetBinding (Label.TextProperty, "Name");

      var image = new Image { WidthRequest = 200, HeightRequest = 200 };
      image.SetBinding (Image.SourceProperty, "PhotoUrl");

      var familyLabel = new Label
      {
        FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)),
        FontAttributes = FontAttributes.Bold
      };
      familyLabel.SetBinding (Label.TextProperty, "Family");
      ...

      var contentPage = new ContentPage
      {
        IconImageSource = "monkeyicon.png",
        Content = new StackLayout {
          Padding = new Thickness (5, 25),
          Children =
          {
            nameLabel,
            image,
            new StackLayout
            {
              Padding = new Thickness (50, 10),
              Children =
              {
                new StackLayout
                {
                  Orientation = StackOrientation.Horizontal,
                  Children =
                  {
                    new Label { Text = "Family:", HorizontalOptions = LayoutOptions.FillAndExpand },
                    familyLabel
                  }
                },
                // ...
              }
            }
          }
        }
      };
      contentPage.SetBinding (TitleProperty, "Name");
      return contentPage;
    });
    ItemsSource = MonkeyDataModel.All;
  }
}

Dalam contoh ini, setiap tab terdiri dari ContentPage objek yang menggunakan Image objek dan Label untuk menampilkan data untuk tab:

Memilih tab lain menampilkan ContentPage objek yang mewakili tab.

Bagikan melalui

Xamarin.Forms TabbedPage

Membuat TabbedPage

Mengisi TabbedPage dengan koleksi Halaman

Menavigasi dalam tab

Mengisi TabbedPage dengan templat

Sumber Daya Tambahan:

Bagikan melalui

Xamarin.Forms TabbedPage

Membuat TabbedPage

Mengisi TabbedPage dengan koleksi Halaman

Menavigasi dalam tab

Mengisi TabbedPage dengan templat

Tautan terkait

Sumber Daya Tambahan: