Skip to content

Instantly share code, notes, and snippets.

@runys
Last active May 3, 2017 20:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save runys/43585450eb2028c85faeeb788ac2128d to your computer and use it in GitHub Desktop.
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
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