如何让 Android 中的 Xamarin.Forms CarouselPage 与许多图像一起平滑滚动？答案

【问题标题】：How do I get Xamarin.Forms CarouselPage in Android to scroll smoothly with many Images?如何让 Android 中的 Xamarin.Forms CarouselPage 与许多图像一起平滑滚动？
【发布时间】：2015-02-21 18:30:14
【问题描述】：

我一直致力于优化我的 Xamarin.Forms 应用，以及我的 CarouselPage 如何滚动图像。我已经实现了一次仅延迟加载 3 张图像的逻辑（轮播中的某个时间点可能有 100 张）。

currentIndex 是滑动前页面的索引。
WINDOW_SIZE 是一个常数，表示要向左侧加载多少图像，并且当前页面的右侧。
CustomContent 是填充轮播的 ContentPage 类。
layout 是 CustomContent 内部的私有 RelativeLayout 在构造函数中构建的 ContentPage。

这是在我的 Carousel 的 OnCurrentPageChanged() 事件中调用的代码：

protected override void OnCurrentPageChanged ()
{
        base.OnCurrentPageChanged();
        int newIndex = this.Children.IndexOf(this.CurrentPage);

        if (newIndex > currentIndex) 
        {
                currentIndex++;
                UnloadImages();
                LoadImages();
        }
        else if (newIndex < currentIndex)
        {
                currentIndex--;
                UnloadImages();
                LoadImages();
        }
}

这里是被调用的函数：

private void LoadImages ()
{
        int lowIndex = currentIndex - WINDOW_SIZE >= 0 ? currentIndex - WINDOW_SIZE : 0;
        int highIndex = currentIndex + WINDOW_SIZE <= this.Children.Count() - 1 ? currentIndex + WINDOW_SIZE : this.Children.Count() - 1;

        for (int i = lowIndex; i <= highIndex; i++)
        {
                CustomContent custom = (CustomContent) this.Children[i];
                custom.LoadImage();
        }
}

private void UnloadImages ()
{
        int lowIndex = currentIndex - WINDOW_SIZE >= 0 ? currentIndex - WINDOW_SIZE : 0;
        int highIndex = currentIndex + WINDOW_SIZE <= this.Children.Count () - 1 ? currentIndex + WINDOW_SIZE : this.Children.Count () - 1;

        if (lowIndex - 1 >= 0) 
        {
                CustomContent custom = (CustomContent) this.Children[lowIndex - 1];
                custom.UnloadImage();
        }

        if (highIndex + 1 <= thoughts.Count () - 1) 
        {
                CustomContent thought = (CustomContent) this.Children[highIndex + 1];
                custom.UnloadImage();
        }
}

这是在填充轮播的 (CustomContent) ContentPages 中调用的代码：

public void LoadImage ()
{
        this.Content = layout;
}

public void UnloadImage ()
{
        this.Content = null;
}

【问题讨论】：

标签： xamarin xamarin.forms

【解决方案1】：

所以...图片是有问题的，因为它们不会被自动处理掉。

我的建议是为 ImageView 提供一个自定义渲染器，以检测它何时包含 ContentPage 出现和消失，并酌情加载/处置图像。

【讨论】：

好建议，我没有想到自定义渲染器。我会看一看，试试看，然后告诉你。谢谢！

【解决方案2】：

此代码运行良好，几乎没有小问题。有时，在快速滑动时不会调用 OnCurrentPageChanged，并且 currentIndex 会不同步。为了纠正这个问题，我更改了 currentIndex：

protected override void OnCurrentPageChanged () {
    base.OnCurrentPageChanged();
    int newIndex = this.Children.IndexOf(this.CurrentPage);
    //Set currentIndex, no need to use increment,decrement
    currentIndex = newIndex;
    UnloadImages();
    LoadImages();
}

【讨论】：

啊，是的，当然。这是一个更好的写法。我仍然遇到的问题是性能不是那么好。刷的时候很流畅，但是放手的时候有一些抖动。你注意到了吗？
嗯，我没注意到。可能是因为 unloadImages 函数在这种情况下提前触发，尝试在那里添加小的延迟，不知道会是什么。或者您的 ContentPages 可能更复杂。