FFImageLoading ListView控件

Question

我想使用CachedImage控件使用FFImageLoading添加ListView。我已经在XAML上添加了三个包和控件，但是列表视图仍然显示得很慢，对于FFImageLoading缓存的listview控件，还有什么需要做的吗？我试着遵循这个样本，但我不确定它是否有效

是否有一种方法可以确定图像正在被缓存？

https://github.com/luberda-molinet/FFImageLoading/wiki/Xamarin.Forms-Advanced#usage-in-listview-with-listviewcachingstrategyrecycleelement-enabled

MainActivity.cs

CachedImageRenderer.Init(true);

AppDelegate.cs

 CachedImageRenderer.Init();

XAML

<converters:FastTemplateCell AutomationId="DownloadListItemTemplateCell">
                        <converters:FastTemplateCell.View>
                                            <Grid Padding="5">
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="15"></RowDefinition>
                                                </Grid.RowDefinitions>
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="15" />
                                                </Grid.ColumnDefinitions>
                                                <forms:CachedImage Grid.Row="0" Grid.Column="0" IsVisible="{Binding IsSelected, Converter={StaticResource InvertedBooleanConverter}}" AutomationId="GuidelineDownloadIcon" Source="arrow_start.png"/>
                                                <forms:CachedImage Grid.Row="0" Grid.Column="0" IsVisible="{Binding IsGuidelineDownloaded}" AutomationId="GuidelineDownloadSuccessIcon" Source="circle_done.png"/>
                                                <forms:CachedImage Grid.Row="0" Grid.Column="0" IsVisible="{Binding IsGuidelineDownloadFailed}" AutomationId="GuidelineDownloadFailIcon" Source="failed.png" />

                                            </Grid>

                                            <Label LineBreakMode="WordWrap" Grid.Column="1" Text="{Binding GuidelineChildName}" AutomationId="DownloadGuidelineType" TextColor="#337ab7">
                                        <Label.FontSize>
                                            <OnPlatform x:TypeArguments="x:Double">
                                                <On Platform="iOS" Value="16" />
                                                <On Platform="Android" Value="15" />
                                            </OnPlatform>
                                        </Label.FontSize>
                                        <Label.VerticalOptions>
                                            <OnPlatform x:TypeArguments="LayoutOptions">
                                                <On Platform="iOS" Value="CenterAndExpand" />
                                                <On Platform="Android" Value="Start" />
                                            </OnPlatform>
                                        </Label.VerticalOptions>
                                    </Label>
                                </Grid>
                            </Grid>
                        </converters:FastTemplateCell.View>
                    </converters:FastTemplateCell>

.cs

public class FastTemplateCell : ListViewTemplateCell
{
    private FFImageLoading.Forms.CachedImage imageDownloadIcon;
    private FFImageLoading.Forms.CachedImage imageDownloadSuccessIcon;
    private FFImageLoading.Forms.CachedImage imageDownloadFailIcon;

    protected override void OnBindingContextChanged()
    {
        base.OnBindingContextChanged();

        this.EnsureCachedElements();

        if (dataimageDownloadIcon != null)
        {
            this.imageDownloadIcon.Source = "arrow_start.png";
        }

        if (dataimageDownloadSuccessIcon != null) 
        { 
            this.imageDownloadSuccessIcon.Source = "circle_done.png";
        }

        if (dataimageDownloadFailIcon != null)
        {
            this.imageDownloadFailIcon.Source = "failed.png";
        }
    }

    private void EnsureCachedElements()
    {
        if (this.imageDownloadIcon == null)
        {
            this.imageDownloadIcon = this.View.FindByName<CachedImage>("imageDownloadIcon");
        }
        if (this.imageDownloadSuccessIcon == null)
        {
            this.imageDownloadSuccessIcon = this.View.FindByName<CachedImage>("imageDownloadSuccessIcon");
        }
        if (this.imageDownloadFailIcon == null)
        {
            this.imageDownloadFailIcon = this.View.FindByName<CachedImage>("imageDownloadFailIcon");
        }
    }
}

​

​

Answer 1

要记住的一件事是图像的大小，，如果您试图呈现一些大的图像，即使它们是缓存的，也可能需要一些时间才能加载到页面中，我以前也经历过这个问题，而对于FFImage，您可以使用DownsampleToViewSize，您可以在这里和文档中获得更详细的外观，但是这里是您需要知道的：

如果设置为真图像，则将大小调整为图像视图大小。

因此，如果您的图像是1920x1080，但是视图大小是: 300x50，如果您将DownsampleToViewSize设置为True，它将为您缓存300x50版本，它将提高图像加载的速度，以下是XAML代码：

<ffimageloading:CachedImage
    LoadingPlaceholder="image_placeholder.png"
    Aspect="AspectFill"
    DownsampleToViewSize="True"
    Source="{Binding ThumnailImage}">
</ffimageloading:CachedImage>

在回答你的问题时：

是否有一种方法可以确定图像正在被缓存？

我不确定您是否可以在内存使用中看到这种情况，但是您可以尝试将其与普通的和缓存的内存进行比较，并查看第二次图像加载速度是否更快。至于我所看到的，你已经做了正确的分期付款的金块包为FFImageLoading。

Answer 2

根据您的描述和线程的标题，我不知道为什么同一列中有三个图像，我猜您想要在listview中显示图像，如果是，我做一些代码，您可以查看：

首先，请安装Xamarin.FFImageLoading.Forms bu软件包，然后您可以使用CachedImage。

 <ListView HasUnevenRows="True" ItemsSource="{Binding images}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
                            <Label Text="{Binding title}" />
                            <ff:CachedImage Source="{Binding imagepath}" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

 public partial class Page4 : ContentPage
{
    public ObservableCollection<imagemodel> images { get; set; }
    public Page4()
    {
        InitializeComponent();
        images = new ObservableCollection<imagemodel>()
        {
            new imagemodel(){title="image 1",imagepath="a11.jpg"},
            new imagemodel(){title="image 2",imagepath="a12.jpg"},
            new imagemodel(){title="image 3",imagepath="a13.jpg"}
        };
        this.BindingContext = this;
    }
}
public class imagemodel
{
    public string title { get; set; }
    public string imagepath { get; set; }
}

然后在Android项目Mainactivity.cs中初始化Mainactivity.cs库。

FFImageLoading.Forms.Platform.CachedImageRenderer.Init(true);

和iOS应用程序代表的

FFImageLoading.Forms.Platform.CachedImageRenderer.Init();

https://heartbeat.fritz.ai/using-ffimageloading-in-xamaring-forms-for-caching-and-optimizing-images-48e381be226b

关于自定义视图单元格，我建议您查看一下自定义viewcell：

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/viewcell