Kami berbicara dengan pelanggan tahun lalu yang membangun puluhan aplikasi seluler setiap tahun. Mereka berkata, “Kami tidak dapat mengingat kapan terakhir kali kami membuat aplikasi seluler yang TIDAK termasuk tampilan korsel.” Banyak dari Anda telah mengungkapkan sentimen yang hampir sama dengan kami. Jadi, kami sangat senang memperkenalkan kontrol
CarouselView baru di Xamarin. Bentuk 4.4.0. Bersamaan dengan ini, kami juga memiliki
IndicatorView untuk menampilkan halaman atau item dalam korsel. Serta
SwipeView untuk memberikan tindakan kontekstual ke elemen apa pun di
CollectionView . Tema rilis untuk memindahkan barang tidak akan lengkap tanpa menampilkan dukungan animasi GIF baru untuk gambar. Mari kita mulai dari sana.
Xamarin. Bentuk 4.4 Fitur
Animasi GIF adalah cara yang hebat dan sederhana untuk menambahkan animasi ke aplikasi Anda untuk umpan balik pengguna yang lebih baik, meminta perhatian pada beberapa tindakan atau detail. Ini juga bagus untuk GIF kucing, tentu saja.
Image adalah semua yang Anda butuhkan bersama dengan properti
IsAnimationPlaying baru untuk mengaktifkan dan menonaktifkan pemutaran.
Animasi akan berulang secara default. Untuk menghentikan animasi, setel
IsAnimationPlaying ke false.
Sama seperti itu Anda memiliki animasi! Ini sangat ideal untuk gambar yang lebih kecil, dan terutama yang tertanam di aplikasi Anda. Pengaturan lilitan pada gambar GIF dihormati. Pastikan Anda menggunakan renderer cepat di Android untuk pengalaman terbaik.
CarouselView dan IndicatorView
Dibangun di atas kontrol basis yang sama dengan
CollectionView ,
CarouselView baru membuatnya mudah untuk menambahkan komidi putar kaya ke aplikasi Anda, tidak peduli apakah Anda menggulir secara horizontal atau vertikal. Sama seperti yang Anda dapatkan dengan
CollectionView Anda dapatkan:
- ItemLayout
- Sumber Barang
- ItemTemplate
- EmptyTemplate
<CarouselView HeightRequest="160"> <CarouselView.ItemsSource> <x:Array Type="{x:Type x:String}"> <x:String>h01.jpg</x:String> <x:String>h02.jpg</x:String> <x:String>h03.jpg</x:String> <x:String>h04.jpg</x:String> </x:Array> </CarouselView.ItemsSource> <CarouselView.ItemTemplate> <DataTemplate> <Image Source="{Binding .}"/> </DataTemplate> </CarouselView.ItemTemplate> </CarouselView>
Anda juga mendapatkan beberapa properti khusus korsel untuk mengendalikan hal-hal seperti jarak yang terlihat oleh item sebelumnya dan berikutnya.
<CarouselView PeekAreaInsets="50" ...>
Kiat Tingkat Lanjut: Pada contoh di atas Anda juga akan mencatat bahwa item sebelumnya dan berikutnya diskalakan dan diimbangi. Anda dapat mencapai hal ini hari ini dengan perilaku dan melakukan modifikasi tata letak pada gulir. Saat kami mengirimkan 4,5, Anda akan dapat menggunakan status visual untuk melakukan hal ini dengan lebih mudah.
Untuk menambahkan
IndicatorView Anda memposisikannya di mana pun Anda suka dan kemudian mengaitkannya ke
CarouselView dengan nama:
<CarouselView x:Name="walletCarousel"> // implementation here </CarouselView> <IndicatorView IndicatorColor="LightGray" SelectedIndicatorColor="Black" IndicatorSize="10" HorizontalOptions="Center" IndicatorView.ItemsSourceBy="walletCarousel"/>
Untuk detail lebih lanjut tentang semua hal kuat yang dapat Anda lakukan dengan
CarouselView dan
IndicatorView , lihat
dokumentasi .
Catatan: NuGet
Xamarin.Forms.CarouselView (Pratinjau) yang sebelumnya dirilis akan diarsipkan dan tidak lagi dirilis. Jika Anda menggunakan kontrol ini, Anda dapat menghapus NuGet dan memperbarui namespace kode Anda. Kami berupaya menjaga agar API konsisten, tetapi Anda mungkin perlu menyesuaikan beberapa hal.
GithubSwipeview
Kontrol ini biasanya ditemukan dalam daftar item untuk memungkinkan pengguna menggesek ke segala arah untuk mengungkapkan tombol konteks untuk tindakan umum seperti mengedit atau menghapus. Untuk menggunakan kontrol ini, cukup lilitkan di sekitar elemen apa pun yang Anda ingin tambahkan perilaku, dan spesifik SwipeItems Anda. Secara default,
SwipeItem mengambil judul dan ikon, plus perintah atau penangan klik. Jika Anda ingin menambahkan sesuatu yang lebih kompleks, Anda dapat melakukannya melalui templat.
<SwipeView> <SwipeView.RightItems> <SwipeItems Mode="Execute"> <SwipeItem Text="Favourite" Command="{Binding Favourite}"> <SwipeItem.Icon> <FontIconSource Glyph=""/> </SwipeItem.Icon> </SwipeItem> </SwipeItems> </SwipeView.LeftItems> <!-- Swipeable content --> <Frame> // content here </Frame> </SwipeView>
Sampel di atas
dan banyak lagi di-blog oleh anggota tim kami yang berbakat Javier Suarez Ruiz.
Anda juga dapat menggunakan platform spesifik untuk mengontrol mode transisi gesek pada
Android dan
iOS . Untuk detail lebih lanjut tentang
SwipeView , lihat
dokumentasi .
Kontributor
Bahkan sebelum
kehadiran besar -
besaran untuk Hacktoberfest, kami memiliki banyak kontribusi fantastis dalam pipa yang sekarang muncul di Xamarin. Bentuk 4.4.0.
Lihatlah peningkatan hebat ini dari 34 rekan pengembang Anda. Sorotan meliputi:
Mulailah dengan Xamarin.Bentuk 4.4 Hari ini
Untuk memulai dengan Xamarin.Bentuk 4.4, perbarui atau instal dari manajer paket NuGet favorit Anda. Transisi dari 4.3.0 lancar. Jika Anda memperbarui dari versi sebelumnya, perhatikan bahwa Xamarin.Forms dan Xamarin.Essentials sekarang bergantung pada Dukungan Android 28.0.0.3. Jadi, Anda ingin memperbarui mereka bersama-sama dengan paket lain yang Anda gunakan yang mungkin bergantung pada pustaka Dukungan Android.
Pastikan untuk mengaktifkan fitur pratinjau baru menggunakan
SetFlags jika Anda ingin menggunakannya. Untuk melakukan ini secara global untuk semua platform dalam solusi Anda, tambahkan berikut ini di
App.xaml.cs Anda:
public App() { InitializeComponent(); Device.SetFlags(new[] { "CarouselView_Experimental", "IndicatorView_Experimental", "SwipeView_Experimental" } ); MainPage = new AppShell(); }
Kami akan menonton GitHub atas tanggapan Anda tentang kontrol pratinjau ini antara sekarang dan versi kami berikutnya, 4,5 ketika kami berharap untuk memindahkan mereka dengan cepat dari kondisi pratinjau ini.