Несколько разделов на строку с использованием IGListKit или UICollectionView - PullRequest
Новая
       44

Несколько разделов на строку с использованием IGListKit или UICollectionView

0 голосов
/ 24 октября 2019

Я пытаюсь создать макет фида таким образом 

[-------2/3-------][---1/3---] /* 2 items - 2 thirds and 1 third */
[---1/3---][-------2/3-------] /* 2 items - 1 third and 2 thirds */
[-------2/3-------][---1/3---] /* 2 items - 2 thirds and 1 third */
[---1/3---][-------2/3-------] /* 2 items - 1 third and 2 thirds */

Я смог добиться этого, сделав что-то вроде 

class FeedSectionController: ListSectionController {

    var entry: FeedEntry!

    override init() {
        super.init()
        inset = UIEdgeInsets(top: 0, left: 0, bottom: 15, right: 0)
    }

    override func numberOfItems() -> Int {
        return 2
    }

    override func sizeForItem(at index: Int) -> CGSize {

        guard let ctx = collectionContext else { return .zero }

        if index == 0 {
            return CGSize(width: ((ctx.containerSize.width / 3) * 2), height: 30)
        } else {
            return CGSize(width: (ctx.containerSize.width / 3), height: 30)
        }
    }

    override func cellForItem(at index: Int) -> UICollectionViewCell {
        let cell = UICollectionViewCell()
        cell.backgroundColor = index % 2 == 0 ? .lightGray : .darkGray

        return cell
    }

    override func didUpdate(to object: Any) {
        entry = object as? FeedEntry
    }
}

Однако результат действительно болеекак 

[-------2/3-------][---1/3---] /* 2 items - 2 thirds and 1 third */
[-------2/3-------][---1/3---] /* 2 items - 2 thirds and 1 third */
[-------2/3-------][---1/3---] /* 2 items - 2 thirds and 1 third */
[-------2/3-------][---1/3---] /* 2 items - 2 thirds and 1 third */

Что не совсем верно, это также означает, что у меня есть 2 целых элемента фида на ячейку на секцию.

Что бы я хотел, чтобы каждая секция содержала X количествоячейки, которые по существу создают элемент фида.

Для этого, однако, мне нужно расположить FeedSectionController в порядке, описанном ранее, а не элементы в FeedSectionController (я думаю).

1 Ответ

0 голосов
/ 24 октября 2019

Я не на 100% знаком с IGListKit, но вы можете создать этот эффект только с помощью стандартного UICollectionView


class FeedViewController: UIViewController {

    private enum FeedItemWidth {
        case oneThird, twoThirds
    }

    private lazy var collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        cv.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "UICollectionViewCell")
        cv.backgroundColor = .gray
        cv.translatesAutoresizingMaskIntoConstraints = false
        return cv
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        collectionView.delegate = self
        collectionView.dataSource = self

        if let collectionViewLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
            collectionViewLayout.minimumInteritemSpacing = 0
            collectionViewLayout.sectionInset = .init(top: 8, left: 8, bottom: 8, right: 8)
        }

        view.backgroundColor = .lightGray

        view.addSubview(collectionView)

        NSLayoutConstraint.activate([
            collectionView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            collectionView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
            collectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
            collectionView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor)
        ])
    }

    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        collectionView.collectionViewLayout.invalidateLayout()
    }

    private func feedItemWidth(_ type: FeedItemWidth) -> CGFloat {
        switch type {
        case .oneThird:
            return (collectionView.bounds.width / 3) - 12
        case .twoThirds:
            return  ((collectionView.bounds.width / 3) * 2) - 12
        }
    }
}

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

        let layoutOptions = [
            CGSize(width: feedItemWidth(.oneThird), height: 100),
            CGSize(width: feedItemWidth(.twoThirds), height: 100),
            CGSize(width: feedItemWidth(.twoThirds), height: 100),
            CGSize(width: feedItemWidth(.oneThird), height: 100)
        ]

        return layoutOptions[indexPath.item % layoutOptions.count]
    }

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

}

extension FeedViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 35
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "UICollectionViewCell", for: indexPath)
        cell.backgroundColor = (indexPath.item % 2 == 0) ? .white : .black
        return cell
    }
}
...