Geekly articles weekly

Xamarin.Forms Shell

Pada akhir Mei, Microsoft merilis rilis Xamarin.Forms Shell - shell yang ditujukan untuk menyederhanakan pembuatan aplikasi mobile lintas platform dan termasuk fungsi berikut: menu samping, tab, navigasi, pencarian.

Mari kita mulai dengan membuat proyek Xamarin.Forms kosong di Visual Studio 2019. Harap dicatat, saat ini, Shell secara resmi hanya mendukung 2 platform: iOS dan Android, UWP masih dalam pengembangan. Saya sarankan segera memperbarui semua paket nuget dalam solusi.



Selanjutnya, kita akan membuat kelas AppShell yang berasal dari Shell, untuk ini kita menambahkan file XAML ke proyek umum dengan konten berikut:

AppShell.xaml

<?xml version="1.0" encoding="utf-8" ?> <Shell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="HelloShell.AppShell"> </Shell>

AppShell.xaml.cs

 namespace HelloShell { [XamlCompilation(XamlCompilationOptions.Compile)] public partial class AppShell : Shell { public AppShell() { InitializeComponent(); } } }

kemudian di file App.xaml.cs kami menunjukkan bahwa AppShell akan bertindak sebagai MainPage:

 public App() { InitializeComponent(); //MainPage = new MainPage(); MainPage = new AppShell(); }

dan beberapa halaman ContentPage: Page1 dan Page2. Juga, gambar akan digunakan dalam aplikasi pengujian kami, jadi kami akan menambahkannya ke proyek-proyek yang bergantung pada platform, untuk android di folder Sumber Daya => yang dapat ditarik, dan untuk ios di folder Sumber Daya.



Menu samping




Menu samping (sering disebut menu hamburger) adalah menu pop-up yang dapat dipanggil dengan menekan tombol atau dengan gerakan khusus dan termasuk header (Header), daftar halaman (Item Flyout) dan menu (Flyout Menu)

AppShell.xaml

 <?xml version="1.0" encoding="utf-8" ?> <Shell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:pages="clr-namespace:HelloShell" x:Class="HelloShell.AppShell"> <Shell.FlyoutHeader> <StackLayout BackgroundColor="White" Padding="10"> <Image HeightRequest="100" Source="xamarin.png" /> <Label Text="Header" /> <Label Text=" !"/> </StackLayout> </Shell.FlyoutHeader> <FlyoutItem Title="MainPage" Icon="xamarin.png"> <ShellContent ContentTemplate="{DataTemplate pages:MainPage}"/> </FlyoutItem> <FlyoutItem Title="Page1" Icon="xamarin.png"> <ShellContent ContentTemplate="{DataTemplate pages:Page1}"/> </FlyoutItem> <FlyoutItem Title="Page2" Icon="xamarin.png"> <ShellContent ContentTemplate="{DataTemplate pages:Page2}"/> </FlyoutItem> <MenuItem Clicked="MenuItem_Clicked" Text="" IconImageSource="item.png" /> </Shell>

AppShell.xaml.cs

 namespace HelloShell { [XamlCompilation(XamlCompilationOptions.Compile)] public partial class AppShell : Shell { public AppShell() { InitializeComponent(); } private async void MenuItem_Clicked(object sender, System.EventArgs e) { await DisplayAlert(""," !","OK"); } } }

Tab




Xamarin.Forms Shell sebagai templat root dapat mendukung tab bawah dan atas, serta kombinasinya:

AppShell.xaml.cs

 <?xml version="1.0" encoding="utf-8" ?> <Shell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:pages="clr-namespace:HelloShell" x:Class="HelloShell.AppShell"> <TabBar> <Tab Title="MainPage" Icon="xamarin.png"> <ShellContent ContentTemplate="{DataTemplate pages:MainPage}" /> </Tab> <Tab Title="Page1" Icon="xamarin.png"> <ShellContent Title="Main Page" Icon="xamarin.png" ContentTemplate="{DataTemplate pages:MainPage}" /> <ShellContent Title="Page2" Icon="xamarin.png" ContentTemplate="{DataTemplate pages:Page2}" /> </Tab> <Tab IsEnabled="False" Title="Page2" Icon="xamarin.png"> <ShellContent ContentTemplate="{DataTemplate pages:Page2}" /> </Tab> </TabBar> </Shell>

Seperti yang Anda lihat, ini sangat sederhana. Keuntungan lain adalah pemuatan halaman yang efisien, yang memungkinkan Anda untuk menginisialisasi halaman hanya ketika pengguna pergi ke sana, yang secara signifikan mempercepat peluncuran aplikasi.

Navigasi


Xamarin.Form menyediakan peningkatan navigasi berbasis URI, memungkinkan Anda untuk pergi ke halaman mana pun dalam aplikasi tanpa mengikuti hierarki yang ketat dan kembali tanpa harus melalui semua halaman di tumpukan navigasi. Agar navigasi berfungsi, halaman harus didaftarkan, Anda dapat melakukan ini di markup XAML di FlyoutItem, Tab dan ShellContent menggunakan properti Route

 <Shell ...> <FlyoutItem ... Route="page1"> <Tab ... Route="page2"> <ShellContent ... Route="mainpage" /> <ShellContent ... Route="page3" /> </Tab> <ShellContent ... Route="page4" /> <ShellContent ... Route="page5" /> </FlyoutItem> <ShellContent ... Route="about" /> ... </Shell>

atau dalam kode

 Routing.RegisterRoute("page1", typeof(Page1));

navigasi dilakukan menggunakan perintah

 await Shell.Current.GoToAsync("//page2");

Sebagai contoh, kami membuat perubahan pada file berikut:

AppShell.xaml

  <TabBar> <Tab Route="main" Title="MainPage" Icon="xamarin.png"> <ShellContent ContentTemplate="{DataTemplate pages:MainPage}" /> </Tab> <Tab Title="Page1" Icon="xamarin.png"> <ShellContent Title="Main Page" Icon="xamarin.png" ContentTemplate="{DataTemplate pages:MainPage}" /> <ShellContent Route="page2" Title="Page2" Icon="xamarin.png" ContentTemplate="{DataTemplate pages:Page2}" /> </Tab> <Tab IsEnabled="False" Title="Page2" Icon="xamarin.png"> <ShellContent ContentTemplate="{DataTemplate pages:Page2}" /> </Tab> </TabBar>

MainPage.xaml
  <StackLayout VerticalOptions="CenterAndExpand"> <Button Text="Page2" Clicked="ToPage2" /> </StackLayout>

MainPage.xaml.cs
  public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); } private async void ToPage2(object sender, EventArgs e) { await Shell.Current.GoToAsync("//page2"); } }

Halaman2.xaml

  <ContentPage.Content> <StackLayout VerticalOptions="CenterAndExpand"> <Button Text="" Clicked="Back" /> </StackLayout> </ContentPage.Content>

Page2.xaml.cs

  public partial class Page2 : ContentPage { public Page2() { InitializeComponent(); } private async void Back(object sender, EventArgs e) { await Shell.Current.GoToAsync("//main"); } }

Cari


Xamarin.Forms Shell memiliki fungsi pencarian bawaan yang disediakan oleh kelas SearchHandler. Untuk menambahkan fungsi pencarian ke halaman, kita akan membuat kelas PetSearchHandler yang berasal dari SearchHandler dan mengganti metode OnQueryChanged dan OnItemSelected. Metode OnQueryChanged menyala ketika pengguna memasukkan teks dalam bidang pencarian dan mengambil dua argumen: oldValue dan newValue, yang masing-masing berisi kueri pencarian sebelumnya dan baru.

Metode SelectedItem dijalankan ketika pengguna memilih hasil pencarian dan mengambil objek, dalam hal ini, Hewan, sebagai parameter.

Misalnya, buat model Hewan

Models / Animal.cs

  public class Animal { public string Name { get; set; } public string ImageUrl { get; set; } }

Kelas PetData yang akan berisi koleksi kucing dan anjing favorit kami

Data / PetData.cs

  public static class PetData { public static IList<Animal> Pets { get; private set; } static PetData() { Pets = new List<Animal>(); Pets.Add(new Animal { Name = "Afghan Hound", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/6/69/Afghane.jpg" }); Pets.Add(new Animal { Name = "Alpine Dachsbracke", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Alpejski_gończy_krótkonożny_g99.jpg/320px-Alpejski_gończy_krótkonożny_g99.jpg" }); Pets.Add(new Animal { Name = "American Bulldog", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/5/5e/American_Bulldog_600.jpg" }); Pets.Add(new Animal { Name = "Abyssinian", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Gustav_chocolate.jpg/168px-Gustav_chocolate.jpg" }); Pets.Add(new Animal { Name = "Arabian Mau", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/d/d3/Bex_Arabian_Mau.jpg" }); Pets.Add(new Animal { Name = "Bengal", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Paintedcats_Red_Star_standing.jpg/187px-Paintedcats_Red_Star_standing.jpg" }); Pets.Add(new Animal { Name = "Burmese", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/0/04/Blissandlucky11.jpg" }); Pets.Add(new Animal { Name = "Cyprus", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/CyprusShorthair.jpg/320px-CyprusShorthair.jpg" }); Pets.Add(new Animal { Name = "German Rex", ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/c/c7/German_rex_harry_%28cropped%29.jpg" }); } }

PetSearchHandler.cs

  public class PetSearchHandler : SearchHandler { protected override void OnQueryChanged(string oldValue, string newValue) { base.OnQueryChanged(oldValue, newValue); if (string.IsNullOrWhiteSpace(newValue)) { ItemsSource = null; } else { ItemsSource = PetData.Pets .Where(pet => pet.Name.ToLower().Contains(newValue.ToLower())) .ToList<Animal>(); } } protected override async void OnItemSelected(object item) { base.OnItemSelected(item); var pet = item as Animal; if (pet is null) return; await App.Current.MainPage.DisplayAlert(" ",pet.Name,"ok"); } }

Tambahkan halaman Hewan Peliharaan tempat kami menetapkan PetSearchHandler kami

 <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" ... x:Class="HelloShell.Pets"> <Shell.SearchHandler> <controls:PetSearchHandler Placeholder="Enter search term" ShowsResults="true" DisplayMemberName="Name" /> </Shell.SearchHandler> <ContentPage.Content>

Akibatnya, kita harus mendapatkan halaman dengan bidang pencarian di bilah navigasi, ketika Anda memasukkan frasa pencarian, daftar nama hewan peliharaan sederhana ditampilkan.



Jika diinginkan, kami dapat dengan mudah menyesuaikan konten sel daftar dengan menambahkan gambar dan beberapa label teks di sana:

  <Shell.SearchHandler> <controls:PetSearchHandler Placeholder="Enter search term" ShowsResults="true"> <controls:PetSearchHandler.ItemTemplate> <DataTemplate> <StackLayout Padding="10" Orientation="Horizontal"> <Image Source="{Binding ImageUrl}" Aspect="AspectFill" HeightRequest="40" WidthRequest="40" /> <Label Text="{Binding Name}" FontAttributes="Bold" /> </StackLayout> </DataTemplate> </controls:PetSearchHandler.ItemTemplate> </controls:PetSearchHandler> </Shell.SearchHandler>



Sumber di github

Source: https://habr.com/ru/post/id470309/

More articles:


All Articles