CODEWITHSUNDEEP
iosobjective-cuicollectionviewuicollectionviewcelluicollectionviewlayout
Rattasat Rattanahame
Rattasat Rattanahame

Reputation: 31

UICollectionViewCell overlap disorder after scrolling

This is my first application. I want to implement card stack like this.

enter image description here

I use UICollectionView for this app. And create overlap cell by minimumLineSpacing =-20.f

UICollectionViewFlowLayout *collectionViewLayout = (UICollectionViewFlowLayout*)self.collectionView.collectionViewLayout;
    collectionViewLayout.sectionInset = UIEdgeInsetsMake(0.f, 0, 0, 0);
    collectionViewLayout.minimumLineSpacing = -20.f;

and

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *identifier = @"Cell";

    CollectionNewCell *cell = (CollectionNewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
    cell.layer.borderWidth=1.0f;
    cell.layer.borderColor=[UIColor blueColor].CGColor;
    cell.layer.cornerRadius=10.0;
    cell.layer.masksToBounds=YES;

    cell.backgroundColor=[UIColor redColor];
    cell.backgroundView.backgroundColor=[UIColor redColor];
    return cell;
}

I found that after i scrolling, some cells overlap with others (for example : in yellow line)

enter image description here

I don't know what I'm wrong. Do you have any suggestions?

Thank you.

Upvotes: 3

Views: 1435

Answers (2)

Roman
Roman

Reputation: 216

I know, the question is very old, but answer is simple.

The problem here is that UICollectionView doesn't know how exactly you want arrange your cells in depth. So it just displays the last cell added to view hierarchy above other cells.

To fix this, you need to set proper cell zIndex. To do that, you need to use custom UICollectionViewLayout :)

Solution on Swift:

class MyCollectionViewFlowLayout: UICollectionViewFlowLayout {
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        return super.layoutAttributesForElements(in: rect)?.map { attributes in
            // Set cell's zIndex = cell's row, so each next cell will always overlap previous cell.
            attributes.zIndex = attributes.indexPath.row
            return attributes
        }
    }
}

If you don't want create custom layout, there is another solution. Just override cell's method apply(_ layoutAttributes: UICollectionViewLayoutAttributes) like this:

class MyCell: UICollectionViewCell {
    ...

    override func apply(_ layoutAttributes: UICollectionViewLayoutAttributes) {
        layer.zPosition = CGFloat(layoutAttributes.indexPath.row)
    }

    ...
}

Upvotes: 2

Ishwar Hingu
Ishwar Hingu

Reputation: 558

You need remove all subview from cell 

 for (UIView *view in cell.contentView.subviews) {
       if ([view isKindOfClass:[UILabel class]]) {
                [view removeFromSuperview];
       }
 }

Upvotes: -1

Related Questions