Menerapkan navigasi tab dengan .NET MAUI Shell
Navigasi tab adalah pola navigasi di mana strip tab (baris kontrol yang dapat disentuh) ditampilkan secara permanen di bagian atas atau bawah layar. Navigasi tab menyediakan mekanisme bagi pengguna untuk memilih antara halaman di aplikasi multi-halaman.
Di unit ini, Anda akan mempelajari cara membuat aplikasi yang mengimplementasikan navigasi tab.
Apa itu navigasi tab?
Di aplikasi yang menggunakan navigasi tab, setiap tab mewakili bagian atau halaman tertentu dari aplikasi. Pengguna memilih tab dalam strip tab untuk berpindah antar konten dalam aplikasi. Sebagai contoh, ilustrasi berikut menunjukkan penggunaan navigasi tab di aplikasi Jam iOS. Ikon yang disorot di dasar halaman memungkinkan Anda beralih di antara tampilan yang berbeda. Ikon ini sesuai dengan tab, dan tampilannya adalah halaman bertab:
Karena strip tab selalu terlihat, navigasi tab memungkinkan pengguna untuk beralih dengan cepat di antara konten dalam aplikasi. Navigasi tab sangat ideal ketika aplikasi memiliki beberapa bagian yang kemungkinan sering digunakan pengguna. Aplikasi jam adalah contoh yang sangat baik. Bagian jam, alarm, dan stopwatch cenderung sering digunakan.
Pada perangkat seluler, strip tab biasanya memiliki jumlah ruang yang terbatas dan hanya dapat menampilkan sejumlah tab tetap, tergantung pada ukuran dan orientasi perangkat. Rekomendasinya adalah hanya menggunakan tiga hingga empat tab. Jika Anda menyertakan lebih banyak tab, Anda tidak dijamin memiliki cukup ruang untuk menampilkan semua tab di semua perangkat. Sistem operasi yang didukung oleh .NET MAUI memungkinkan area luapan. Area ini menyediakan lebih banyak area untuk mengakses tab yang tidak pas di layar. Namun, menavigasi ke tab luapan ini memerlukan langkah tambahan oleh pengguna. Bagian-bagian ini kurang dapat ditemukan.
Jika Anda memerlukan lebih dari empat tab, pertimbangkan untuk menggunakan pola navigasi lain, seperti navigasi item flyout. Selain itu, navigasi tab bukanlah opsi terbaik jika data Anda membentuk hierarki detail master alami. Dalam kasus ini, Anda harus mempertimbangkan navigasi tumpukan.
Navigasi tab di aplikasi .NET MAUI
Anda menggunakan TabBar objek untuk mengimplementasikan navigasi tab dengan aplikasi Shell .NET MAUI. Objek TabBar menampilkan sekumpulan tab dan secara otomatis mengalihkan konten yang ditampilkan saat pengguna memilih tab. Ilustrasi berikut menunjukkan area UI.
Untuk menggunakan tab dalam aplikasi .NET MAUI Shell, buat instans TabBar kelas sebagai anak dari Shell kelas . Kemudian tambahkan Tab objek ke TabBar. Tab Dalam objek , ShellContent objek harus diatur ke ContentPage objek .
Membuat TabbedPage
Anda dapat membuat TabBar instans sebagai anak dari Shell kelas . Tambahkan Tab objek sebagai anak ke TabBar sesuai kebutuhan. Tab Dalam objek , ShellContent objek harus diatur ke ContentPage objek .
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:Xaminals.Views"
x:Class="Xaminals.AppShell">
<TabBar>
<Tab Title="Moon Phase"
Icon="moon.png">
<ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
</Tab>
<Tab Title="Sunrise"
Icon="sun.png">
<ShellContent ContentTemplate="{DataTemplate local:SunrisePage}" />
</Tab>
</TabBar>
</Shell>
Tab dalam menu flyout
Item flyout dapat membuka halaman dengan bilah tab yang menampilkan satu atau beberapa tab.
Untuk mengimplementasikan ini relatif mudah. Dalam tambahkan <FlyoutItem> beberapa <ShellContent> item untuk setiap tab yang ingin Anda tampilkan.
Atur Title dan Icon pada <ShellContent> untuk mengontrol judul dan ikon tab.
<FlyoutItem Title="Astronomy" Icon="moon.png">
<ShellContent Title="Moon Phase" Icon="moon.png"
ContentTemplate="{DataTemplate local:MoonPhasePage}"/>
<ShellContent Title="Sunrise" Icon="sun.png"
ContentTemplate="{DataTemplate local:SunrisePage}"/>
</FlyoutItem>
<FlyoutItem Title="About" Icon="question.png">
<ShellContent
ContentTemplate="{DataTemplate local:AboutPage}"/>
</FlyoutItem>