Swift : Tap image to expand it like Facebook on tableviewcell

Question

I want user to tap on image in a tableviewcell to expand it I tried 4 libraries on github didn't work well with autolayout.

Also I found but it is in objective-c and even doesn't works with Xcode 7 MHFacebookImageViewer. https://github.com/michaelhenry/MHFacebookImageViewer

also https://github.com/aleckretch/AKImageViewer but in objective-c

Is there any library for swift?

This library you can use in swift as well you can do bridging for this — Mayank Patel, Oct 09 '15 at 03:52
Video tutorial: https://www.youtube.com/watch?v=kzdI2aiTX4k Thought it was worth adding for those who prefer videos rather than text. — Josh, Sep 13 '16 at 00:16

score 2 · Accepted Answer · edited May 23 '17 at 10:29

For above this library if you want to use in swift you have to Add Bridging Header

AKImageViewer - for e.g i am taking little bit code from this library

var aKImageViewerViewController: AKImageViewerController = AKImageViewerViewController()
aKImageViewerViewController.image = UIImage.imageName("lion.png")
aKImageViewerViewController.imgCancel = UIImage.imageNamed("btn_cancel.png")
self.view.addSubview(aKImageViewerViewController.view)
aKImageViewerViewController.centerPictureFromPoint(CGPointMake(0, 0), ofSize: CGSizeMake(30, 30), withCornerRadius: 1.0)

MHFacebookImageViewer - for e.g I am taking one method from this library you can use it in swift like

func setupImageViewer() {

   // Some code

}

func setupImageViewerWithCompletionOnOpen(open: MHFacebookImageViewerOpeningBlock, onClose close: MHFacebookImageViewerClosingBlock) {

  // Some code

}

score 0 · Answer 2 · answered Jul 03 '16 at 04:39

here is what you need to implement that especial animation, imagine that you have two similar rectangle which their proportion is the same then we use the equation of W1/W2 = H1/H2 which we get H2 = (W2/W1)H1 and if you are not interested on math section take a look at the code which is basically two function for zoomIn animation and zoomOut to get back to the absolute coordinate system.

    let zoomImageView = UIImageView()
        let blackBackgroundView = UIView()
        let navBarCoverView = UIView()// to hide navigation bar
        let tabBarCoverView = UIView() // to hide tab bar

        var statusImageView: UIImageView?

        func animateImageView(statusImageView: UIImageView) {
            self.statusImageView = statusImageView

 //to get absolute coordinate system 
            if let startingFrame = statusImageView.superview?.convertRect(statusImageView.frame, toView: nil) {

                statusImageView.alpha = 0

                blackBackgroundView.frame = self.view.frame
                blackBackgroundView.backgroundColor = UIColor.blackColor()
                blackBackgroundView.alpha = 0
                view.addSubview(blackBackgroundView)

                navBarCoverView.frame = CGRectMake(0, 0, 1000, 20 + 44)
                navBarCoverView.backgroundColor = UIColor.blackColor()
                navBarCoverView.alpha = 0



                if let keyWindow = UIApplication.sharedApplication().keyWindow {
                    keyWindow.addSubview(navBarCoverView)

                    tabBarCoverView.frame = CGRectMake(0, keyWindow.frame.height - 49, 1000, 49)
                    tabBarCoverView.backgroundColor = UIColor.blackColor()
                    tabBarCoverView.alpha = 0
                    keyWindow.addSubview(tabBarCoverView)
                }

                zoomImageView.backgroundColor = UIColor.redColor()
                zoomImageView.frame = startingFrame
                zoomImageView.userInteractionEnabled = true
                zoomImageView.image = statusImageView.image
                zoomImageView.contentMode = .ScaleAspectFill
                zoomImageView.clipsToBounds = true
                view.addSubview(zoomImageView)

                zoomImageView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: "zoomOut"))

                UIView.animateWithDuration(0.75, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 0.5, options: .CurveEaseOut, animations: { () -> Void in

                    let height = (self.view.frame.width / startingFrame.width) * startingFrame.height

                    let y = self.view.frame.height / 2 - height / 2

                    self.zoomImageView.frame = CGRectMake(0, y, self.view.frame.width, height)

                    self.blackBackgroundView.alpha = 1

                    self.navBarCoverView.alpha = 1

                    self.tabBarCoverView.alpha = 1

                    }, completion: nil)

            }
        }

        func zoomOut() {
            if let startingFrame = statusImageView!.superview?.convertRect(statusImageView!.frame, toView: nil) {

                UIView.animateWithDuration(0.75, animations: { () -> Void in
                    self.zoomImageView.frame = startingFrame

                    self.blackBackgroundView.alpha = 0
                    self.navBarCoverView.alpha = 0
                    self.tabBarCoverView.alpha = 0

                    }, completion: { (didComplete) -> Void in
                        self.zoomImageView.removeFromSuperview()
                        self.blackBackgroundView.removeFromSuperview()
                        self.navBarCoverView.removeFromSuperview()
                        self.tabBarCoverView.removeFromSuperview()
                        self.statusImageView?.alpha = 1
                })

            }
        }

    }

Swift : Tap image to expand it like Facebook on tableviewcell

2 Answers2