How to create slideshow of images within scrollview with autolayout?

Question

I have a collectionview that loads a series of cells. Some of the cells will have static images (which works well), but some might have multiple images that will need to be swipeable.

enter image description here

The UICollectionViewCell is the base view, the UIScrollView is within it (pinned to the top, left, bottom, and right of its superview).

Adding a UIImageView to the scrollview, I want to pin it to the top and left of the scrollview, but have its width and height be the same as the collection view cell, not the content size of the scrollview.

Then I'd like two additional images to be pinned to the top of the collection view cell, and the left closest view (in this case, the prior UIImageView).

The Storyboard would look something like this:

enter image description here

(with the other images off-screen and not displayed).

Jeffrey Berthiaume Jeffrey Berthiaume · Accepted Answer · 2014-11-24T15:51:03

I decided to add the images via code:

There's a parent view, and a scrollview (attached to an IBOutlet).

The CollectionViewCell subclass contains:

@synthesize lbl, sv, pageControl;

- (void) awakeFromNib {
    sv.userInteractionEnabled = NO;
    sv.delegate = self;
    pageControl.userInteractionEnabled = NO;
    [self.contentView addGestureRecognizer:sv.panGestureRecognizer];
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat pageWidth = sv.frame.size.width;
    float fractionalPage = sv.contentOffset.x / pageWidth;
    NSInteger page = lround(fractionalPage);
    self.pageControl.currentPage = page;
}

Then, within the View Controller's collectionView:cellForItemAtIndexPath method, I manually add images like so:

        UIImageView *img = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[myArray objectAtIndex:indexPath.row]]];
        img.frame = (CGRect) { 0, 0, cell.frame.size.width, cell.frame.size.height};
        [cell.sv addSubview:img];

        img = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[myArray objectAtIndex:indexPath.row + 1]]];
        img.frame = (CGRect) { cell.frame.size.width, 0, cell.frame.size.width, cell.frame.size.height };
        [cell.sv addSubview:img];

        img = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[myArray objectAtIndex:indexPath.row + 2]]];
        img.frame = (CGRect) { cell.frame.size.width * 2, 0, cell.frame.size.width, cell.frame.size.height };
        [cell.sv addSubview:img];

        [cell.sv setContentSize:CGSizeMake(cell.frame.size.width * 3.0, cell.frame.size.height)];

I would have preferred a StoryBoard/Interface Builder way of doing this, but for now, this will suffice.

How to create slideshow of images within scrollview with autolayout?

1 Answers