0

I'm trying to replicate how the eBay iOS apps displays its images and allows users to expand each image larger.

Here's how it works:

enter image description here

eBay uses a UICollectionView to display a list of images. When the user selects a cell, the cell expands with some buttons in the top. When the X is selected, the cell collapses back to original size.

How can I achieve something similar to this?

I've looked at questions UICollectionView Enlarge cell on selection and Expanding UICollectionView and its cell when tapped and tried implementing it with my own ideas.

One of the problems is I have AutoLayout design, and it's making this quite difficult.

Here's my storyboard:

enter image description here

I've tried this:

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!)
}

And the result:

enter image description here

Any assistance would greatly help!

Community
  • 1
  • 1
Pangu
  • 3,721
  • 11
  • 53
  • 120
  • 3
    Well it doesn't expand UICollectionView Cell, but it popup another controller as modal with custom transition. You might need [this] (https://github.com/michaelhenry/MHFacebookImageViewer) – iphonic Dec 28 '16 at 11:21
  • Use this https://github.com/zvonicek/ImageSlideshow if you have multiple images. – Nitesh Dec 28 '16 at 11:23
  • As @iphonic mentioned, I also think that it's not expanding the cell. It's just a modal view controller with a custom transition. It will be easier if you do it that way in your case. I'm not saying that it's not possible to do it with the cell... but it will be a lot more difficult... – Seishin Dec 28 '16 at 11:29
  • Hi @Pangu i tried to provide you a solution in below some steps, have a look into this and let me know if you want to do it in that way. Thank you :) – Dheeraj D Dec 28 '16 at 12:25

1 Answers1

0

Following below steps you can achieve this:

Lets say you have two ViewControllers FirstViewController where you have image at top and FullImageVC where you have image at centre.

  1. Write code to Detect Tap or Place a UIButton over you initial image (Top one).
  2. On action of that UIButton or Tap on image action write a logic to modal present a ViewController FullImageVC without animation.
  3. On viewWillAppear: of FullImageVC you need to write logic for two things:

First

Place an image on top of FullImageVC as similar as you have placed it in a FirstViewController and pass same image you tapped on FirstViewController, and write logic to animate it from top to centre.

Second

As soon as animation completed show your CollectionView which will have all the images and show the selected one.

4.Place cross button and write its action to dismiss FullImageVC.

Dheeraj D
  • 4,386
  • 4
  • 20
  • 34