Collectionview benutzerdefiniertes Zellenlayout/-verhalten

Question

Ich arbeite mit einem collectionview, das horizontal gleitet und versucht, ein benutzerdefiniertes Layout der Zellen zu erstellen, ähnlich dem iPhone "app closer". Ich habe keine Ahnung, wie ich einen solchen Effekt erzielen kann oder wo ich anfangen soll, also habe ich gehofft, ein paar Hinweise zu bekommen. Ich bin sehr schlecht darin, mich selbst zu erklären, also habe ich versucht, den gewünschten Effekt zu veranschaulichen, von dem, wie es sich jetzt verhält, bis zu dem, wie es sich verhalten soll.

Vielen Dank im Voraus!

Answer 1

ich mit einer ähnlichen Ansicht wie this.This gearbeitet haben, ist die Github link meines Projektes. Der einzige Unterschied zwischen Ihrer Anforderung und meiner Sicht ist, dass Sie auch die linke Zelle vergrößern müssen. Um diese Ansicht zu erreichen, stieß ich auf zwei große Probleme:

1) Stoppen der Scroll genau, wenn die beiden Zellen (linke Zelle und rechte Zelle) gleichermaßen ausgesetzt sind, dafür habe ich den folgenden Code in meiner CollectionView.m-Datei enthalten.

- (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) Zweitens müssen Sie die richtige Beschränkung auf die Zelle, um die Anforderung zu erreichen, für die ich UICollectionViewFlowLayout Klasse verwendet haben. In diesem ich den sichtbaren Zellen angemessene Einschränkung zur Verfügung stellen. Flow Code sieht wie folgt:

#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 

Nachdem Sie das Projekt von meinem GitHub Link klonen, verstehen Sie einfach, was ich getan habe, und Sie können Ihren eigenen Code schreiben Sie Ihre view.You zu erreichen, wird nur zur Verfügung stellen müssen, um Ihre Einschränkung in diesem Teil des Codes. Sie müssen den zIndex auch für jede Zelle richtig anpassen.

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

Ich hoffe, du hast meinen Standpunkt verstanden.

Hinweis: Ich habe den GitHub-Code nur auf dem iPhone 5s getestet, Sie müssen möglicherweise ein wenig für andere Geräte zwicken.