Creating zoom on UIImageView in swift - ios

Question

I am currently loading images from my server. The images are plenty depending on the number of images it return. I have been able to display these images successfully and I can scroll down to view all images. Now my problem is I want a way which I can click on a specific image i will be able to zoom it. I have shared my code below:
//Declaration of variables
var albumID: String?
var imagePath: String?
var path: String?
var getClickImage = UIImageView()
var zoomscrollV = UIScrollView()
var imageArray = [String]()
//view did load
override func viewDidLoad() {
super.viewDidLoad()
setUpViewsAlbumPhotos()
zoomscrollV.delegate = self
if !CheckInternet.Connection(){
showAlert(title: "No Internet", message: "Please connect your device to an internet connection")
}else{
fetchPhotos(albumID: albumID)
}
}
//viewDidAppear
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
zoomscrollV.isHidden = true
zoomscrollV.frame = CGRect(x:0, y:0, width:self.view.frame.width, height:self.view.frame.height - 50)
zoomscrollV.minimumZoomScale=1
zoomscrollV.maximumZoomScale=10
zoomscrollV.bounces=false
self.view.addSubview(zoomscrollV)
getClickImage=UIImageView()
getClickImage.frame = CGRect(x:0, y:0, width:zoomscrollV.frame.width, height:zoomscrollV.frame.height)
getClickImage.backgroundColor = .black
getClickImage.contentMode = .scaleAspectFit
zoomscrollV.addSubview(getClickImage)
}
//This code makes an async call to download images and details from the server
let async_call = URL(string: "\(String.api_albumPhotos)\(albumID ?? "")")
let request = NSMutableURLRequest(url: async_call!)
request.httpMethod = "GET"
request.addValue("application/json", forHTTPHeaderField: "Content-Type")
request.addValue("application/json", forHTTPHeaderField: "Accept")
let task = URLSession.shared.dataTask(with: request as URLRequest){
data, response, error in
if error != nil {
print("error is:: \(error!.localizedDescription)")
DispatchQueue.main.async {
self.showAlert(title: "Error", message: "Sorry try again later")
self.stopActivityLoader()
}
return
}
do {
let myJSON = try JSONSerialization.jsonObject(with: data!, options: .mutableContainers) as? NSDictionary
if let parseJSON = myJSON {
var responseCode: String!
var message: NSArray!
responseCode = parseJSON["responseCode"] as! String?
if responseCode == "200" {
DispatchQueue.main.async {
self.stopActivityLoader()
message = parseJSON["message"] as? NSArray
self.path = parseJSON["path"] as? String
if let message = message {
let totalMessage = message.count
let viewHeight = self.view.frame.height
var scrollHeight = 0
var contentViewTopConstraint: CGFloat = 20
// self.preference.set(parseJSON, forKey: UserDefaultKeys.albums.rawValue)
for obj in message{
if let dict = obj as? NSDictionary {
self.imagePath = dict.value(forKey: "path") as? String
let imageID = dict.value(forKey: "id") as? String
let albumThumbnail = photos()
self.scrollView.addSubview(albumThumbnail)
albumThumbnail.translatesAutoresizingMaskIntoConstraints = false
albumThumbnail.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor).isActive = true
albumThumbnail.topAnchor.constraint(equalTo: self.scrollView.topAnchor, constant: contentViewTopConstraint).isActive = true
albumThumbnail.trailingAnchor.constraint(equalTo: self.contentView.trailingAnchor).isActive = true
albumThumbnail.heightAnchor.constraint(equalToConstant: 150).isActive = true
albumThumbnail.isUserInteractionEnabled = true
albumThumbnail.contentMode = .scaleAspectFit
let touchRec = UITapGestureRecognizer(target: self, action: #selector(self.myImageTapped(_:)))
albumThumbnail.addGestureRecognizer(touchRec)
if let path = self.path{
if let imagePath = self.imagePath{
let strippedPath = path.replacingOccurrences(of: "\\", with: "")
let strippedImagePath = imagePath.replacingOccurrences(of: "\\", with: "")
print("\(strippedPath)\(strippedImagePath)")
albumThumbnail.sd_setImage(with: URL(string: "\(strippedPath)\(strippedImagePath)"), placeholderImage: UIImage(named: "default_profile"), options: [.continueInBackground, .progressiveDownload])
if let wrapped = self.path {
self.imageArray.append("\(strippedPath)\(strippedImagePath)")
// print(self.imageArray.append(wrapped))
}
}
}
contentViewTopConstraint = contentViewTopConstraint + 170
}
}
scrollHeight = totalMessage * 170
if totalMessage <= 1 {
self.scrollView.contentSize.height = viewHeight + 20
}else{
self.scrollView.contentSize.height = CGFloat(scrollHeight)
}
}
}
}else{
//Show alert
DispatchQueue.main.async {
self.showAlert(title: "Error", message: "Sorry could not update album. Try again")
self.stopActivityLoader()
}
}
}
}catch{
print("you:: \(error.localizedDescription)")
//Show alert
DispatchQueue.main.async {
self.showAlert(title: "Error", message: "Sorry could not update album. Try again")
self.stopActivityLoader()
}
}
}
task.resume()
}
#objc func myImageTapped(_ sender: UITapGestureRecognizer) {
zoomscrollV.isHidden = false
let myImage = imageArray[(sender.view?.tag)!]
print("myImage \(myImage)")
// RESPECTIVE IMAGE
getClickImage.image = UIImage(named: myImage)
let closeButton: UIButton = UIButton(type: .custom)
closeButton.frame = CGRect(x:40.0, y:self.view.frame.height - 50, width:self.view.frame.width - 80, height:50.0)
closeButton.addTarget(self, action: #selector(self.closeZoom), for: .touchUpInside)
closeButton.setTitle("CLOSE ZOOM", for: .normal)
closeButton.setTitleColor(UIColor.white, for: .normal)
// CLOSE BUTTON
self.view.addSubview(closeButton)
}``
#objc func closeZoom(sender: AnyObject) {
zoomscrollV.isHidden = true
zoomscrollV.setZoomScale(1.0, animated: false)
sender.removeFromSuperview()
}
//SCROLLVIEW DELEGATE
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return getClickImage
}

Answer 1

========================== Edit Jan 24 ============================
CONVERT URL TO IMAGE
#objc func myImageTapped(_ sender: UITapGestureRecognizer) {
zoomscrollV.isHidden = false
let myImageURL = imageArray[(sender.view?.tag)!]
if let url = URL( string: myImageURL)
{
DispatchQueue.global().async {
if let data = try? Data( contentsOf:url){
DispatchQueue.main.async {
let myImage = UIImage( data:data)
print("myImage \(myImage)")
// RESPECTIVE IMAGE
getClickImage.image = UIImage(named: myImage)
let closeButton: UIButton = UIButton(type: .custom)
closeButton.frame = CGRect(x:40.0, y:self.view.frame.height - 50, width:self.view.frame.width - 80, height:50.0)
closeButton.addTarget(self, action: #selector(self.closeZoom), for: .touchUpInside)
closeButton.setTitle("CLOSE ZOOM", for: .normal)
closeButton.setTitleColor(UIColor.white, for: .normal)
// CLOSE BUTTON
self.view.addSubview(closeButton)
}
}
}
}
===============================================================
On image click, U have create scrollview and add respective image as subview, then zoom will work out.
var getClickImage = UIImageView()
var zoomscrollV = UIScrollView()
override func viewDidLoad() {
super.viewDidLoad()
zoomscrollV.delegate = self
}
override func viewDidAppear(_ animated: Bool) {
zoomscrollV.isHidden = true
zoomscrollV.frame = CGRect(x:0, y:0, width:self.view.frame.width, height:self.view.frame.height - 50)
zoomscrollV.minimumZoomScale=1
zoomscrollV.maximumZoomScale=10
zoomscrollV.bounces=false
self.view.addSubview(zoomscrollV)
getClickImage=UIImageView()
getClickImage.frame = CGRect(x:0, y:0, width:zoomscrollV.frame.width, height:zoomscrollV.frame.height)
getClickImage.backgroundColor = .black
getClickImage.contentMode = .scaleAspectFit
zoomscrollV.addSubview(getClickImage)
}
// ON CLICKING IMAGE ACTION
#objc func myImageTapped(_ sender: UITapGestureRecognizer) {
zoomscrollV.isHidden = false
// RESPECTIVE IMAGE
getClickImage.image = BG_CARD_IMGS[(sender.view?.tag)!]
let closeButton: UIButton = UIButton(type: .custom)
closeButton.frame = CGRect(x:40.0, y:self.view.frame.height - 50, width:self.view.frame.width - 80, height:50.0)
closeButton.addTarget(self, action: #selector(self.closeZoom), for: .touchUpInside)
closeButton.setTitle("CLOSE ZOOM", for: .normal)
closeButton.setTitleColor(UIColor.red, for: .normal)
// CLOSE BUTTON
self.view.addSubview(closeButton)
}
#objc func closeZoom(sender: AnyObject) {
zoomscrollV.isHidden = true
zoomscrollV.setZoomScale(1.0, animated: false)
sender.removeFromSuperview()
}
//SCROLLVIEW DELEGATE
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return getClickImage
}
OUTPUT