UICollectionView图片库全屏显示

Question

I'm trying to make a Photo Gallery using UICollectionView and UICollectionViewFlowLayout. The idea is to show many photos in a grid with vertical scrolling, and when the user taps one it becomes horizontal, fullscreen, with paging.

My problem is when the user rotates the device while it's on fullscreen mode, and when he switches from grid to fullscreen, the animations are very ugly.

I have tried using 2 different collection layouts and switching between them, but the problem remains.

If anyone has a sample application with this behavior or knows how to do it, I would be very thankful.

This is what I have.

@interface MovieImagesVC () <UICollectionViewDelegateFlowLayout>

@end

@implementation MovieImagesVC {
    UICollectionViewFlowLayout *flowLayout;
    int currentIndex;
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    flowLayout = (UICollectionViewFlowLayout *)self.collectionViewLayout;
}

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {

    if (flowLayout.scrollDirection == UICollectionViewScrollDirectionHorizontal) {

        collectionView.pagingEnabled = NO;

        flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
        [flowLayout setMinimumLineSpacing:10.0f];

        if (self.interfaceOrientation == UIInterfaceOrientationPortrait ||
            self.interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown) {
            flowLayout.itemSize = CGSizeMake(100.f, 100.f);
        }
        else {
            flowLayout.itemSize = CGSizeMake(105.f, 100.f);
        }

        [self.navigationController setNavigationBarHidden:NO animated:YES];
    }
    else {
        collectionView.pagingEnabled = YES;

        flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
        [flowLayout setMinimumLineSpacing:0.0f];

        flowLayout.itemSize = CGSizeMake(self.collectionView.frame.size.width, self.collectionView.frame.size.height-20);

        [self.navigationController setNavigationBarHidden:YES animated:YES];
    }
    [self.collectionView.collectionViewLayout invalidateLayout];
    [collectionView reloadData];
    [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
}

#pragma mark Rotation

-(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration {

    [self.collectionView.collectionViewLayout invalidateLayout];

    if (flowLayout1.scrollDirection == UICollectionViewScrollDirectionHorizontal) {
        if (toInterfaceOrientation == UIInterfaceOrientationPortrait ||
        toInterfaceOrientation == UIInterfaceOrientationPortraitUpsideDown) {
            flowLayout1.itemSize = CGSizeMake(self.collectionView.frame.size.height, self.collectionView.frame.size.width-20);
        }
        else {
            flowLayout1.itemSize = CGSizeMake(self.collectionView.frame.size.height, self.collectionView.frame.size.width-20);
        }

    }
    else {
        if (toInterfaceOrientation == UIInterfaceOrientationPortrait ||
        toInterfaceOrientation == UIInterfaceOrientationPortraitUpsideDown) {
            flowLayout1.itemSize = CGSizeMake(100.f, 100.f);
        }
        else {
            flowLayout1.itemSize = CGSizeMake(105.f, 100.f);
        }

    }
    [self.collectionView reloadData];

    CGPoint currentOffset = [self.collectionView contentOffset];
    currentIndex = currentOffset.x / (int)self.collectionView.frame.size.width;

}
-(void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation {
    [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:currentIndex inSection:0] atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
}

Answer 1

I had an aim: CollectionView A have a grid of photos 3 in a row. When i tap on one of photos it implements CollectionView B with horizontal scrolling and fullscreen images.

Here the code:

1) CollectionView A only selectItem method:

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {

    FullScreenViewController *fsvc = [FullScreenViewController new];
    fsvc.ArrayForFullScr = self.Array;
    fsvc.currentIndex = [NSIndexPath indexPathForItem:indexPath.row inSection:1];
    [self.navigationController pushViewController: fsvc animated: YES];    
}

Here self.Array - is an Array of items (photos).

2) CollectionView B - FullScreenViewController.h

@interface FullScreenViewController : UIViewController <UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>

@property (nonatomic, strong) NSArray *arrayForFullScr;
@property (nonatomic) NSIndexPath *currentIndex;
@property (nonatomic, strong)  UICollectionView *collectionView;

@end

FullScreenViewController.m

#import "FullScreenViewController.h"

@implementation FullScreenViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view = [[UIView alloc] initWithFrame: [[UIScreen mainScreen] bounds]];

    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    [layout setScrollDirection: UICollectionViewScrollDirectionHorizontal];
    [layout setMinimumInteritemSpacing: 0.0f];
    [layout setMinimumLineSpacing: 0.0f];

    _collectionView = [[UICollectionView alloc] initWithFrame: self.view.frame collectionViewLayout: layout];
    [_collectionView setDataSource: self];
    [_collectionView setDelegate: self];
    [_collectionView setPagingEnabled: YES];
    [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellIdentifier"];
    [_collectionView setBackgroundColor: [UIColor blackColor]];
    [_collectionView scrollToItemAtIndexPath: [NSIndexPath indexPathForItem: _currentIndex.row inSection: 0] atScrollPosition: UICollectionViewScrollPositionCenteredHorizontally animated: NO];

    [self.view addSubview:_collectionView];
}

#pragma mark - UICollectionView methods

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return [self.arrayForFullScr count];
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath: (NSIndexPath *)indexPath 
{
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath: indexPath];
    CustomClass *information = [self.arrayForFullScr objectAtIndex: indexPath.row];

    UIImageView *imgView = [[UIImageView alloc] initWithFrame: cell.frame];
    [imgView sd_setImageWithPreviousCachedImageWithURL: information.url
                                          placeholderImage: [UIImage imageNamed:@"placeholder_photo"]
                                                            options: 0
                                                          progress: nil
                                                      completed:nil];
    imgView.contentMode = UIViewContentModeScaleAspectFit;
    cell.backgroundView = imgView;

    return cell;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(self.collectionView.frame.size.width, self.collectionView.frame.size.height - 70);
}

@end

I used #import "SDWebImage/UIImageView+WebCache.h" to store images. You can copy code and customize it.

Answer 2

尝试使用此处描述的方法（动态itemSize） http://adoptioncurve.net/archives/2013/04/creating-a-paged-photo-gallery-with-a-uicollectionview/

Answer 3

though @nik's answer is correct. I had an issue while scrolling to selected indexpath . It won't scroll correctly yo the selected index path.

If you face the problem, I would recommend to put scrollToItemAtIndexPath: method inside viewWillAppear .