الحصول على التحرك مع Xamarin.Forms 4.4

كنا نتحدث مع عميل في العام الماضي يقوم ببناء عشرات تطبيقات الهاتف المحمول كل عام. قالوا ، "لا يمكننا تذكر آخر مرة قمنا فيها بإنشاء تطبيق جوال لا يتضمن عرضًا دائريًا." لقد عبر الكثير منكم عن مشاعر متطابقة تقريبًا بالنسبة لنا. لذلك ، يسعدنا جدًا إدخال تحكم CarouselView جديد في Xamarin.Forms 4.4.0. جنبا إلى جنب مع هذا لدينا أيضا IndicatorView لعرض الصفحات أو العناصر في دائري. وكذلك SwipeView لتوفير الإجراءات السياقية لأي عنصر في CollectionView . لن يكتمل موضوع الإصدار الخاص بتحريك الأمور دون عرض دعم GIF الجديد للصور. لنبدأ هناك.

Xamarin.Forms 4.4 الميزات

تعد رسوم GIF المتحركة طريقة رائعة وبسيطة لإضافة رسوم متحركة إلى التطبيق للحصول على تعليقات أفضل من المستخدمين ، وتلفت الانتباه إلى بعض الإجراءات أو التفاصيل. إنه أمر رائع أيضًا بالنسبة إلى صور GIF للقطط ، بالطبع. Image هي كل ما تحتاجه مع خاصية IsAnimationPlaying الجديدة لتمكين التشغيل وتعطيله.
سوف الرسوم المتحركة حلقة افتراضيا. لإيقاف رسم متحرك ، اضبط IsAnimationPlaying على خطأ.



تماما مثل أن لديك الرسوم المتحركة! هذا مثالي للصور الصغيرة ، وخاصة تلك المضمنة في التطبيق الخاص بك. يتم احترام إعدادات حلقات في صورة GIF. تأكد من أنك تستخدم عارضين سريعة على Android للحصول على أفضل تجربة.

CarouselView و IndicatorView

يقوم CarouselView الجديد ، CarouselView على نفس التحكم الأساسي في CollectionView ، ببساطة إضافة دوارات غنية إلى تطبيقك بغض النظر عما إذا كنت تقوم بالتمرير أفقياً أو رأسياً. كما تحصل مع 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

يوجد عنصر التحكم هذا عادةً في قائمة العناصر للسماح للمستخدم بالتحريك في أي اتجاه للكشف عن أزرار السياق لإجراءات شائعة مثل التحرير أو الحذف. من أجل استخدام عنصر التحكم هذا ، قم فقط بلفه حول أي عنصر ترغب في إضافته إلى السلوك ، وتحديد SwipeItems الخاص بك. افتراضيًا ، يأخذ 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 ، راجع الوثائق .

المساهمون

حتى قبل الإقبال الكبير على Hacktoberfest ، كان لدينا الكثير من المساهمات الرائعة في خط الأنابيب التي تظهر الآن في Xamarin.Forms 4.4.0. تحقق من هذه التحسينات الرائعة من 34 من زملائك المطورين. تشمل النقاط البارزة ما يلي:

• استخدم الأحجام المسماة مع FontImageSource - @ tuyen-vuduc
• تحجيم أساليب الرسوم المتحركة ScaleXTo و ScaleYTo - @ sthewissen
• تباعد الحروف - @ KSemenenko
• محاذاة نص العنصر النائب - @ krdmllr

ابدأ مع Xamarin.Forms 4.4 اليوم

للبدء في Xamarin.Forms 4.4 ، قم بالتحديث أو التثبيت من مدير حزم NuGet المفضل لديك. الانتقال من 4.3.0 على نحو سلس. إذا كنت تقوم بالتحديث من إصدار سابق ، فلاحظ أن 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(); } 

سنراقب GitHub لتعليقاتك على عناصر التحكم في المعاينة هذه من الآن وحتى الإصدار التالي ، 4.5 عندما نتوقع نقلها بسرعة خارج حالة المعاينة هذه.