in C#, Daj Się Poznać 2017

Poziomo przewijana lista z Syncfusion w Xamarin.Forms #dsp2017

Chciałbym w swojej aplikacji mieć przewijaną poziomą listę bindującą się z kolekcją wybranych seriali (taką jak na obrazku poniżej). Niestety spędziłem masę czasu w poszukiwaniu prostego i działającego rozwiązania, jednak żadne nie odpowiadało moim prostym potrzebom. Jednym z nich było użycie ListView obróconego raz o 270 stopni z zawartością obróconą o kolejne 90 stopni. Niestety bezskutecznie próbowałem ustawić jego parametry i wymiary, by pokazać obrazki tak jak oczekiwałem. Znalazłem też wersję poprawioną i jeszcze jedną wykorzystującą RelativeLayout, ale tu również poległem w boju. Aktualnie na forum Xamarina poleca się wykorzystanie RecyclerView, ale z tego co rozumiem działa to tylko na Androidzie.

Fajną alternatywą było użycie CarouselView, jednak chciałem mieć możliwość pokazania kilku seriali jednocześnie. Moje marne efekty można zobaczyć poniżej. Od góry jest CarouselView, potem ListView, a na koniec nieudane ListView wewnątrz RelativeLayoutu.

 

Ostatecznie dopiero na drugi dzień moich poszukiwań znalazłem nugetową paczkę Syncfusion SfListView, a cały pakiet Syncfusion Essentials jest za darmo dla firm z dochodem poniżej $1 mln w ramach Community Licence – tak więc jeszcze się do nich zaliczam 😉

Po pomyślnym przejściu manuala udało mi się osiągnąć coś takiego.

 

Mnie to na razie satysfakcjonuje i daje podstawę do dalszej pracy. Poniżej znajduje się listing przykładowej strony z listą zbindowaną do standardowej kolekcji ObservableCollection TvShows. Z czasem ostateczna wersja pojawi się na githubie.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             x:Class="KiedySerial.Views.ExamplePage"
             Title="ExamplePage">
        <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Label Text="Favourite series" FontSize="Large"/>
            <syncfusion:SfListView x:Name="listView"
                                   Orientation="Horizontal" 
                                   ItemSize="150"
                                   ItemsSource="{Binding TvShows}">
                <syncfusion:SfListView.ItemTemplate>
                    <DataTemplate>
                        <Grid Padding="10">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="100"/>
                                <RowDefinition Height="50"/>
                            </Grid.RowDefinitions>
                            <Image Grid.RowSpan="2" Aspect="AspectFill" Source="{Binding PosterUrl}" WidthRequest="150" HeightRequest="150"/>
                            <StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="12">
                                <Label TextColor="White" Text="{Binding Title}" FontSize="16" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
                            </StackLayout>
                        </Grid>
                    </DataTemplate>
                </syncfusion:SfListView.ItemTemplate>
            </syncfusion:SfListView>
        </StackLayout>
</ContentPage>

 

  • kuba

    Chyba lepiej jakbyś skorzystał z wbudowanych rozwiązań w bibliotekę, spróbuj dać HorizontallScrollView a do niego dać LinearLayout i jego atrybut orientation ustawić na “horizontal”

    • Dominik

      Spróbuję tak, jak proponujesz, choć z SfListView jest to bardzo wygodne i takie “płynne”. Większy problem mam aktualnie z CarouselView (a przecież jest od Xamarina), ponieważ akcję da się tylko przypisać do zmiany obrazka (swipe’nięcia), a nie do kliknięcia. Dodałem gesture recognizer do grida wewnątrz, ale nie jestem w stanie rozpoznać, podczas wyświetlania którego filmu zostało zarejestrowane tapnięcie. Będę nad tym siedział, ale na razie nie wymyśliłem na to sposobu.

      Przez błędne ustawienia disqusa nie dostałem powiadomienia o Twoim komentarzu, wybacz 🙁