Как создать макет сетки 2 x 2 с использованием Collection View?

Question

Я пытаюсь создать сетку 2х2, используя вид коллекции.

Я использовал приведенный ниже код.Это нормально работает для iPhone 5, но с настройками.Я пытаюсь написать код, который можно использовать на всех размерах экрана.Это не работает на iPhone 6.

public func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 2
    }

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

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

    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {

        let padding: CGFloat =  20
        let collectionViewSize = collectionView.frame.size.width - padding

        return CGSize(width: collectionViewSize/2, height: collectionViewSize/2+15)
    }

 public func collectionView(_ collectionView: UICollectionView,
        layout collectionViewLayout: UICollectionViewLayout,
        insetForSectionAt section: Int
        ) -> UIEdgeInsets {
        return UIEdgeInsets(
            top: 5, left: 5, bottom: 5, right: 5
        )
    }

    public func collectionView(
        _ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {

    }

    public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 5
    }

    public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 5
    }

Я пытаюсь добиться следующего макета:

В будущем эта сетка может быть похожа только на 2 столбца и N строк.В каждом ряду всегда будет 2 предмета.

Answer 1

Прежде всего, соберите три переменные в зависимости от ваших потребностей.Это минимальный интервал (как InteritemSpacing, так и межстрочный интервал - должен быть одинаковым по UXwise, но вы можете изменить его в методах делегатов, если хотите. Промежуточный интервал всегда должен быть равен minimumSpacing), edgeInsetPadding и количество элементов, которое вы хотитев ряд.

private var numberOfItemsInRow = 2

private var minimumSpacing = 5

private var edgeInsetPadding = 10

В своем коде вы уже определили свои Edge Insets как:

 UIEdgeInsets(
            top: 5, left: 5, bottom: 5, right: 5
        )

Левые и правые вставки важны для правильного определения размера элемента,left + right дает нам большую сумму 10. Это должно быть присвоено edgeInsetPadding следующим образом:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        let inset = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
        edgeInsetPadding = inset.left+inset.right
        return inset
    }

Теперь давайте перейдем к вашему UICollectionViewDelegateFlowLayout.Обновите следующие методы.

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return minimumSpacing
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return minimumSpacing
    }

Теперь перейдем к основной части.Измените ваш sizeForItemAt в UICollectionViewDelegateFlowLayout как:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = (Int(UIScreen.main.bounds.size.width) - (numberOfItemsInRow - 1) * minimumSpacing - edgeInsetPadding) / numberOfItemsInRow
        return CGSize(width: width, height: width)
    }

И это все.Теперь вы получаете две плитки одинакового размера в сетке 2x2.Если вы хотите изменить это в будущем, просто измените переменную numberOfItemsInRow на что-то другое.Как 3 для 3x3.

Answer 2

Это будет сделано с использованием размера элемента collectionViewCell

collectionView.delegate = self 

extension ViewController : UICollectionViewDelegateFlowLayout {

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let padding = 5
        let width = (collectionView.frame.size.width - CGFloat(padding) * 2) / CGFloat(2)
        let height = width / 200 * 110 // or what height you want to do
        return CGSize(width: width, height: height)
    }
}

Answer 3

Использование:

func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {

        let padding: CGFloat =  20
        let size = self.view.frame.width - padding

        return CGSize(width: size/2, height: size/2+15)
    }