Xamarin 窗体 FFImageLoading ListView 控件

Question

我想在我的 ListView 控件中使用 FFImageLoading 添加 CachedImage。我已经在 XAML 上添加了三个包和控件，但 listview 仍然显示缓慢是否还有其他我需要做的事情才能使 FFImageLoading Cached 与 ListView 控件一起使用？我尝试按照此示例进行操作，但我不确定它是否有效

is there a way to know for sure that the images are being cached?

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

根据你的描述和帖子的标题，我不知道为什么同一列中有三个图像，我猜你想在listview中的ffimageloading中显示图像，如果是的话，我做了一些代码你可以看看：

首先，请安装Xamarin.FFImageLoading.Formsbu nuget包，然后就可以使用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项目中的FFImageLoading库Mainactivity.cs

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

和iOS AppDelegate的

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

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

关于自定义viewcell，我建议你可以看看Customizing a ViewCell:

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

Answer 2

要记住的一件事是图像的大小，如果您尝试展示一些大图像，即使它们被缓存，也可能需要一些时间来加载他们在页面中，我以前遇到过这个问题，使用FFImage，你可以使用DownsampleToViewSize，你可以更详细地查看here and in the docs，但这里是你需要知道的：

If set to true image will resize to an image view size.

因此，如果您的图像是 1920x1080，但您的视图尺寸是例如：300x50，如果您将 DownsampleToViewSize 设置为 True，它会为您缓存 300x50 版本，它会增加图片加载速度，这里是 XAML 代码：

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

并回答您的问题：

is there a way to know for sure that the images are being cached?

我不确定您是否可以在内存使用中看到这一点，但您可以尝试与普通图片和缓存图片进行比较，看看第二次图像加载速度是否更快。对于我所看到的，您已经为 FFImageLoading 正确安装了 nuggets 包。

Xamarin 窗体 FFImageLoading ListView 控件

Xamarin form FFImageLoading ListView control

listview

xamarin.forms

ffimageloading