UICollectionView 전체 화면 확대/축소 UICollectionViewCell

Question

UICollectionViewCell을 어떻게 확대하여 전체 화면으로 표시 할 수 있습니까? 셀을 탭하면 내가이 일을 해요 UICollectionViewFlowLayout을 확장하고 내보기 컨트롤러에 있습니다 :

CGPoint pointInCollectionView = [gesture locationInView:self.collectionView]; 
NSIndexPath *selectedIndexPath = [self.collectionView indexPathForItemAtPoint:pointInCollectionView]; 
UICollectionViewCell *selectedCell = [self.collectionView cellForItemAtIndexPath:selectedIndexPath]; 

NSLog(@"Selected cell %@", selectedIndexPath); 

여기에서 갈 곳 정말 확실하지. UICollectionView은 확대 된 셀을 표시해야합니까? 또는 셀 (이미지)의 내용을 전체 화면으로 표시하는 새로운보기 컨트롤러를 만들어야합니까?

Answer 1

나는 here 솔루션을 가져 와서 컬렉션보기로 대신 작업하도록 약간 수정했습니다. 또한 원본보기를 숨기기 위해 투명한 회색 배경을 추가했습니다 (이미지가 전체 프레임을 차지하지 않는다고 가정).

@implementation CollectionViewController 
{ 
    UIImageView *fullScreenImageView; 
    UIImageView *originalImageView; 
} 

... 

// in whatever method you're using to detect the cell selection 

CGPoint pointInCollectionView = [gesture locationInView:self.collectionView]; 
NSIndexPath *selectedIndexPath = [self.collectionView indexPathForItemAtPoint:pointInCollectionView]; 
UICollectionViewCell *selectedCell = [self.collectionView cellForItemAtIndexPath:selectedIndexPath]; 

originalImageView = [selectedCell imageView]; // or whatever cell element holds your image that you want to zoom 

fullScreenImageView = [[UIImageView alloc] init]; 
[fullScreenImageView setContentMode:UIViewContentModeScaleAspectFit]; 

fullScreenImageView.image = [originalImageView image]; 
// *********************************************************************************** 
// You can either use this to zoom in from the center of your cell 
CGRect tempPoint = CGRectMake(originalImageView.center.x, originalImageView.center.y, 0, 0); 
// OR, if you want to zoom from the tapped point... 
CGRect tempPoint = CGRectMake(pointInCollectionView.x, pointInCollectionView.y, 0, 0); 
// *********************************************************************************** 
CGRect startingPoint = [self.view convertRect:tempPoint fromView:[self.collectionView cellForItemAtIndexPath:selectedIndexPath]]; 
[fullScreenImageView setFrame:startingPoint]; 
[fullScreenImageView setBackgroundColor:[[UIColor lightGrayColor] colorWithAlphaComponent:0.9f]]; 

[self.view addSubview:fullScreenImageView]; 

[UIView animateWithDuration:0.4 
       animations:^{ 
        [fullScreenImageView setFrame:CGRectMake(0, 
                0, 
                self.view.bounds.size.width, 
                self.view.bounds.size.height)]; 
       }]; 

UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(fullScreenImageViewTapped:)]; 
singleTap.numberOfTapsRequired = 1; 
singleTap.numberOfTouchesRequired = 1; 
[fullScreenImageView addGestureRecognizer:singleTap]; 
[fullScreenImageView setUserInteractionEnabled:YES]; 

... 

- (void)fullScreenImageViewTapped:(UIGestureRecognizer *)gestureRecognizer { 

    CGRect point=[self.view convertRect:originalImageView.bounds fromView:originalImageView]; 

    gestureRecognizer.view.backgroundColor=[UIColor clearColor]; 
    [UIView animateWithDuration:0.5 
        animations:^{ 
         [(UIImageView *)gestureRecognizer.view setFrame:point]; 
        }]; 
    [self performSelector:@selector(animationDone:) withObject:[gestureRecognizer view] afterDelay:0.4]; 

} 

-(void)animationDone:(UIView *)view 
{ 
    [fullScreenImageView removeFromSuperview]; 
    fullScreenImageView = nil; 
} 

Answer 2

당신은 단순히 항목 크기가 큰 것을 특징으로하는 (당신이 이미 가지고있는 것과 비슷한) 다른 레이아웃을 사용하고 collectionView에 setCollectionViewLayout:animated:completion: 할 수 있습니다.

새로운보기 컨트롤러가 필요하지 않습니다. 귀하의 데이터 소스는 동일하게 유지됩니다. 동일한 셀 클래스를 사용할 수도 있습니다. 더 큰 셀 내용 크기에 맞게 배치 할 때와 그렇지 않을 때를 알고 있는지 확인하십시오.

콘텐츠를 다시로드하지 않아서 페이시에서 페이스 북이 어떻게 작동하는지 알 수 있습니다. 즉, [collectionView reloadData]은 전화 한 적이없는 것처럼 보입니다 (스크롤 오프셋이 깜박 거리고 다시 설정되는 등). 이것은 가장 직접적인 가능한 해결책으로 보인다.

CGPoint pointInCollectionView = [gesture locationInView:self.collectionView]; 
NSIndexPath *selectedIndexPath = [self.collectionView indexPathForItemAtPoint:pointInCollectionView]; 
UICollectionViewCell *selectedCell = [self.collectionView cellForItemAtIndexPath:selectedIndexPath]; 

NSLog(@"Selected cell %@", selectedIndexPath); 

__weak typeof(self) weakSelf = self; 

[self.collectionView setCollectionViewLayout:newLayout animated:YES completion:^{ 

    [weakSelf.collectionView scrollToItemAtIndexPath:selectedIndexPath atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:NO]; 

}]; 

Answer 3

당신은 당신의 문제에 적합 MWPhotoBrowser를 사용할 수 있습니다. Tap to Zoom 기능이있는 Grid를 지원합니다.

(id <MWPhoto>)photoBrowser:(MWPhotoBrowser *)photoBrowser thumbPhotoAtIndex:(NSUInteger)index; 

: 당신은 당신이 enableGrid가 YES로 설정되어있는 속성을 확인하고 다음 대리자 메서드를 구현해야 제대로 썸네일의 그리드를 보여주기 위해 here

그리드

에서 얻을 수 있습니다 startOnGrid 속성을 활성화하여 사진 브라우저를 그리드에서 시작할 수도 있습니다.