Wir haben letztes Jahr mit einem Kunden gesprochen, der jedes Jahr Dutzende von mobilen Anwendungen erstellt. Sie sagten: „Wir können uns nicht erinnern, wann wir das letzte Mal eine mobile App erstellt haben, die KEINE Karussellansicht enthielt.“ Viele von Ihnen haben uns beinahe identische Gefühle entgegengebracht. Daher freuen wir uns sehr, ein neues
CarouselView Steuerelement in Xamarin.Forms 4.4.0 einzuführen. Zusammen mit diesem haben wir auch
IndicatorView zum Anzeigen der Seiten oder Elemente im Karussell. Ebenso wie
SwipeView zum Bereitstellen von Kontextaktionen für jedes Element in einer
CollectionView . Das Release-Thema, Dinge in Bewegung zu bringen, wäre nicht vollständig, wenn nicht die neue GIF-Animationsunterstützung für Bilder vorgestellt würde. Fangen wir gleich dort an.
Xamarin.Forms 4.4 Funktionen
GIF-Animationen sind eine großartige und einfache Möglichkeit, der App Animationen hinzuzufügen, um ein besseres Benutzer-Feedback zu erhalten und die Aufmerksamkeit auf bestimmte Aktionen oder Details zu lenken. Natürlich eignet es sich auch hervorragend für Katzen-GIFs. Das
Image ist alles, was Sie zusammen mit der neuen
IsAnimationPlaying Eigenschaft
IsAnimationPlaying , um die Wiedergabe zu aktivieren und zu deaktivieren.
Animationen werden standardmäßig in einer Schleife abgespielt. Um eine Animation zu stoppen, setzen Sie
IsAnimationPlaying auf false.
Einfach so hast du Animationen! Dies ist ideal für kleinere Bilder und insbesondere für Bilder, die in Ihre Anwendung eingebettet sind. Looping-Einstellungen im GIF-Bild werden berücksichtigt. Stellen Sie sicher, dass Sie schnelle Renderer für Android verwenden, um die bestmögliche Erfahrung zu erzielen.
KarussellView und IndicatorView
Basierend auf der gleichen Basissteuerung wie
CollectionView können Sie mit dem neuen
CarouselView Ihrer App auf einfache Weise umfangreiche Karussells hinzufügen, unabhängig davon, ob Sie horizontal oder vertikal scrollen. Genau wie Sie mit
CollectionView Sie:
- 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>
Sie erhalten auch einige karussellspezifische Eigenschaften zum Steuern von Dingen wie der Entfernung, über die das vorherige und nächste Element "spähen" soll.
<CarouselView PeekAreaInsets="50" ...>
Erweiterter Tipp: Im obigen Beispiel werden Sie auch feststellen, dass das vorherige und das nächste Element skaliert und versetzt sind. Sie können dies heute mit einem Verhalten erreichen und die Layoutänderungen am Bildlauf vornehmen. Wenn wir 4.5 ausliefern, können Sie stattdessen visuelle Zustände verwenden, um dies einfacher zu machen.
Um eine
IndicatorView hinzuzufügen, platzieren Sie sie an einer
IndicatorView Stelle und ordnen sie der
CarouselView nach Namen zu:
<CarouselView x:Name="walletCarousel"> // implementation here </CarouselView> <IndicatorView IndicatorColor="LightGray" SelectedIndicatorColor="Black" IndicatorSize="10" HorizontalOptions="Center" IndicatorView.ItemsSourceBy="walletCarousel"/>
Weitere Informationen zu den Funktionen von
CarouselView und
IndicatorView finden Sie in der
Dokumentation .
Hinweis: Das zuvor veröffentlichte NuGet
Xamarin.Forms.CarouselView (Vorschau) wird archiviert und nicht mehr freigegeben. Wenn Sie dieses Steuerelement verwenden, können Sie NuGet entfernen und Ihren Code-Namespace aktualisieren. Wir haben daran gearbeitet, die API konsistent zu halten, aber Sie müssen möglicherweise einige Dinge anpassen.
GithubSwipeview
Dieses Steuerelement befindet sich normalerweise in einer Liste von Elementen, mit denen der Benutzer in eine beliebige Richtung wischen kann, um Kontextschaltflächen für allgemeine Aktionen wie Bearbeiten oder Löschen anzuzeigen. Um dieses Steuerelement zu verwenden, müssen Sie es nur um jedes Element wickeln, dem Sie das Verhalten hinzufügen möchten, und Ihre SwipeItems festlegen. Standardmäßig übernimmt ein
SwipeItem einen Titel und ein Symbol sowie einen Befehls- oder Klick-Handler. Wenn Sie etwas Komplexeres hinzufügen möchten, können Sie dies über eine Vorlage tun.
<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>
Das obige
Beispiel und mehr wurden von unserem talentierten Teammitglied Javier Suarez Ruiz gebloggt.
Sie können auch plattformspezifische Funktionen verwenden, um den Swipe-Übergangsmodus unter
Android und
iOS zu steuern. Weitere Informationen zu
SwipeView finden Sie in der
Dokumentation .
Mitwirkende
Schon vor der großen
Beteiligung am Hacktoberfest hatten wir viele fantastische Beiträge in der Pipeline, die jetzt in Xamarin.Forms 4.4.0 erscheinen.
Schauen Sie sich diese großartigen Verbesserungen von 34 Ihrer Mitentwickler an. Höhepunkte sind:
- Verwenden Sie benannte Größen mit FontImageSource - @ tuyen-vuduc
- Skalieren von Animationsmethoden ScaleXTo und ScaleYTo - @ sthewissen
- Buchstabenabstand - @ KSemenenko
- Platzhaltertextausrichtung - @ krdmllr
Starten Sie noch heute mit Xamarin.Forms 4.4
Um mit Xamarin.Forms 4.4 zu beginnen, aktualisieren oder installieren Sie es von Ihrem bevorzugten NuGet-Paketmanager. Der Übergang von 4.3.0 ist reibungslos. Wenn Sie von einer früheren Version aktualisieren, beachten Sie, dass Xamarin.Forms und Xamarin.Essentials jetzt von der Android-Unterstützung 28.0.0.3 abhängen. Daher sollten Sie diese zusammen mit allen anderen Paketen aktualisieren, die Sie verwenden und die möglicherweise von den Android-Support-Bibliotheken abhängen.
SetFlags Sie sicher, dass Sie die neuen Vorschaufunktionen mit
SetFlags wenn Sie sie verwenden möchten. Um dies global für alle Plattformen in Ihrer Lösung zu tun, fügen Sie Folgendes in Ihre
App.xaml.cs :
public App() { InitializeComponent(); Device.SetFlags(new[] { "CarouselView_Experimental", "IndicatorView_Experimental", "SwipeView_Experimental" } ); MainPage = new AppShell(); }
Wir werden GitHub beobachten, um Ihr Feedback zu diesen Vorschau-Steuerelementen bis zur nächsten Version 4.5 zu erhalten, wenn wir davon ausgehen, dass sie diesen Vorschau-Status schnell verlassen.