Xamarin Forms CollectionView Custom Layout Design

末鹿安然 提交于 2021-02-05 11:44:26

问题


In the app that I'm designing, I use collectionview to show loads of images. And this is my current design.

And this is the design I want. where the images that are shorter in height will have the next image fill up the white spaces.

Heres my code:

            <CollectionView x:Name="cv_WallPapers"
                            ItemsSource="{Binding Results, Mode=TwoWay}"
                            HorizontalOptions="FillAndExpand"
                            VerticalOptions="FillAndExpand"
                            Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
                            SelectionMode="Single"
                            SelectionChanged="cv_WallPapers_SelectionChanged"
                            >
                <CollectionView.ItemsLayout>
                    <GridItemsLayout Orientation="Vertical"
                                     Span="2"
                                     VerticalItemSpacing="5"
                                     HorizontalItemSpacing="5"/>
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>

                        <Frame Padding="4"
                               BorderColor="#34eba8"
                               BackgroundColor="#34eba8"
                               CornerRadius="10"
                               HasShadow="False">
                            <Image Source="{Binding urls.regular}"
                                   HorizontalOptions="FillAndExpand"/>
                        </Frame>

                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

I've no idea how to do that in Xamarin. And appreciate the help!


回答1:


Unfortunately,CollectionView in Forms still doesn't support such a layout until now .However, we could use Custom Renderer as a workaround in Android.

public class MyCollectionViewRenderer: CollectionViewRenderer
{
    public MyCollectionViewRenderer(Context context) : base(context)
    {

    }

    protected override void OnElementChanged(ElementChangedEventArgs<ItemsView> elementChangedEvent)
    {
        base.OnElementChanged(elementChangedEvent);

        if(elementChangedEvent.NewElement!=null)
        {
            this.SetLayoutManager(new StaggeredGridLayoutManager(2, 1));
        }

    }
}

In iOS , because the UICollectionView in native iOS doesn't have such a property or API , so we need to implement it manually (re-calculate the size of each item and set the offset) . Which you could refer https://developer.apple.com/documentation/uikit/uicollectionview/customizing_collection_view_layouts?language=objc . And I will post the feature request as soon as possible .



来源:https://stackoverflow.com/questions/60718289/xamarin-forms-collectionview-custom-layout-design

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!