Tutorial IOS – Zoom em imagem – Swift – Parte 1

On 5 de março de 2015 by Pedro Duarte

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:

Captura de Tela 2015-02-26 às 21.19.47

 

1 – Para começar cria um projeto novo no Xcode sendo uma Single View Application:

1

 

2 – Como você pode perceber o Xcode já gera os arquivos ViewController.swift e Main.storyboard:

2

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:

Captura de Tela 2015-02-26 às 20.10.38

4 – Configurar as Constraints que ajudam a definir o posicionamento de seus objetos. Elas também definem o tamanho de sua TableView:

Captura de Tela 2015-02-26 às 20.10.57

5 – Insira uma Table View Cell na Table View:

Captura de Tela 2015-02-26 às 20.15.54

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:

6

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:

Captura de Tela 2015-02-26 às 20.21.26

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.

Captura de Tela 2015-02-26 às 20.23.00

8 – Para definir dataSource e delegate, pressione control e arraste da tabela para a View Controller:

Captura de Tela 2015-02-26 às 20.26.54

Captura de Tela 2015-02-26 às 20.27.19

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:

Captura de Tela 2015-02-26 às 20.30.02

Captura de Tela 2015-02-26 às 20.30.06

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.

Captura de Tela 2015-02-26 às 21.17.27

 

 

 

 

 

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *