Xamarin Forms CollectionView 自定义布局设计 [英] Xamarin Forms CollectionView Custom Layout Design
问题描述
在我设计的应用程序中,我使用 collectionview 来显示大量图像.这是我目前的设计.
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.
这是我的代码:
<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>
我不知道如何在 Xamarin 中做到这一点.并感谢您的帮助!
I've no idea how to do that in Xamarin. And appreciate the help!
推荐答案
很遗憾,Forms 中的CollectionView 直到现在仍然不支持这样的布局.但是,我们可以使用自定义渲染器作为解决方法在安卓中.
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));
}
}
}
在iOS中,由于iOS原生的UICollectionView没有这样的属性或API,所以需要手动实现(重新计算每个item的大小并设置偏移量).您可以参考 https://developer.apple.com/documentation/uikit/uicollectionview/customizing_collection_view_layouts?language=objc.我会尽快发布功能请求.
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 .
这篇关于Xamarin Forms CollectionView 自定义布局设计的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!