Swift: создание стека imageView с collectionView

Question

Эй, я хочу создать стопку UIImageView, как на фотографии, как это сделать. Она должна быть динамичной.Как я могу переместить ячейки так, чтобы они находились одна под другой?

Answer 1

Используйте UICollectionViewDelegateFlowLayout методы для создания такого вида интерфейса.

Пример:

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    @IBOutlet weak var collectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        cell.layer.borderWidth = 2.0
        cell.layer.borderColor = UIColor.white.cgColor
        cell.layer.cornerRadius = 50.0
        return cell
    }

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

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

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

В приведенном выше коде

1. Настройка minimumLineSpacingForSectionAt и minimumInteritemSpacingForSectionAt методов UICollectionViewDelegateFlowLayout.

2. Поскольку ячейки в collectionView выровнены left to right по умолчанию, поэтому для получения желаемого результата нам нужно выровнять их right to left.

Как показано на скриншоте выше, используйте semantic свойство collectionView для right to left выравнивания ячеек.

Скриншот:

Edit-1:

Один из способов центрировать ячейки в collectionView - это играть с collectionView's width и centre it horizontally.

Ограничения CollectionView - top, width, centeredorizontally

В viewDidAppear вручную вычислите width из collectionView в соответствии с numberOfItems. В вашем случае numberOfItems = 3

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    let width = min((collectionView.bounds.height) * CGFloat((numberOfItems-1)/2 + 1), UIScreen.main.bounds.width)
    self.collectionViewWidthConstraint.constant = width
}

Answer 2

Вы можете использовать пользовательский макет UICollectionView.

Макеты представления коллекции являются подклассами абстрактного класса UICollectionViewLayout. Они определяют визуальные атрибуты каждого элемента в представлении вашей коллекции. Отдельные атрибуты являются экземплярами UICollectionViewLayoutAttributes и содержат свойства каждого элемента в представлении вашей коллекции, такие как рамка элемента или преобразование.

Аналогичный учебник

Это более сложный макет, измените некоторые параметры, вы получите то, что вы хотите.

Скопировано из github, mpospese / IntroductionCollectionViews

переведите некоторые в Swift

class SpiralLayout: UICollectionViewLayout{
    let itemSize: CGFloat = 170

    var pageSize: CGSize!
    var contentSize: CGSize!
    var radius: CGFloat!
    var cellCounts: [Int]!
    var pageRects: [CGRect]!

    var pageCount: Int!

    override func prepare() {
        super.prepare()
        pageSize = collectionView?.bounds.size
        let iPad = UIDevice.current.userInterfaceIdiom == UIUserInterfaceIdiom.pad

        let scaleFactor: CGFloat = iPad ? 1 : 0.5
        let side = itemSize * scaleFactor
        radius = min(pageSize.width - side, pageSize.height - side * 1.2 )/2 - 5
        pageCount = collectionView?.numberOfSections
        var counts = [Int]()
        var rects = [CGRect]()
        for section in 0..<pageCount{
            counts.append((collectionView?.numberOfItems(inSection: section))!)
            rects.append(CGRect(origin:  CGPoint(x: CGFloat(section) * pageSize.width, y: 0), size: pageSize))
        }
        cellCounts = counts
        pageRects = rects
        contentSize = CGSize(width: pageSize.width * CGFloat(pageCount), height: pageSize.height)

    }


    override var collectionViewContentSize: CGSize{
        return contentSize
    }

    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return !pageSize.equalTo(newBounds.size)
    }


    func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        var attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
        attributes.size = CGSize(width: itemSize, height: itemSize)

        //  ...

        return  attributes
    }


}