简体   繁体   English

如何正确对齐这些 collectionview 单元格?

[英]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布局将类似于 Apple 的音乐应用程序,其中每行显示两个方形单元格

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.填充值应该是所有三个空格(左,中心,右)的加法让我们假设填充值 = 25 那么它应该在布局计算中考虑 75 以获得精确的间距。

And set left, top, center and right space with value 25(As you want to add space there).并将左侧、顶部、中间和右侧空间设置为 25(因为您想在那里添加空间)。

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肯定能用

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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