简体   繁体   中英

How to align these collectionview cells properly?

I am creating a page where I use collection view. The layout will be like Apple's Music app where each row displays two square-shaped cells

I want a layout like this-this layout has super equal margins around but in my app the first collection cell is stuck to the left edge and the 2nd cell is stuck to the right edge

    private let cellReuseIdentifier = "cellReuseIdentifier"

    class FeedViewController: UICollectionViewController {

        override func viewDidLoad() {
            super.viewDidLoad()
            collectionView?.backgroundColor = .white
            setupNavBar()
            setupCollectionView()
        }

        func setupCollectionView() {
            collectionView?.register(FeedCollectionViewCell.self, forCellWithReuseIdentifier: cellReuseIdentifier)
        }

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

        override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellReuseIdentifier, for: indexPath)
            return cell
        }

    }

    extension FeedViewController: UICollectionViewDelegateFlowLayout {

        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
            let padding: CGFloat =  25
            let collectionViewSize = collectionView.frame.size.width - padding

            return CGSize(width: collectionViewSize/2, height: collectionViewSize/2)

        }

    }

You can use the layout properties to set the collection view inset and the space you want between your cells, in your collection view setup function:

guard let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else { return }

layout.sectionInset = UIEdgeInsets(top: yourTopValue, left: yourLeftValue, bottom: yourBottomValue, right: yourRightValue)
layout.minimumInteritemSpacing = yourSpacing
layout.minimumLineSpacing = yourSpacing

Use following code to achieve your needs.

Padding value should be addition of all three spaces(Left, Center, Right) Let's suppose padding value = 25 then it should consider 75 in layout calculation to get exact spacing.

And set left, top, center and right space with value 25(As you want to add space there).

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let cellWidth: CGFloat = (collectionView.frame.size.width / 2) - ((padding value * 3)/2)
    let cellHeight: CGFloat = (collectionView.frame.size.height / 2)  - ((padding value * 3)/2) 
    return CGSize.init(width: cellWidth, height: cellHeight) 
}

Sure it will work

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM