選択時にUICollectionViewセルを画面の幅に拡張する方法は？

Question

私はeBayのiOSアプリがその画像をどのように表示しているかを再現しようとしており、ユーザーは各画像を拡大することができます。ここで

は、それがどのように動作するかです：

eBayは、画像の一覧を表示するUICollectionViewを使用しています。ユーザーがセルを選択すると、セルは上部のいくつかのボタンで展開されます。 Xが選択されると、セルは元のサイズに折り畳まれます。

どうすればこのようなことができますか？

私は質問UICollectionView Enlarge cell on selectionとExpanding UICollectionView and its cell when tappedを見て、私自身のアイデアで実装しようとしました。

問題の1つは、私は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!) 
} 

そして結果：どのような援助が大幅に

役立つだろう

は、ここに私のストーリーボードです！

Answer 1

手順の下に次のあなたはこれを達成することができます：

はあなたが一番上にイメージを持っていて、中央のイメージを持っているFullImageVC 2 ViewControllers FirstViewControllerを考えてみましょう。

1. 検出するコードを書く最初の画像（一番上）にUIButtonをタップまたは配置します。
2. そのUIButtonまたはTap on imageアクションの動作で、モーダルにロジックを書き込むと、ViewController FullImageVCがアニメーションなしで表示されます。あなたはFirstViewControllerでそれを配置し、同じ画像を通過してきたよう

まず

場所と同様FullImageVCの上に画像：

はFullImageVCのviewWillAppear:では、あなたは2つのロジックを記述する必要がありますFirstViewControllerをタップし、上から中央にアニメーションするロジックを作成してください。すぐにアニメーションが完了したとして

セカンド

は、すべての画像があり、選択された1つを表示しますあなたのCollectionViewを示しました。

4.十字ボタンを押して、その操作を書いてFullImageVCを消してください。