لقد تحدثنا مع مطورينا ، الذين يقومون بالكثير من تطبيقات الأجهزة المحمولة كل عام ، وقالوا: "لا يمكننا أن نتذكر آخر مرة أنشأنا فيها تطبيقًا للهاتف المحمول لا يتضمن حلقة دوّارة." لذلك ، نحن سعداء بتقديم عنصر تحكم جديد
CarouselView في Xamarin.Forms 4.4.0. بالإضافة إلى ذلك ، فإننا نقدم أيضًا
IndicatorView لعرض الصفحات والعناصر مع دائري. وكذلك
SwipeView لتوفير الإجراءات السياقية لأي عنصر في
CollectionView . لن يكون موضوع دائري مكتملاً بدون عرض دعم جديد لرسوم GIF المتحركة للصور. لنبدأ.
ميزات Xamarin.Forms 4.4
الرسوم المتحركة GIF هي طريقة رائعة وسهلة لإضافة الرسوم المتحركة إلى التطبيق الخاص بك لتحسين التواصل مع المستخدم ، مع الانتباه إلى بعض الإجراءات أو التفاصيل. بالطبع ، هذا شيء عظيم أيضًا لصور القطط.
Image هي كل ما تحتاجه ، إلى جانب خاصية
IsAnimationPlaying لتمكين أو تعطيل التشغيل التلقائي.
ستذهب حلقة الرسوم المتحركة افتراضيًا. لإيقاف الرسوم المتحركة ، قم بتعيين
IsAnimationPlaying على False.
هذا كل شيء ، لديك الرسوم المتحركة! يعد هذا مثاليًا للصور الصغيرة ، خاصة تلك الصور المضمنة في التطبيق الخاص بك. يتم احترام إعدادات حلقات صورة GIF. تأكد من استخدام عروض سريعة على Android لتجربة مستخدم أفضل.
CarouselView و IndicatorView
يقوم
CarouselView الجديد ،
CarouselView عنصر التحكم الأساسي نفسه الموجود في
CollectionView ،
CarouselView إضافة دائري متعدد الوظائف إلى التطبيق الخاص بك ، بغض النظر عما إذا كنت تقوم بالتمرير أفقياً أو رأسياً. مع
CollectionView تحصل على:
- ItemsLayout
- ItemsSource
- 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>
يمكنك أيضًا الحصول على بعض الخصائص الخاصة بالدوران لإدارة أشياء مثل المسافة التي يجب على العناصر السابقة والقادمة إلقاء نظرة خاطفة عليها.
<CarouselView PeekAreaInsets="50" ...>
نصيحة متقدمة: في المثال أعلاه ، ستلاحظ أيضًا أن العناصر السابقة والقادمة يتم تغيير حجمها وتحولها. يمكنك تحقيق ذلك الآن باستخدام السلوك وتغيير التنسيق أثناء التمرير. عندما نصدر 4.5 ، يمكنك استخدام الحالات البصرية لتبسيط هذا.
لإضافة
IndicatorView ، يمكنك وضعه في أي مكان ثم ربطه بـ
CarouselView بالاسم:
<CarouselView x:Name="walletCarousel"> // implementation here </CarouselView> <IndicatorView IndicatorColor="LightGray" SelectedIndicatorColor="Black" IndicatorSize="10" HorizontalOptions="Center" IndicatorView.ItemsSourceBy="walletCarousel"/>
لمزيد من المعلومات حول جميع الأشياء القوية التي يمكنك القيام بها باستخدام
CarouselView و
IndicatorView ، راجع
الوثائق .
ملاحظة: سيتم أرشفة NuGet
Xamarin.Forms.CarouselView (المعاينة) التي تم إصدارها مسبقًا ولن يتم إصدارها بعد الآن. إذا استخدمت عنصر التحكم هذا ، فيمكنك إزالة NuGet وتحديث مساحة أسماء التعليمات البرمجية. لقد عملنا على الحفاظ على التناسق في واجهة برمجة التطبيقات ، ولكن قد تحتاج إلى تكوين بعض الأشياء.
جيثبSwipeView
عادةً ما يتم العثور على عنصر التحكم هذا في قائمة العناصر ، مما يتيح للمستخدم التمرير في أي اتجاه لفتح أزرار السياق لإجراءات عامة ، مثل التحرير أو الحذف. لاستخدام عنصر التحكم هذا ، قم ببساطة بلفه حول أي عنصر تريد إضافة سلوك إليه. بشكل افتراضي ، يتلقى
SwipeItem العنوان والرمز ، وكذلك الأمر أو معالج النقر. إذا كنت ترغب في إضافة شيء أكثر تعقيدًا ، يمكنك القيام بذلك باستخدام قالب.
<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>
تم نشر المثال أعلاه
وأكثر من ذلك بكثير على مدونة عضو فريقنا الموهوب خافيير سواريز رويز.
يمكنك أيضًا استخدام تفاصيل النظام الأساسي للتحكم في وضع السحب على
Android و
iOS . راجع
SwipeView لمزيد من التفاصيل حول
SwipeView .
ابدأ مع Xamarin.Forms 4.4 اليوم
للبدء في Xamarin.Forms 4.4 ، قم بترقيته أو تثبيته من مدير حزم NuGet. إذا كنت تقوم بالترقية من إصدار سابق ، فضع في اعتبارك أن Xamarin.Forms و Xamarin.Essentials تعتمد الآن على دعم Android 28.0.0.3. لذلك ، ستحتاج إلى تحديثها مع أي حزم أخرى تستخدمها ، والتي قد تعتمد على مكتبات دعم Android.
تذكر تضمين وظائف المعاينة الجديدة باستخدام
SetFlags إذا كنت تريد استخدامها. للقيام بذلك على المستوى العالمي لجميع الأنظمة الأساسية في الحل الخاص بك ، أضف ما يلي إلى
App.xaml.cs :
public App() { InitializeComponent(); Device.SetFlags(new[] { "CarouselView_Experimental", "IndicatorView_Experimental", "SwipeView_Experimental" } ); MainPage = new AppShell(); }