UITableView с изображениями прокручивается очень медленно Xamarin.iOS

Question

Я разрабатываю приложение для составления списков уроков, используя Xamarin.Ios и Visual Studio для Mac.

Моим основным экраном приложения является ExploreTableView, где я в настоящее время перечисляю все уроки, которые я вставил через соответствующую таблицу Azure Mobile Service Easy Table.В моем TableView у меня есть немного сложная пользовательская ячейка, в которой должны отображаться «Тема урока», «Имя учителя», «Рейтинг урока», «Стоимость урока» и другие переменные.Я почти успешно все реализовал, и это работает.Вот структура ячейки:

Предварительный просмотр ячейки

Я учусь в средней школе, не очень разбираюсь в программировании xamarin.ios, но сегодня, после Youtube MicrosoftРуководство, мне также удалось реализовать хранилище BLOB-объектов, в котором я хранил обложки уроков, которые я могу найти, чтобы показать их в левой части CustomCell.

Проблема в том, что с этого момента прокрутка TableView стала очень медленной, в ячейке правильно отображаются изображения, хранящиеся в моем хранилище Blob Azure, но, похоже, я что-то делаю неправильно в способе загрузки TableViewячейки.

Я пытался прочитать некоторые руководства, как здесь, по переполнению стека, так и по Документация для разработчиков Microsoft , но я, честно говоря, не могу понять, как работает система кеша и какчтобы реализовать его, поэтому я здесь, чтобы спросить, может ли кто-нибудь помочь мне решить проблему с производительностью моего кода, или посоветовать несколько простых руководств в Интернете.

Вот мой ExploreViewController:

using Foundation;
using System;
using System.Collections.Generic;
using UIKit;
using LessonApp.Model;using System.Threading;
using System.Threading.Tasks;

namespace LessonApp.iOS
{
public partial class ExploreViewController : UITableViewController
{
    List<LessonsServices> lessonsServices;

    public LessonsServices lessonService;


    public ExploreViewController(IntPtr handle) : base(handle)
    {
        lessonsServices = new List<LessonsServices>();
    }

    public override async void ViewDidLoad()
    {
        base.ViewDidLoad();

        lessonsServices = await LessonsServices.GetLessonsServices();
        //lessonsServices = await 
        TableView.ReloadData();
    }

    //LISTING ZONE

    public override nint RowsInSection(UITableView tableView, nint section)
    {
        return lessonsServices.Count;
    }


    public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
    {
        var cell = tableView.DequeueReusableCell("servicePreviewCell") as LessonsServicesViewCell;

        var lessonService = lessonsServices[indexPath.Row]; 

 //LESSON TITLE
        cell.titleLabel.Text = lessonService.Subject + " Lesson"; //e.g. "Math Lesson"

        //TEACHER NAME AND LOCATION

        cell.teacherNameLocationLabel.Text = lessonService.Teacher + " • " + lessonService.Location;

        // PRO TEACHER BADGE

        switch (lessonService.IsPro)
        {
            case true:
                cell.proLabel.Hidden = false;
                break;

            case false:
                cell.proLabel.Hidden = true;
                break;

            default:
                cell.proLabel.Hidden = true;
                break;

        }

        cell.startingFromPriceLabel.Text = "Starting from " + lessonService.LowestPrice.ToString() + " €/h";

        //Showing Up the Lesson Cover Image in the cell

        var bytes = Task.Run(() => ImagesManager.GetImage(lessonService.Id+".jpeg")).Result; //Here I call the GetImage method, which connects to the Blob Storage Container and retrieve the image that has the same ID of the Lesson Service
        var data = NSData.FromArray(bytes);
        var uiimage = UIImage.LoadFromData(data);
        cell.teacherProfileImageView.Image = uiimage;

        return cell; 

    }


    //I need this Method to force the cell height
    public override nfloat GetHeightForRow(UITableView tableView, NSIndexPath indexPath)
    {
        return 120;
    }

    //A Segue for another screen, that will copy some information from this page to another  
    public override void PrepareForSegue(UIStoryboardSegue segue, NSObject sender)
    {
        if (segue.Identifier == "ServiceDescriptionPageSegue")
        {
            var selectedRow = TableView.IndexPathForSelectedRow;
            var destinationViewController = segue.DestinationViewController as ServiceDescriptionView;
            destinationViewController.lessonService = lessonsServices[selectedRow.Row];


        }

        base.PrepareForSegue(segue, sender);
    }
  }
}

Спасибо за внимание!

Answer 1

GetCell вызывается один раз для каждой строки, видимой на экране, и вызывается еще раз, когда во время прокрутки появляются новые строки.

Вы вызываете GetImage в GetCell, используя:

Task.Run(() => ImagesManager.GetImage(lessonService.Id+".jpeg")).Result;

Таким образом, GetCell ожидает возврата GetImage, что приводит к медленной прокрутке.

Быстрое решение состояло бы в том, чтобы сделать ваш метод GetImage асинхронным и вызвать его внутри GetCell асинхронно, а затем вызвать Image Update для mainthread после завершения.

Task.Run(async () => {
    var bytes = await ImagesManager.GetImage(lessonService.Id + ".jpeg");
    var data = NSData.FromArray(bytes);
    var uiimage = UIImage.LoadFromData(data);
    InvokeOnMainThread(() => {
      cell.teacherProfileImageView.Image = uiimage;
    });
});