SDWebimage scrolling

Question

I use SDWebimage to load and cache pictures, and now I am looking for a way to swipe/scroll through the images. I've tried different approaches but I can't seem to get it working, can someone help me with this?

Answer 1

You just do your scrolling image browser as you otherwise would, but instead of setting the image property synchronously, you just call the SDWebImage method setImageWithURL (from its UIImageView category).

To show you a quick and dirty implementation, create a UIScrollView, turn on paging, and in viewDidLoad you can set the content size and load the first image, like so:

[self.scrollView setContentSize:CGSizeMake(self.view.bounds.size.width * [self.objects count],
                                           self.view.bounds.size.height)];

dispatch_async(dispatch_get_main_queue(), ^{
    ImageBrowserObject *object = self.objects[0];
    [object scrollView:self.scrollView addImageViewIfNeededForIndex:0];
});

You also want to set up your controller as a delegate for that scroll view and then handle the scrollViewDidScroll event:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    static NSInteger lastKnownIndex = -1;

    NSInteger currentIndex  = scrollView.contentOffset.x / scrollView.frame.size.width + 0.5f;
    NSInteger nextIndex = currentIndex + 1;
    NSInteger prevIndex = currentIndex - 1;
    if (prevIndex < 0) prevIndex = 0;

    if (currentIndex == lastKnownIndex)
        return;

    // add the imageviews we need, remove the ones we don't

    [self.objects enumerateObjectsUsingBlock:^(ImageBrowserObject *object, NSUInteger idx, BOOL *stop) {
        if (idx >= prevIndex && idx <= nextIndex)
            [object scrollView:scrollView addImageViewIfNeededForIndex:idx];
        else
            [object scrollView:scrollView removeImageViewIfNeededForIndex:idx];
    }];

    lastKnownIndex = currentIndex;
}

And my ImageBrowserObject is defined as follows:

@interface ImageBrowserObject : NSObject

@property (nonatomic, strong) NSString *title;
@property (nonatomic, strong) NSURL *url;
@property (nonatomic, weak) UIImageView *imageView;

@end

@implementation ImageBrowserObject

- (id)initWithTitle:(NSString *)title URL:(NSURL *)url
{
    self = [super init];
    if (self) {
        _title = title;
        _url = url;
    }
    return self;
}

- (void)scrollView:(UIScrollView *)scrollView addImageViewIfNeededForIndex:(NSInteger)index
{
    if (self.imageView)
        return;

    CGRect frame = CGRectMake(index * scrollView.frame.size.width,
                              0.0,
                              scrollView.frame.size.width,
                              scrollView.frame.size.height);
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:frame];
    [scrollView addSubview:imageView];
    [imageView setImageWithURL:self.url placeholderImage:[UIImage imageNamed:@"placeholder.png"]];
    self.imageView = imageView;
}

- (void)scrollView:(UIScrollView *)scrollView removeImageViewIfNeededForIndex:(NSInteger)index
{
    if (!self.imageView)
        return;

    [self.imageView removeFromSuperview];
    self.imageView = nil;
}

@end

This is a pretty simplistic implementation, but I suspect you get the idea.