1

我正在尝试使用 UICollectionView 和 UICollectionViewFlowLayout 制作照片库。这个想法是在一个垂直滚动的网格中显示许多照片，当用户点击一张时，它会变成水平的、全屏的、分页的。

我的问题是当用户在全屏模式下旋转设备时，当他从网格切换到全屏时，动画非常难看。

我尝试使用 2 种不同的集合布局并在它们之间切换，但问题仍然存在。

如果有人有具有这种行为的示例应用程序或知道如何操作，我将非常感激。

这就是我所拥有的。

@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];
}
4

3 回答 3

1

我有一个目标：CollectionView A 有一个连续 3 张照片网格。当我点击其中一张照片时，它实现了具有水平滚动和全屏图像的 CollectionView B。

这里的代码：

1）CollectionView 一个只有selectItem的方法：

- (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];    
}

这里self.Array- 是一组项目（照片）。

2) 集合视图 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

我使用#import "SDWebImage/UIImageView+WebCache.h" 来存储图像。您可以复制代码并对其进行自定义。

于 2016-03-02T17:08:11.373 回答
0

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

于 2013-11-08T08:34:04.730 回答
0

尽管@nik 的回答是正确的。滚动到 selected 时遇到问题indexpath。它不会正确滚动选定的索引路径。

如果您遇到问题，我建议将scrollToItemAtIndexPath:方法放在里面viewWillAppear。

于 2017-05-12T07:11:22.723 回答