2

我想使用 FFImageLoading 和我的 ListView 控件添加 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");
        }
    }
}

三包

4

2 回答 2

3

根据你的描述和帖子的标题，我不知道为什么同一列中有三个图像，我猜你想在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

于 2020-01-31T05:49:52.703 回答
0

要记住的一件事是图像的大小，如果您尝试呈现一些大图像，即使它们被缓存，也可能需要一些时间才能将它们加载到页面中，我之前遇到过这个问题，并且使用 FFImage ，您可以使用，您可以在此处和文档DownsampleToViewSize中进行更详细的查看，但这里是您需要了解的内容：

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

所以如果你的图片是 1920x1080，但是你的视图大小例如：300x50，如果你设置DownsampleToViewSize为True，它会为你缓存 300x50 的版本，它会增加图片加载的速度，这里是 XAML 代码：

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

并回答您的问题：

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

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

于 2020-02-07T18:43:12.997 回答