Как создать коллекционный вид, который показывает пользователю кучу карточек?

Question

Я пишу карточную игру для iOS. Я хочу показать пользователю карты в его руке. Я искал CocoaPods, который делает это красивым способом, но не смог найти ничего, поэтому я решил создать такое представление самостоятельно, используя горизонтальный UICollectionView.

Вот некоторые требования:

• Высота представления коллекции динамически определяется высотой экрана. Я сделал это с некоторыми ограничениями автопоставки
• Ячейки представления коллекции должны иметь высоту, равную высоте представления коллекции. Я не знаю, как это сделать. Я нашел только этот вопрос , который касается того, как настроить высоту представления коллекции в соответствии с высотой элементов. Я хочу наоборот - высота предметов соответствует виду коллекции.
• Ячейки вида коллекции должны иметь ширину, равную их высоте * 5 / 7. Это соотношение W: H для карточек. Я думаю, что я могу сделать это и с ограничением.
• В каждой ячейке есть изображение. Изображение должно полностью заполнять всю ячейку.

Это моя попытка:

Я добавил ограничения для представления коллекции и представления изображения в ячейке прототипа в раскадровке. Затем я добавил этот код.

extension ViewController : UICollectionViewDataSource, UICollectionViewDelegate {
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        cell.addConstraint(NSLayoutConstraint(item: cell, attribute: .height, relatedBy: .equal, toItem: cell, attribute: .width, multiplier: 5.0 / 7.0, constant: 0))
        // here I am just setting all the cells to have the same image for testing purposes
        (cell.viewWithTag(1) as! UIImageView).image = someCardImage
        return cell
    }
}

Результат:

Кажется, работают только ограничения представления коллекции. Все остальное не так. Ограничение соотношения сторон, которое я добавил программно выше, очевидно, конфликтует с некоторым другим ограничением, о котором я не знаю:

[LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<NSLayoutConstraint:0x604000290810 UICollectionViewCell:0x7fd536610300.height == 0.714286*UICollectionViewCell:0x7fd536610300.width   (active)>",
    "<NSLayoutConstraint:0x600000292390 'UIView-Encapsulated-Layout-Height' UICollectionViewCell:0x7fd536610300.height == 99   (active)>", <---- What is this constraint?
    "<NSLayoutConstraint:0x600000292340 'UIView-Encapsulated-Layout-Width' UICollectionViewCell:0x7fd536610300.width == 68   (active)>" <---- What is this constraint?
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x600000292390 'UIView-Encapsulated-Layout-Height' UICollectionViewCell:0x7fd536610300.height == 99   (active)>

И представления изображений 'не полностью заполняют всю ячейку, как видно в иерархии пользовательского интерфейса:

---

Как мне создать такое представление коллекции, удовлетворяющее моим требованиям?

Answer 1

Я понял это, немного посмотрев в Интернете.

По-видимому, этот метод называется collectionView(_:layout:sizeForItemAt:) в CollectionViewDelegateFLowLayout. Впервые я знаю, что этот метод существовал!

Если я переопределю этот метод, я могу установить размер ячеек так, как я хочу:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let height = collectionView.height
    let width = height * 5 / 7
    return CGSize(width: width, height: height)
}

Так что ограничение, которое я программно добавил, больше не нужно.

Что касается проблемы с рамкой изображения, я решил ее методом проб и ошибок. Я отключил эту опцию «относительно поля» в инспекторе свойств ограничения:

Я предполагаю, что «поле» ячейки составляет 8 пикселей, поэтому при его установке относительно поля остается 8 пикселей пространства.