Lanjutkan terbang dengan Xamarin. Bentuk 4.4

Kami berbicara dengan pengembang kami, yang membuat banyak aplikasi seluler setiap tahun, dan mereka berkata: "Kami tidak dapat mengingat kapan terakhir kali kami membuat aplikasi seluler yang TIDAK akan menyertakan korsel." Jadi, kami senang memperkenalkan kontrol baru CarouselView di Xamarin.Forms 4.4.0. Selain itu, kami juga menyajikan IndicatorView untuk menampilkan halaman dan elemen dengan korsel. Serta SwipeView untuk memberikan tindakan kontekstual untuk setiap item di CollectionView . Tema korsel tidak akan lengkap tanpa demonstrasi dukungan baru untuk animasi GIF untuk gambar. Mari kita mulai.



Fitur Xamarin. Bentuk 4.4


Animasi GIF adalah cara yang hebat dan mudah untuk menambahkan animasi ke aplikasi Anda untuk komunikasi yang lebih baik dengan pengguna, memperhatikan beberapa tindakan atau detail. Tentu saja, ini juga bagus untuk gif kucing. IsAnimationPlaying Anda butuhkan, bersama dengan properti IsAnimationPlaying untuk mengaktifkan atau menonaktifkan putar otomatis.

Lingkaran animasi akan berjalan secara default. Untuk menghentikan animasi, atur IsAnimationPlaying ke False.



Itu saja, Anda punya animasi! Ini sangat ideal untuk gambar kecil, terutama yang dibangun ke dalam aplikasi Anda. Pengaturan perulangan gambar GIF dihormati. Pastikan Anda menggunakan rendering cepat di Android untuk pengalaman pengguna yang lebih baik.

CarouselView dan IndicatorView


Dibangun pada kontrol dasar yang sama seperti CollectionView , CarouselView baru memudahkan untuk menambahkan komidi putar multifungsi ke aplikasi Anda, terlepas dari apakah Anda menggulir secara horizontal atau vertikal. Dengan CollectionView Anda mendapatkan:

  • 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 mengelola hal-hal seperti jarak yang harus dilihat elemen sebelumnya dan berikutnya.



 <CarouselView PeekAreaInsets="50"              ...> 

Kiat Tingkat Lanjut: Pada contoh di atas, Anda juga akan melihat bahwa elemen sebelumnya dan berikutnya diskalakan dan digeser. Anda dapat mencapai ini sekarang dengan menggunakan perilaku dan mengubah tata letak saat menggulir. Saat kami merilis 4.5, Anda dapat menggunakan status visual untuk menyederhanakan ini.

Untuk menambahkan IndicatorView , Anda menempatkannya di mana saja lalu mengaitkannya dengan CarouselView dengan nama:

 <CarouselView x:Name="walletCarousel"> // implementation here </CarouselView> <IndicatorView  IndicatorColor="LightGray"  SelectedIndicatorColor="Black"  IndicatorSize="10" HorizontalOptions="Center"  IndicatorView.ItemsSourceBy="walletCarousel"/> 




Untuk informasi 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 akan lagi dirilis. Jika Anda menggunakan kontrol ini, Anda dapat menghapus NuGet dan memperbarui namespace kode. Kami telah berupaya menjaga konsistensi dalam API, tetapi Anda mungkin perlu mengonfigurasi beberapa hal. Github

Swipeview


Kontrol ini biasanya ditemukan dalam daftar elemen, yang memungkinkan pengguna untuk menggeser ke segala arah untuk membuka tombol konteks untuk tindakan umum, seperti mengedit atau menghapus. Untuk menggunakan kontrol ini, cukup bungkus di sekitar elemen yang ingin Anda tambahkan perilaku. Secara default, SwipeItem menerima judul dan ikon, serta perintah atau penangan klik. Jika Anda ingin menambahkan sesuatu yang lebih kompleks, Anda dapat melakukannya dengan 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> 

Contoh di atas dan banyak lagi diterbitkan di blog anggota tim kami yang berbakat Javier Suarez Ruiz.

Anda juga dapat menggunakan spesifik platform untuk mengontrol mode gesek pada Android dan iOS . Lihat SwipeView untuk detail lebih lanjut tentang SwipeView .

Mulai dengan Xamarin. Bentuk 4.4 hari ini


Untuk memulai dengan Xamarin.Bentuk 4.4, tingkatkan atau instal dari manajer paket NuGet. Jika Anda meningkatkan dari versi sebelumnya, perlu diingat bahwa Xamarin.Forms dan Xamarin.Essentials sekarang tergantung pada dukungan Android 28.0.0.3. Oleh karena itu, Anda ingin memperbaruinya bersama dengan paket lain yang Anda gunakan, yang mungkin tergantung pada pustaka dukungan Android.

Ingatlah untuk memasukkan fungsi pratinjau baru menggunakan SetFlags jika Anda ingin menggunakannya. Untuk melakukan ini secara global untuk semua platform dalam solusi Anda, tambahkan berikut ini ke App.xaml.cs Anda:

 public App() {    InitializeComponent();    Device.SetFlags(new[] {        "CarouselView_Experimental",        "IndicatorView_Experimental",        "SwipeView_Experimental"    } );    MainPage = new AppShell(); } 

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


All Articles