Tutorial IOS – Zoom em imagem – Swift – Parte 1
Neste post apresentaremos um tutorial a respeito do uso de Zoom em imagem na linguagem Swift. O tutorial será divido em três partes e o resultado final é visualizado abaixo:
1 – Para começar cria um projeto novo no Xcode sendo uma Single View Application:
2 – Como você pode perceber o Xcode já gera os arquivos ViewController.swift e Main.storyboard:
3 – Nesse storyboard vamos colocar uma Table View nessa ViewController.
OBS: Utiliza a busca para ajudar a encontrar objetos.
Para inserir um objeto, basta segurar e arrastar para a sua Storyboard. Utilize as linhas guia para ajudar no posicionamento dos objetos:
4 – Configurar as Constraints que ajudam a definir o posicionamento de seus objetos. Elas também definem o tamanho de sua TableView:
5 – Insira uma Table View Cell na Table View:
6 – Na direita na parte das propriedades configure o Indentifier com o nome “Cell”. Através do Indentifier podemos obter uma referência para esta célula no código do aplicativo:
7 – Vamos colocar também no menu a direita um “Disclosure Indicator” indicando que é possível acessar uma nova tela com mais informações sobre esta linha:
Por enquanto é isso no storyboard agora vamos fazer as alterações na classe. Selecionando o item com dois círculos ira aparecer o código do arquivo selecionado nesse caso do Main.storyboard.
8 – Para definir dataSource e delegate, pressione control e arraste da tabela para a View Controller:
9 – “Outlet” – Para criar o Outlet para a tableView arraste, segurando control, para o código da ViewController.swift, defina o Name como “tableView” e clique em Connect:
10 – “Array” – Vamos declarar um array que será usado para mostrar todas as linhas de nossa tableView. Ele irá conter tanto os nomes quanto as imagens que iremos mostrar. Depois na viewDidLoad() declaramos o array com 4 tuplas:
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")] } }
11 – Importe as imagens para o XCode, basta selecioná-las, clicar e arrastar para dentro do Images.xcassets:
12 – “Protocolos” – Para que a tableView possa mostrar os dados, é necessário declarar os protocolos e seus métodos. UITableViewDelegate, UITableViewDataSource:
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
13 – E declarar os métodos da tableView que são (_:numberOfRowsInSection:) – Serve para definir a quantidade de linhas de sua tableView, que será a quantidade de itens do Array e a ReusableCellWith que você pega a célula da tableView e coloca a o item do array.
// // ViewController.swift // Aula72.0 // // Created by Pedro Duarte on 24/02/15. // Copyright (c) 2015 Pedro Duarte. All rights reserved. // 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; } }
Quando você copilar o aplicativo ele ira mostrar uma tabela com todos os conteúdos do array mas ainda não terá nenhuma funcionalidade isso iremos tratar na segunda parte do tutorial.