Tutorial IOS – Zoom em imagem – Swift – Parte 2

On 17 de março de 2015 by Pedro Duarte

No final da primeira parte não tinhamos nenhuma funcionalidade na nossa lista, vamos colocar nesse tutorial.

1 – Vamos colocar uma Navigation Controller que permite a navegação entre as Scenes do seu aplicativo:

1

2 – Vamos criar uma nova View Controller no storyboard:

2

 

3 – Agora vamos fazer a Segue que fará a Table View mover para nova  View , para isso de um Control click em cima da “CELL” até a próxima View Controller e selecione a segue show:

3

 

4 – Agora vamos começar a trabalhar na nossa DetailViewController para isso crie uma nova classe Cocoa Touch Class:

5 – Vai até o storyboard depois no menu a direita seleciona Custom Class e coloca Class como sua DetailViewController:

6 – Agora vamos arrastar os componentes necessários para a nossa ViewController no storyboard: o primeiro componente é o Scroll View depois um Slider, um Switch e por ultimo para mostrar nossas imagens dentro da ScrowView uma ImageView:

7 – Para abrir o código da View que está selecionada usa o Assistant Editor:

8 – para crias as Outlets, basta arrastarmos segurando control para o código da nossa Controller e escolher a opção Outlet:

4

5

Vai criar um Outlet para cada uma das funções, segue como fica o código:

    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var slider: UISlider!
    @IBOutlet weak var onOffZoom: UISwitch!

9 – Vamos fazer algumas alterações na nossa View Controller para que ela mostre a imagem selecionada na table view:

temos que criar uma variável que ira receber a imagem selecionada da ViewController anterior:

var imgSelected : String?

10 – Agora na viewDidLoag() a scrollView com as configurações a baixo irá possibilitar um zoom máximo de 4x e um zoom mínimo de 1x, sendo o valor padrão 1x, que é o tamanho original da imagem:

scrollView.maximumZoomScale = 4
scrollView.minimumZoomScale = 1
scrollView.zoomScale = 1

11 – sizeToFit() ajusta o tamanho do frame da imageView para o mesmo tamanho original da imagem:

imageView.image = UIImage(named: imgSelected!)
imageView.sizeToFit()

12 – Na função viewWillLayoutSubviews estou deixando o tamanho que vier da imagem:

override func viewWillLayoutSubviews() {
        scrollView.contentSize = imageView.frame.size
    }

13 – Volta para a ViewController anterior porque falta um passo que é o de declarar a prepareForSegue que é sempre chamado antes do Storyboard executar um Segue, nesse método podemos preparar a próxima ViewController com todos os objetos e varáveis necessárias:

 override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
        var dtVC = segue.destinationViewController as DetailViewController
        
        let idxPath = tableView.indexPathForCell(sender as UITableViewCell) as NSIndexPath?
        
        dtVC.imgSelected = imagesArray[idxPath!.row].image
    }

14 – Por fim definimos o Mode para Aspect Fit para que a image View não mude a proporção da nossa imagem:

6

 

Quando copilar o aplicativo teremos uma tableView e se clicar em algum elemento ele deve abrir uma nova janela com a imagem selecionada.

Nesse tutorial é isso continuaremos na parte 3, segue o código completo:

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!
    
    var imagesArray: [(name: String, image:String)] = []
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
    
    imagesArray = [("WATCH", "img1"),("WATCH", "img2"),("WATCH", "img3"),("WATCH", "img4")]
        
    
    }
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return imagesArray.count
    }
 
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        
        var tableViewcell:UITableViewCell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as UITableViewCell
        
        tableViewcell.textLabel?.text = imagesArray[indexPath.row].name
        
        return tableViewcell;
        
    }
    
    
    override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
        var dtVC = segue.destinationViewController as DetailViewController
        
        let idxPath = tableView.indexPathForCell(sender as UITableViewCell) as NSIndexPath?
        
        dtVC.imgSelected = imagesArray[idxPath!.row].image
    }

}

 

import UIKit

class DetailViewController: UIViewController, UIScrollViewDelegate {

    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var slider: UISlider!
    @IBOutlet weak var onOffZoom: UISwitch!
    
    
    var imgSelected : String?
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        scrollView.maximumZoomScale = 4
        scrollView.minimumZoomScale = 1
        scrollView.zoomScale = 1

        
        imageView.image = UIImage(named: imgSelected!)
        imageView.sizeToFit()
    }

    override func viewWillLayoutSubviews() {
        scrollView.contentSize = imageView.frame.size
    }
    
    func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
        
        
    return imageView
    
    }
    
    @IBAction func changeValue(sender: UISlider){
        scrollView.zoomScale = CGFloat(slider.value)
    }
    
    func scrollViewDidZoom(scrollView: UIScrollView) {
    
        slider.setValue(Float(scrollView.zoomScale), animated: true)
        
    }
    
    @IBAction func turnOnOff(sender: AnyObject){
    
        slider.enabled = onOffZoom.on
        
        scrollView.pinchGestureRecognizer.enabled = onOffZoom.on
    
    }
    

}

 

Deixe um comentário

O seu endereço de e-mail não será publicado.