Question

我有一个JSON，其中包含图像缩略图URL和一些文本，现在我必须将其呈现为图像库，如电话库。我研究了很多关于网格布局但没有找到一种方法来动态创建固定宽度和高度的网格数量，可以显示图像。任何人都可以告诉我设计包含图像数量的图库类型页面的最佳组件是什么？

Answer 1

您可以使用this nuget包并在网格中显示图像。样例代码：

<flv:FlowListView FlowColumnCount="3" SeparatorVisibility="None" HasUnevenRows="false"
FlowItemTappedCommand="{Binding ItemTappedCommand}" 
FlowItemsSource="{Binding PhotosList}" >
            <flv:FlowListView.FlowColumnTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Image Source="{Binding Image}" HeightRequest="50" WidthRequest="50"/>
                        <Label Text="{Binding Name}" TextColor="Black" FontSize="Medium" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" HorizontalOptions="Fill" />
                    </StackLayout>
                </DataTemplate>
          </flv:FlowListView.FlowColumnTemplate>
</flv:FlowListView>

PhotosList将是您的“ URL”和“文本”列表。

Answer 2

Xamarin.Droid中有一个画廊控件请参阅示例 - http://developer.xamarin.com/guides/android/user_interface/gallery/

如果这不是您要查找的内容，那么您可以使用自己的Listview图片。并且可以显示完整的图像。请参阅xamarin.form示例中包含图像的列表视图示例。

如果你需要多列使用水平渲染中的堆栈布局和列表视图内部，可能是3.

这将为您提供3列和无限可滚动行。

编辑： 您必须创建一个ViewModel，该ViewModel将具有您要绑定到的具有公共属性的类。将JSON反序列化为此ViewModel类的IEnumerable并绑定到listview。在Listview内，您必须使用ImageCell

对于创建图像，因为您已经提到它来自URL，以下语法可以帮助您：

  webImage.Source = new UriImageSource {
    Uri = new Uri("http://xamarin.com/content/images/pages/forms/example-app.png"),
    CachingEnabled = true,
    CacheValidity = new TimeSpan(5,0,0,0)
};

employee example将ListView与一张图片和2张labels绑定在一起。

class EmployeeCell : ViewCell
{
    public EmployeeCell()
    {
        var image = new Image
                    {
                        HorizontalOptions = LayoutOptions.Start
                    };
        image.SetBinding(Image.SourceProperty, new Binding("ImageUri"));
        image.WidthRequest = image.HeightRequest = 40;

        var nameLayout = CreateNameLayout();

        var viewLayout = new StackLayout()
                         {
                             Orientation = StackOrientation.Horizontal,
                             Children = { image, nameLayout }
                         };
        View = viewLayout;
    }    
}

编辑2： 如果您要渲染可变数量的图像网址，那么最好选择TableView。 TableView没有绑定到数据源，您可以通过解析JSON对象根据您的要求创建单个单元格。 ie：每个JSON对象都是TableSection，每个Image都是ImageCell

Answer 3

我最终使用此代码将源JSON数组拆分为3列

return myGroupedGalleryDto.Select ((row, index) => new {row, index})
                    .GroupBy (g => g.index / 3, i => i.row)
                    .Select ((v, k) => new GalleryDto () {
                    Key = k,
                    Images = v.ToList ()
                }).ToList ();

然后在XAML中，

<Grid x:Name="grid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Image Grid.Column="0" Source="{Binding Images[0].MyImageUrl}" />
    <Image Grid.Column="1" Source="{Binding Images[1].MyImageUrl}" />
    <Image Grid.Column="2" Source="{Binding Images[2].MyImageUrl}" />
</Grid>

使用以下ViewModels

public class GalleryDto
{
    public int ID { get; set; }

    public string MyImageUrl { get; set; }
}

public class GroupedGalleryDto
{
    public int Key { get; set; }

    public List<GalleryDto> Images { get; set; }
}

在xamarin.forms中设计图库

3 个答案: