带有图像的 UITableView 滚动非常缓慢 Xamarin.iOS

Question

我正在为 Mac 使用 Xamarin.Ios 和 Visual Studio 开发课程列表应用程序。

我的主应用程序屏幕是一个探索Table视图，我目前在其中列出了我通过适当的 Azure Mobile Service Easy Table 插入的所有课程。在我的 Table 视图中，我有一个有点复杂的自定义单元格，需要显示 "Lesson Subject"、"TeacherName"、"Lesson Rating"、"Lesson cost" 和其他变量。我几乎成功地实施了所有这些，并且它有效。这里的细胞结构：

Cell Preview

我是一名高中 IT 学生，在 xamarin.ios 编程方面不是很专家，但今天，根据 Youtube Microsoft 指南，我还成功实现了 Blob 存储，我在其中存储了课程封面，我可以检索它们以将它们显示在 CustomCell 的左侧。

问题是，从现在开始，Table视图滚动变得非常缓慢，单元格正确显示存储在我的 Blob Azure 存储中的图像，但似乎我在TableView 加载单元格的方式。

我试图阅读一些指南，包括 Stack Overflow 和 Microsoft Developer Documentation，但老实说，我无法理解缓存系统的工作原理，以及如何实现它，所以我来了询问是否有人可以帮助我解决我的代码性能问题，或者给我一些易于遵循的在线指南。

这是我的 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 为屏幕上可见的每一行调用一次，并且在滚动过程中新行进入视图时调用额外的次数。

您正在调用 GetCell 中的 GetImage 使用：

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

所以 GetCell 正在等待 GetImage return 导致滚动变慢。

快速解决方案是使您的 GetImage 方法异步并在 GetCell 中异步调用它，然后在完成后在主线程上调用图像更新。

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

带有图像的 UITableView 滚动非常缓慢 Xamarin.iOS

UITableView with Images scrolls very slowly Xamarin.iOS

c#

ios

uitableview

xamarin.ios

custom-cell