Tutorial IOS – Zoom em imagem – Swift – Parte 2
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:
2 – Vamos criar uma nova View Controller no storyboard:
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:
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:
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:
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 } }