Xamarin 窗体 FFImageLoading ListView 控件

Question

我想通过我的 ListView 控件使用 FFImageLoading 添加 CachedImage。我已经在 XAML 上添加了三个包和控件，但 listview 仍然显示缓慢，我还需要为 FFImageLoading Cached 做些什么才能使用 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

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

首先请安装Xamarin.FFImageLoading.Forms bu 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项目Mainactivity.cs中初始化FFImageLoading库

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和docs，但这里是你需要知道的：

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

所以如果你的图片是1920x1080，但是你的view size是例如：300x50，如果你把DownsampleToViewSize设置为True，它会为你缓存300x50的版本，会提高图片加载的速度，这是 XAML 代码：

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

---

回答您的问题：

有没有办法确定图像正在被缓存？

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