ios – 使用嵌套滚动视图时滚动会“卡住”

问题描述：

我有一个iOS项目用于浏览带有嵌套UIScrollViews的图像,其灵感来自着名的Apple PhotoScroller.
问题是当图像被宽度或高度缩放时,有时滚动只是“卡住”.这是一个如何在iPhone 4s上看到尺寸为935×1400的图像在高度方向上放大的示例：

(我开始向左拖动,但滚动视图立即丢弃此动作,图像“卡住”)

解决方法：

通过在缩放后将内部滚动视图的内容大小调整为最接近的整数,我找到了一种解决方法：

// Inside ImageScrollView.m

- (void)setZoomScale:(CGFloat)zoomScale
{
    [super setZoomScale:zoomScale];
    [self fixContentSizeforScrollingIfNecessary];
}

- (void)zoomToRect:(CGRect)rect animated:(BOOL)animated
{
    [super zoomToRect:rect animated:animated];
    [self fixContentSizeforScrollingIfNecessary];
}

- (void)fixContentSizeforScrollingIfNecessary
{
    if (SYstem_VERSION_LESS_THAN(@"10.2"))
    {
        CGSize content = self.contentSize;
        content.width = rint(content.width);
        content.height = rint(content.height);
        self.contentSize = content;
    }
}

但是这个修复并不完美 – 现在一些图像显示在侧面有一个像素宽的条纹.例如,在iPhone 6上,尺寸为690×14300的图像显示在底部：

另外,奇怪的是,我能够在iOS 7.0 – 10.1上重现这个问题,但一切都可以在iOS 10.2及更高版本上正常运行.

题：

那么,我做错了什么？我的修复可以改进吗？

测试项目：

我创建了简单的测试项目来说明所描述的问题 – NestedScrollingProblems.请注意我的ImageScrollView版本与Apple的版本略有不同,因为我应用了另一个缩放规则.此外,默认情况下,解决方法已注释掉.
(项目代码有点乱,抱歉)

解决方法

无法评论帖子(还没有足够的代表).

但是从它的外观(Apple的Docs)来看,这个项目会在滚动时取消图像,然后在它们将要加载时重新进入它们(参见UIScrollView.m中的第350行).而且我注意到ImageScrollView.m(第346行)中的注释明确表示此类旨在避免缓存.这是演示的实用方法,但不适用于生产或实际应用程序,它们具有ui-loading速度,就像您想要的那样.

我还注意到你的应用程序必须进一步滚动以进行分页..这可能是代码中的一些错误,或者可能是延迟主线程流动地运行分页的滞后本身.或者如果你打算有这么宽的分页门槛……我建议减少它以获得更好的用户体验,因为现代智能手机的屏幕要比iPhone 4S宽得多.

要解决这个问题,

我在SO上找到了这个post(下图)似乎有一个相当不错的obj-c缓存方法,并在应用程序启动后从这样的缓存中获取图像数据.您应该能够非常简单地将其用于启动后方法,甚至可以将其与网络一起用于从Web下载图像.您只需要确保您的UIImage视图正确链接到您使用的url字符串,或者通过每个图像视图的一组自定义字符串变量,或者通过将UImageView子类化到自定义类中,并将缓存方法添加到它使您的代码看起来更简单.这是来自iOSfleer的那篇文章的方法和NSCahe类

NSCache类：

@interface Sample : NSObject

+ (Sample*)sharedInstance;

// set
- (void)cacheImage:(UIImage*)image forKey:(Nsstring*)key;
// get
- (UIImage*)getCachedImageForKey:(Nsstring*)key;

@end

#import "Sample.h"

static Sample *sharedInstance;

@interface Sample ()
@property (nonatomic,strong) NSCache *imageCache;
@end

@implementation Sample

+ (Sample*)sharedInstance {
    static dispatch_once_t oncetoken;
    dispatch_once(&oncetoken,^{
        sharedInstance = [[Sample alloc] init];
    });
    return sharedInstance;
}
- (instancetype)init {
    self = [super init];
    if (self) {
        self.imageCache = [[NSCache alloc] init];
    }
    return self;
}

- (void)cacheImage:(UIImage*)image forKey:(Nsstring*)key {
    [self.imageCache setobject:image forKey:key];
}

- (UIImage*)getCachedImageForKey:(Nsstring*)key {
    return [self.imageCache objectForKey:key];
}

并且为了不改变你所做的太多,似乎通过将ImageScrollview.m中的displayImageWithInfo方法更改为下一个(使用缓存方法),它似乎在初始加载后工作得更好.如果我是你,我还会更进一步,并在控制器的viewDidLoad方法中实现循环样式方法,以便立即缓存这些图像,以便在启动时加快加载速度.但这取决于你.

- (void)displayImageWithInfo:(ImageItem*)imageInfo
{
    CGSize imageSize = (CGSize){.width = imageInfo.width,.height = imageInfo.height};

    // clear the prevIoUs imageView
    [self.imageView removeFromSuperview];
    self.imageView = nil;

    // reset our zoomScale to 1.0 before doing any further calculations
    self.zoomScale = 1.0;

    self.imageView = [[UIImageView alloc] initWithFrame:(CGRect){.origin.x = 0.0f,.origin.y = 0.0f,.size = imageSize}];

    UIImage *image = [[Sample sharedInstance] getCachedImageForKey:imageInfo.path];
    if(image)
    {
        NSLog(@"This is cached");
        ((UIImageView*)self.imageView).image = image;
    }
    else{

        NSURL *imageURL = [NSURL URLWithString:imageInfo.path];
        UIImage *image = [[UIImage alloc] initWithData:[NSData dataWithContentsOfURL:imageURL]];

        if(image)
        {
            NSLog(@"Caching ....");
            [[Sample sharedInstance] cacheImage:image forKey:imageInfo.path];
            ((UIImageView*)self.imageView).image = image;
        }

    }


    [self addSubview:self.imageView];

    [self configureForImageSize:imageSize];
}

我还建议在没有从滚动的超级视图中删除视图的情况下解决这个问题.添加视图是一项非常繁重的任务.再加上图像加载,对于智能手机上的小型cpu来说可能会非常沉重(因为它们还没有GPU的……).为了强调这一点,Apple甚至提到它一旦显示它就不会重新渲染UIImages,措辞很微妙here,但它显然没有提到优化删除然后在显示一次后重新添加和渲染视图(例如是在这种情况下).我认为这里的目的是显示ImageView,然后在显示控制器之后简单地更改它的图像元素.

Although image objects support all platform-native image formats,it
is recommended that you use PNG or JPEG files for most images in your
app. Image objects are optimized for reading and displaying both
formats,and those formats offer better performance than most other
image formats.

这就是为什么通常在任何可见的加载方法(如viewWillAppear和viewDidAppear)之前在其超级视图上添加/初始化视图的原因,或者如果在初始加载后完成它们很少取消初始化,它们的内容通常是唯一改变的内容,即便如此,它通常是异步完成的(如果从网上下载),或者是从缓存完成的,也可以使用一些初始化程序自动完成(你可以将它添加到我推荐的内容)：

Use the imageNamed:inBundle:compatibleWithTraitCollection: method (or
the imageNamed: method) to create an image from an image asset or
image file located in your app’s main bundle (or some other kNown
bundle). Because these methods cache the image data automatically,
they are especially recommended for images that you use frequently.

在个人笔记上,我会尝试采用UICollectionViews的方法.值得注意的是,当视图滚出窗口时,他们有代表自动处理内容缓存(这正是这个演示的内容).您也可以为这些方法添加自定义代码,以便更好地控制对这些视图的滚动效果.起初他们可能有点难以理解,但我可以证明你在这里尝试完成的东西可以用这个演示使用的一小部分代码来复制.我还假设这个演示版是在2012年建立的一个提示..它是一个非常古老的演示,UICollectionViews出现在这个演示最后一次更新时.所以我要说这是Apple一直以来的目标,因为所有面向内容的UIView子类都有来自UIScrollView的某种继承
(UICollectionView,UITableView,UITextView等).值得一看！ UICollectionViews.

ios – 使用嵌套滚动视图时滚动会“卡住”

解决方法

相关推荐