2015년 2월 13일 금요일

facebook 이미지들 가로 스크롤과 비슷한 기능 구현...



페이스북에서 여러 이미지들이 가로로 스크롤되면서 보여지는 UI를 구현하기 위해서는  UICollectionViewFlowLayout를 상속받아서 구현해야 한다.

구현 시나리오.
1. 우선 interface builder에서 collectionview의 paging 기능을 disable. 이때 collectionview의 frame의 가로 사이즈는 window의 가로 사이즈와 같게 설정.

2. UICollectionViewFlowLayout를 상속받아서 targetContentOffsetForProposedContentOffset 을 구현.
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)contentOffset
                                 withScrollingVelocity:(CGPoint)velocity
{
    NSArray* layoutAttributesArray = [self layoutAttributesForElementsInRect:self.collectionView.bounds];
   
    if(layoutAttributesArray.count == 0)
        return contentOffset;
   
    UICollectionViewLayoutAttributes* candidate = layoutAttributesArray.firstObject;
   
    for (UICollectionViewLayoutAttributes* layoutAttributes in layoutAttributesArray)
    {
        if (layoutAttributes.representedElementCategory != UICollectionElementCategoryCell)
            continue;
       
       
        if((velocity.x > 0.0 && layoutAttributes.center.x > candidate.center.x) ||
           (velocity.x <= 0.0 && layoutAttributes.center.x < candidate.center.x))
            candidate = layoutAttributes;
    }
   
    return CGPointMake(candidate.center.x - self.collectionView.bounds.size.width * 0.5f, contentOffset.y);

}

3. viewcontroller의 적절한 위치에서 layout을 설정
UICollectionViewFlowLayout *flowLayout = [[ArbitaryCollectionViewFlowLayout alloc] init];
[cell.collectionView setCollectionViewLayout:flowLayout animated:YES];


reference : http://stackoverflow.com/questions/15919457/uicollectionview-paging-like-safari-tabs-or-app-store-search

댓글 없음:

댓글 쓰기