UICollectionView with cell partially visible

Question

I would like to make a collectionView that can be scrolled horizontally and has only one cell item visible and one partially visible. Cells should take the whole height of the collectionView.

I have played with the sectionInset of collectionView. But couldn't achieve my target.

My Code:

import UIKit

class BooksController: UIViewController {

    @IBOutlet weak var booksCollectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()


        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 20)
        layout.itemSize = CGSize(width: booksCollectionView.frame.width, height: booksCollectionView.frame.height)
        layout.minimumInteritemSpacing = 10
        layout.minimumLineSpacing = 10
        layout.scrollDirection = .horizontal
        booksCollectionView.collectionViewLayout = layout


        booksCollectionView.register(UINib(nibName: "BookCell", bundle: .main), forCellWithReuseIdentifier: "BookCell")
        booksCollectionView.dataSource = self
        booksCollectionView.delegate = self
        // Do any additional setup after loading the view.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destinationViewController.
        // Pass the selected object to the new view controller.
    }
    */

}

extension BooksController: UICollectionViewDataSource {
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "BookCell", for: indexPath) as? BookCell {
            return cell
        }
        return UICollectionViewCell()
    }
}

extension BooksController: UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
//    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
//        return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 20)
//    }
}

Target (Something similar to the collectionView here)

My Output

Seems to be what you are looking for: https://stackoverflow.com/questions/35045155/how-to-create-a-centered-uicollectionview-like-in-spotifys-player — MCMatan, Mar 10 '19 at 13:58

score 0 · Answer 1 · answered Mar 10 '19 at 14:06

0

Use this piece of code

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = self.view.frame.width - 100
        let height = self.view.frame.height
        return CGSize(width: width, height: height)
    }

Don't forget to add this delegate

UICollectionViewDelegateFlowLayout

answered Mar 10 '19 at 14:06

pigeon_39

1,503
2
22
34

1

It might be better to use the `collectionView.frame` instead of `self.view.frame` since the `collectionView` might be smaller than the `view`. – vacawama Mar 10 '19 at 14:15
When the collectionView is scrolled, I need the second(next) items should be visible fully. I have tried the above way. But in this way, when I scroll, the second item is not visible fully. instead, the rest of it is visible – Ahsan Aasim Mar 10 '19 at 14:33
What do you mean is not visible fully? You want the snap effect? How could it be not visible fully if its width is less big than the collection view? – Rico Crescenzio Mar 10 '19 at 17:56

score -1 · Answer 2 · answered Mar 10 '19 at 14:19

-1

Add UICollectionViewDelegateFlowLayout

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: self.view.frame.width, height: self.view.frame.height)
    }

answered Mar 10 '19 at 14:19

Saif Mukadam

1

When the collectionView is scrolled, I need the second(next) items should be visible fully. I have tried the above way. But in this way, when I scroll, the second item is not visible fully. instead, the rest of it is visible – Ahsan Aasim Mar 10 '19 at 14:33

score -1 · Answer 3 · answered Nov 20 '19 at 12:23

-1

Use this Pod MSPeekCollectionViewDelegateImplementation

GitHub

answered Nov 20 '19 at 12:23

Krishna Kirana

438
4
10

score -1 · Answer 4 · answered Nov 20 '19 at 13:33

-1

You can use if you need to show half of the second collection view cell

collectionView.contentInset = UIEdgeInsets.init(top: 0, left: 10, bottom: 0, right: 10)

For height and with of the collection view you can try CollectionViewLayout delegate

answered Nov 20 '19 at 13:33

Gowri G

420
4
18

In storyboard, remove default insets in UICollectionView. – Gowri G Nov 21 '19 at 09:39

UICollectionView with cell partially visible

4 Answers4