Форма Xamarin Элемент управления FFImageLoading ListView - PullRequest
Новая
       48

Форма Xamarin Элемент управления FFImageLoading ListView

2 голосов
/ 30 января 2020

Я хотел добавить CachedImage, используя FFImageLoading с моим элементом управления ListView. Я добавил три пакета и элемент управления на XAML, но просмотр списка по-прежнему отображается медленно. Есть ли еще что-то, что мне нужно сделать, чтобы FFImageLoading Cached работал с элементом управления ListView? Я пытался следовать этому примеру, но я не уверен, работает ли он

. Есть ли способ узнать наверняка, что изображения кэшируются?

https://github.com/luberda-molinet/FFImageLoading/wiki/Xamarin.Forms-Advanced#usage in-listview-with-listviewcachingstrategyrecycleelement-позволено

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");
        }
    }
}

Three packages

Ответы [ 2 ]

2 голосов
/ 31 января 2020

Согласно вашему описанию и заголовку ветки, я не знаю, почему в одном столбце три изображения, я думаю, что вы хотите отобразить изображение в ffimageloading в listview, если да, я делаю некоторый код, который вы можете взять взгляд:

Сначала установите пакет nuget Xamarin.FFImageLoading.Forms, затем вы можете использовать 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; }
}

Затем инициализировать библиотеку FFImageLoading в Android проекте Mainactivity.cs 

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

и iOS AppDelegate's 

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

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

О пользовательской ячейке просмотра я предлагаю вам взглянуть на Настройка ViewCell:

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

0 голосов
/ 07 февраля 2020

Следует помнить, что размер изображений . Если вы пытаетесь представить несколько больших изображений, даже если они кэшированы, их загрузка на страницу может занять некоторое время. Я уже сталкивался с этой проблемой, и с 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.

...