Как развернуть ячейку UICollectionView на ширину экрана при выборе?

Я пытаюсь воспроизвести, как приложения eBay iOS отображает свои изображения и позволяет пользователям расширять каждое изображение.

Вот как это работает:

Введите описание изображения здесь

eBay использует a UICollectionViewдля отображения списка изображений. Когда пользователь выбирает ячейку, она расширяется с помощью кнопок в верхней части. Если выбран параметр X, ячейка снова сжимается до исходного размера.

Как я могу достичь чего-то подобного?

Я посмотрел на вопросы UICollectionView увеличить ячейку на выбор и расширение UICollectionView и его ячейку при нажатии и пытался реализовать его с моими собственными идеями.

Одна из проблем заключается в том, что у меня есть дизайн AutoLayout, и это делает это довольно сложным.

Вот моя раскадровка:

Введите описание изображения здесь

Я пробовал это:

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath)
{
    let cell = collectionView.cellForItem(at: indexPath)

    cell?.superview?.bringSubview(toFront: cell!)

    UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: [], animations: ({

        self.structureImageView.frame = CGRect(x: 0, y: 0, width: 375, height: 667)
        collectionView.frame = self.structureImageView.bounds
        cell?.frame = collectionView.bounds

        self.separatorView.frame.origin.y = 667
        self.structureInfoView.frame.origin.y = 667

    }), completion: nil)

    test = true
    collectionView.reloadData()

}

var test = false

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt  indexPath: IndexPath) -> CGSize
{
    if test == true
    {
        return CGSize(width: 375, height: 667)
    }
    return CGSize(width: cellWidth!, height: cellHeight!)
}

И результат:

Введите описание изображения здесь

Любая помощь очень поможет!

1 ответ

  1. Ниже приведены шаги, которые вы можете достичь этого:

    Допустим, у вас есть два ViewControllerFirstViewController, где у вас есть изображение вверху и FullImageVCгде у вас есть изображение в центре.

    1. Напишите код для обнаружения касания или размещения UIButton над исходным изображением (верхний).
    2. По действию того UIButton или нажмите на действие изображения напишите логику, чтобы модально представить ViewController FullImageVC без анимации.
    3. На viewWillAppear:Из FullImageVCвам нужно написать логику для двух вещей:

    Первый

    Поместите изображение поверх FullImageVCтакого же, как вы его разместили, FirstViewControllerи передайте то же изображение, которое вы постучалиFirstViewController, и напишите логику, чтобы оживить его сверху до центра.

    Второй

    Как только анимация завершена показать ВашCollectionView, который будет иметь все изображения и показать выбранный.

    4.Поместите крестик и напишите свое действие, чтобы уволить FullImageVC.