2013-09-24 85 views
1

我想使用UICollectionView和UICollectionViewFlowLayout來製作照片庫。 這個想法是在垂直滾動的網格中顯示很多照片,當用戶點擊一張照片時,它會變成水平的,全屏的,帶有分頁。UICollectionView照片庫到全屏

我的問題是,當用戶在全屏模式下旋轉設備時,以及當他從網格切換到全屏時,動畫非常難看。

我嘗試過使用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]; 
} 

回答

1

這裏所描述的方法(動態itemSize)我有一個目標: 的CollectionView一個有一排照片3的網格。 當我點擊其中一張照片時,它實現了具有水平滾動和全屏圖像的CollectionView B.

這裏的代碼:

1)的CollectionView甲僅選擇信息的方法:

- (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)的CollectionView乙 - 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 

我用#進口 「SDWebImage /的UIImageView + WebCache.h」 來存儲圖像。 您可以複製代碼並對其進行自定義。

0

雖然@ nik的回答是正確的。我滾動到選定的indexpath時遇到問題。它不會正確滾動選定的索引路徑。

如果您遇到問題,我建議您將scrollToItemAtIndexPath:方法放入viewWillAppear