Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to center a UICollectionView when it is tapped?

I have a UICollectionView and it has quite a lot of UICollectionViewCells on it. I want to scroll the cell to the centre of the UICollectionView when it is tapped. My concern is that even if I tap the last or the top cell it should move to the centre of the collection view.

I have tried setting the contentInsets and offsets but they don't seem to work. I think I will have to change the content size on selection and change it back to original when the scrolling begins.

like image 524
Ankit Srivastava Avatar asked Jul 26 '13 10:07

Ankit Srivastava


People also ask

How do you make a centered UICollectionView like in Spotify's player?

The center of the collectionView can be found using this nifty method: CGPoint point = [self. view convertPoint:*yourCollectionView*. center toView:*yourCollectionView]; Now set up a rule, that if the cell's center is further than x away, the size of the cell is for example the 'normal size', call it 1.

What is collectionView?

A collection view manages an ordered set of content, such as the grid of photos in the Photos app, and presents it visually. Collection views are a collaboration between many different objects, including: Cells. A cell provides the visual representation for each piece of your content. Layouts.

What do you mean by a value UICollectionView?

The collection view maintains a queue or list of view objects that the data source has marked for reuse. Instead of creating new views explicitly in your code, you always dequeue views. There are two methods for dequeueing views.


1 Answers

Setting contentInsets should give some extra space around first and last cells:

CGFloat collectionViewHeight = CGRectGetHeight(collectionView.bounds);
[collectionView
  setContentInset:
   UIEdgeInsetsMake(collectionViewHeight/2, 0, collectionViewHeight/2, 0) ];
  // nb, those are top-left-bottom-right

After you should call:

[collectionView scrollToItemAtIndexPath:selectedItemPath
    atScrollPosition:UICollectionViewScrollPositionCenteredVertically
    animated:YES];

It's important to pass correct scroll position: UICollectionViewScrollPositionCenteredVertically

This should center tapped item properly.

EDIT

It's really strange, but after setting UIEdgeInsets to collection view method scrollToItemAtIndexPath does not works properly, so i make some modification:

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    CGFloat collectionViewHeight = CGRectGetHeight(self.collectionView.frame);
    [collectionView setContentInset:UIEdgeInsetsMake(collectionViewHeight / 2, 0, collectionViewHeight / 2, 0)];

    UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
    CGPoint offset = CGPointMake(0,  cell.center.y - collectionViewHeight / 2);
    [collectionView setContentOffset:offset animated:YES];
}

it works fine for me.

like image 120
Mikhail Avatar answered Sep 21 '22 09:09

Mikhail