Last active
May 3, 2017 20:00
-
-
Save runys/43585450eb2028c85faeeb788ac2128d to your computer and use it in GitHub Desktop.
How to add interface elements through code in iOS 10 with Swift 3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import UIKit | |
class ViewController: UIViewController { | |
/* | |
Como adicionar elementos na interface pelo código? | |
Cada componente da interface no iOS é um objeto da classe UIView ou que herda da classe UIView. | |
Componentes como botões, labels, image views e table views, possuem sua respectiva classe que por consequência herda de UIView. | |
Toda UIViewController, ou seja, classe que herda de UIViewController, possue uma propriedade chamada view. Essa propriedade se refere a tela da view que a view controller comanda. Quando vamos adicionar componentes na interface pelo código temos que adicionar o componente na view da view controller. | |
O que vamos ver agora é: | |
- Como criar componentes da interface no código | |
- Como adicionar esse componentes na tela da controller | |
- Como adicionar eventos a componentes da interface | |
*/ | |
/* | |
A primeira coisa que precisamos conhecer é o método viewDidLoad. | |
Esse método é o primeiro a ser chamado quando a controller é criada. | |
Nele nós fazemos inicialização de componentes e inicialização de configuraçõesque sejam necessárias para a view da controller. | |
Nele nós vamos criar novos componentes e adicioná-los na view para que o usuário possa interagir. | |
*/ | |
override func viewDidLoad() { | |
super.viewDidLoad() | |
// 1. Estamos dentro do método viewDidLoad | |
// 2. Vamos criar uma Label para que o usuário possa ler um texto na tela. | |
let novaLabel = UILabel() | |
// 3. Agora que a label foi criada, vamos modificar seu texto | |
novaLabel.text = "Olá! Sou uma label!" | |
// 4. Agora vamos definir a posição da label na interface | |
// As coordenadas x e y definem a posição do componente na interface | |
// As dimensões width e height definem a largura e a altura do componente na interface | |
// Para a largura, vamos usar a largura da própria tela! Assim a label ocupará toda a horizontal na tela e terá espaço para mostrar o texto dentro dela | |
let larguraDaTela = self.view.frame.width | |
// Agora vamos usar essas dimensões para definir o frame do componente. A propriedade frame define a posição e as dimensões do componente na tela | |
novaLabel.frame = CGRect(x: 20, y: 20, width: larguraDaTela - 40, height: 44) | |
// 5. Por fim vamos inserir o componente na tela, para o usuário poder ve-lo | |
// Fazemo isso usando o método addSubview da nossa view. | |
// O que ele faz é adicionar um objeto UIView dentro de outro componetente UIView | |
self.view.addSubview(novaLabel) | |
// Agora vamos criar um botão que vai chamar um método quando o usuário interagir com ele. | |
// O primeiro passo é criar um componente da classe UIButton e inseri-lo na tela, como fizemos acima com nossa label | |
let novoBotão = UIButton() | |
novoBotão.setTitle("Aperte-me", for: .normal) | |
novoBotão.setTitleColor(UIColor.blue, for: .normal) | |
novoBotão.frame = CGRect(x: 20, y: 80, width: larguraDaTela - 40, height: 44) | |
self.view.addSubview(novoBotão) | |
// Agora que temos o botão na tela, temos que atribuir uma ação para que ele chame um método quando apertado. | |
// Para isso temos o método addTarget(_ target: Any?, action: Selector, for controlEvents: UIControlEvents) | |
// Esse método tem 3 parâmetros | |
// - target: Quem que está chamando o método, no nosso caso é nil, ou seja, não precisamos passar para o método quem chamou o método | |
// - action: O método que será chamado quando a interação acontecer. É na forma de um selector que declaramos com #selector() e dentro dos parenteses definimos a assinatura do método | |
// - controlEvents: O evento que irá chamar o método. Aqui definimos se o método é chamado quando o usuário toca no botão por exemplo | |
novoBotão.addTarget(self, action: #selector(escreverTextoNoTerminal), for: .touchUpInside) | |
// Agora quando o usuário tocar no botão e tirar o dedo dele vamos chamar o método escreverTextoNoTerminal que está declarado logo abaixo na nosso view controller. | |
} | |
func escreverTextoNoTerminal() { | |
print("Você apertou o botão!") | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment