Collectionview自定義單元格佈局/行爲

Question

我正在使用一個水平滑動的collectionview，並嘗試執行單元格的自定義佈局，類似於iphone「應用程序更近」。我不知道如何達到這樣的效果，或者從哪裏開始，所以我希望得到一些指導。 我在解釋自己的時候非常糟糕，所以我試圖說明所需的效果，從現在的行爲，直到它應該如何表現。

提前致謝！

Answer 1

我也象this.This了類似的觀點曾任職是我的項目的github上link。 您的要求和我的看法之間的唯一區別是您需要放大左側的單元格。爲了實現這個視圖，我遇到了兩個主要問題：

1）當兩個單元格（左側單元格和右側單元格）被平等地公開時停止滾動，因爲我已將以下代碼包含在我的CollectionView.m文件中。

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset 
{ 
    float pageWidth = 240; // width + space 

    float currentOffset = scrollView.contentOffset.x; 
    float targetOffset = targetContentOffset->x; 
    float newTargetOffset = 0; 

    if (targetOffset > currentOffset) 
     newTargetOffset = ceilf(currentOffset/pageWidth) * pageWidth; 
    else 
     newTargetOffset = floorf(currentOffset/pageWidth) * pageWidth; 

    if (newTargetOffset < 0) 
     newTargetOffset = 0; 
    else if (newTargetOffset > scrollView.contentSize.width) 
     newTargetOffset = scrollView.contentSize.width; 

    targetContentOffset->x = currentOffset; 
    [scrollView setContentOffset:CGPointMake(newTargetOffset, 0) animated:YES]; 

    int index = newTargetOffset/pageWidth; 

    if (index == 0) { // If first index 
     CollectionViewCell *cell =(CollectionViewCell *) [self cellForItemAtIndexPath:[NSIndexPath indexPathForItem:index inSection:0]]; 
     cell.transform = CGAffineTransformIdentity; 
     cell = (CollectionViewCell *)[self cellForItemAtIndexPath:[NSIndexPath indexPathForItem:index + 1 inSection:0]]; 
     //cell.transform = TRANSFORM_CELL_VALUE; 

    }else{ 
     CollectionViewCell *cell =(CollectionViewCell *)[self cellForItemAtIndexPath:[NSIndexPath indexPathForItem:index inSection:0]]; 
     //cell.transform = CGAffineTransformIdentity; 

     index --; // left 
     cell =(CollectionViewCell *)[self cellForItemAtIndexPath:[NSIndexPath indexPathForItem:index inSection:0]]; 
      // cell.transform = TRANSFORM_CELL_VALUE; 
     index ++; 
     index ++; // right 
     cell = (CollectionViewCell *)[self cellForItemAtIndexPath:[NSIndexPath indexPathForItem:index inSection:0]]; 
     //cell.transform = TRANSFORM_CELL_VALUE; 
    } 
} 

2）其次，你需要提供適當的約束到小區來實現的要求，爲我所用UICollectionViewFlowLayout類。 在這我給可見細胞提供適當的約束。 FlowLayout中的代碼看起來象下面這樣：

#import "CollectionLayout.h" 


@implementation CollectionLayout 
{ 
    NSIndexPath *mainIndexPath; 
} 

-(void)prepareLayout{ 
    [super prepareLayout]; 
} 

-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{ 
    UICollectionViewLayoutAttributes *attributes = [[super layoutAttributesForItemAtIndexPath:indexPath] copy]; 
    CATransform3D theTransform = CATransform3DIdentity; 
    const CGFloat theScale = 1.05f; 
    theTransform = CATransform3DScale(theTransform, theScale, theScale, 1.0f); 
    attributes.transform3D=theTransform; 
    return attributes; 
} 

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds { 
    return YES; 
} 

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{ 
    NSArray *attributesSuper = [super layoutAttributesForElementsInRect:rect]; 
    NSArray *attributes = [[NSArray alloc]initWithArray:attributesSuper copyItems:YES]; 
    NSArray *cellIndices = [self.collectionView indexPathsForVisibleItems]; 
    NSIndexPath *neededIndexPath = [NSIndexPath indexPathForRow:0 inSection:0]; 
    for(NSInteger i=0;i<cellIndices.count;i++){ 
     NSIndexPath *indexPath = [cellIndices objectAtIndex:i]; 
     if(indexPath.row>neededIndexPath.row){ 
      neededIndexPath=indexPath; 
     } 
     NSLog(@"%ld,%ld",(long)indexPath.row,(long)indexPath.section); 
    } 
    if(cellIndices.count==0){ 
     mainIndexPath = [NSIndexPath indexPathForRow:0 inSection:0]; 
    }else{ 
     if(neededIndexPath.row>0) 
      mainIndexPath = [NSIndexPath indexPathForRow:neededIndexPath.row-1 inSection:0]; 
    } 

    for (UICollectionViewLayoutAttributes *attribute in attributes) 
    { 
     [self applyTransformToLayoutAttributes:attribute]; 
    } 
    return attributes; 
} 

-(void) applyTransformToLayoutAttributes:(UICollectionViewLayoutAttributes *)attribute{ 
    if(attribute.indexPath.row == mainIndexPath.row){ 
     attribute.size = CGSizeMake(self.collectionView.bounds.size.width-40, self.collectionView.bounds.size.height); 
     attribute.zIndex+=10; 
    } 
} 

#pragma mark - Transform related 

@end 

一旦你從我的github上的鏈接克隆的項目，你會很容易明白我做了什麼，你可以編寫自己的代碼來實現你的view.You將只需要提供你的約束在這部分代碼中。 您還需要爲每個單元格正確調整zIndex。

-(void) applyTransformToLayoutAttributes:(UICollectionViewLayoutAttributes *)attribute{ 
     if(attribute.indexPath.row == mainIndexPath.row){ 
      attribute.size = CGSizeMake(self.collectionView.bounds.size.width-40, self.collectionView.bounds.size.height); 
      attribute.zIndex+=10; 
     } 
    } 

我希望你明白了我的觀點。

注意：我已經在iPhone 5s上測試過github代碼，您可能需要稍微調整一下其他設備。