Vou compartilhar com você um método para criar aplicativos iOS utilizando o conceito de Autolayout sem ter que necessariamente utilizar Storyboard ou uma Interface Builder.
É interessante você aprender como criar aplicativos dessa forma para ter a flexibilidade e o poder de customizar suas Views e telas do jeito que quiser. Eventualmente criar as suas próprias bibliotecas para ser utilizadas em outros códigos.
Para entender no detalhe, assista o próximo video com mais exemplos sobre como usar o autolayout no swift programaticamente (sem interface builder).
Grandes desenvolvedores IOS profissionais de auto padrão utilizam esse conceito que será explicado a seguir. Porque isso abre N possibilidades para fazer o que quiser dentro do seu aplicativo iOS, sem depender muito de uma IDE.
Para entender o que quero quiser, basicamente quando a Apple lançou os primeiros aplicativos na loja, inclusive quando o iPhone tinha ainda uma quantidade menor de tamanhos, todos os aplicativos eram criados utilizando o conceito de XIB e usando o conceito de telas pré-definidas. Com o surgimento de outros dispositivos como iPad, iPhone 6, 6S, 5, 5S as telas começaram a mudar de tamanho e o conceito de Autolayout surgiu mudando basicamente a forma de construir Views.
Imagine que a Apple lance um iPhone quadrado por exemplo (uma loucura assim), com o conceito de Autolayout o desenvolvedor não precisará codificar uma ou duas vezes para se adaptar a vários dispositivos. É codificado apenas uma vez e automaticamente esse componente irá se ajustar conforme as configurações que o desenvolvedor colocar.
Então, partindo do princípio que temos um projeto novo do zero, criamos uma viewController com o método viewDidLoad, o primeiro a ser executado.
Basicamente coloquei um fundo vermelho, adicionei uma subview da minha view principal, e peguei o centro da minha view pai e atribui a minha Label, que no caso é uma Label com esse texto "UILabel view for text", coloquei esse texto branco e centralizado, alinhado o texto ao centro. Basicamente ele começa no centro.
class ViewController: UIViewController {
let label: UILabel = {
let lb = UILabel(frame: CGRect(x: 10, y: 10, width: 200, height: 80))
lb.textColor = UIColor.white
lb.textAlignment = NSTextAlignment.center
lb.text = "UILabel view for text"
return lb
}()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.red
view.addSubview(label)
label.center = view.center
}
}
Quando eu utilizo esse tipo de programação, o problema disso é que estou trabalhando no conceito de Frame e quando se trabalha nesse conceito, ele se adequa a quantidade de pixels na tela.
Hoje estou utilizando o Iphone 6, então se eu rotacionar o meu Iphone 6 você notará que, basicamente a minha tela ainda está utilizando aqueles Frames. Logo, a largura do meu dispositivo é menor do que altura, ou seja, o Autolayout não funcionou aqui, na verdade ele nem foi aplicado aqui.
O problema disso também é que rodar no iPad vai acontecer esse mesmo problema para resolver e a Apple lançou o conceito de Autolayout, então vamos aplicá-lo dentro do código que está sendo escrito, programaticamente falando.
AutoLayout Programaticamente com Swift
Primeiro temos que instanciar uma View simples, sem definir altura ou largura, no meu caso é uma UILabel e eu preciso definir para ele esse atributo chamado translatesAutoresizingMaskIntoConstraints = false, o que esse atributo faz, é basicamente dizer o seguinte:
"iOS.. Pega todas as Constraints desse máscara e atribui ele como falso, porque sendo desenvolvedor IOS, eu que vou definir quais serão essas Constraints.
As Constraints, trabalham basicamente no conceito de relatividade, ou seja, esse componente ele pode começar, por exemplo, com 16 pixels da esquerda e preencher todo o componente daqui pra frente do meu layout. Ou posso definir uma margem nas laterais e uma margem em cima e embaixo (Top, Bottom, Leading, Trailing).
let label: UILabel = {
let lb = UILabel()
lb.textColor = UIColor.white
lb.textAlignment = NSTextAlignment.center
lb.text = "UILabel view for text"
lb.translatesAutoresizingMaskIntoConstraints = false
lb.backgroundColor = .blue
return lb
}()
Vou colocar um fundo azul na minha Label e vou dizer o seguinte, eu vou escrever um Autolayout, basicamente no formato conhecido como Visual Format.
A apple disponibiliza uma ferramenta dentro do SDK, um padrão de escrita, onde podemos escrever através de uma String como ficará a disposição desses elementos na tela. Existe dois tipos de VisualFormat: componentes para ser exibidos verticalmente e horizonalmente.
Então vamos começar no conceito vertical…
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.red
view.addSubview(label)
view.addConstraints(NSLayoutConstraint.constraints(
withVisualFormat: "V:|-32-[v0]-32-|",
options: NSLayoutFormatOptions(),
metrics: nil,
views: ["v0" : label]))
}
Eu vou dizer para ele que vai ser uma Constraints relacionada a posição vertical, então coloco um V: e daqui pra frente eu vou dizer como ele vai funcionar. Então é o seguinte...eu quero que a minha View, nesse caso a minha UiLabel preencha a partir de 32 a área totalmente de cima até 32 embaixo. Então se eu colocar um Pipe | no começo e um no fim, eu vou dizer assim: o componte que tiver aqui dentro (v0), vai preencher toda a área da minha View que está sendo construida (no meu caso a view pai), então eu vou definir para ele qual será a minha View, no meu caso eu vou colocar a primeira view, a 0.
"V:|-32-[v0]-32-|"
Então eu tenho que colocar entre colchetes um ID pra ela, geralmente eu coloco view 1, view 2, view 3 ou view 0 nese caso. Aí eu defino os options como "NSLayoutFormatOptions", métricas não tem nenhuma.
Nesse caso eu já defini verticalmente, para o horizontal eu vou fazer a mesma coisa. Eu vou definir que da esquerda até a direita eu vou preencher tudo e o componente que vai ser isso é o meu componente v0, nesse atributo view, eu vou definir um Dictionary dizendo qual é o ID (no caso é a chave e o valor do objeto em si).
O que fiz nesse código foi somente colocar a minha view azul em cima da view vermelha. Se eu rotacionar, já foi possível corrigir o erro anterior, o AutoLayout foi aplicado, ou seja, a minha view está preechendo todo o espaço dos dois lados.
Se por exemplo, eu quiser colocar uma margem vertical de 32, eu tenho que colocar entre hífen o tanto de pixels que quero. Então eu quero 32 em cima, 32 embaixo, porque eu estou trabalhando com VisualFormat vertical. No horizontal eu quero 32 dos dois lados. Então vamos rodar para ver como o VisualFormat foi aplicado aqui.
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.red
view.addSubview(label)
view.addConstraints(NSLayoutConstraint.constraints(
withVisualFormat: "V:|-32-[v0]-32-|",
options: NSLayoutFormatOptions(),
metrics: nil,
views: ["v0" : label]))
view.addConstraints(NSLayoutConstraint.constraints(
withVisualFormat: "H:|-32-[v0]-32-|",
options: NSLayoutFormatOptions(),
metrics: nil,
views: ["v0" : label]))
}
Então dessa forma eu vou conseguindo modelar a minha view do jeito que eu quiser. Se eu quiser definir um pré tamanho específico para minha view e não se preocupar com margens eu posso eventualmente colocar uma altura e uma largura no meu componente para que ele se adeque independentemente do tamanho do dispositivo.
Então para colocar na vertical, eu vou colocar uma altura de 50 entre parenteses, o que já está dentro do colchete, e dentro dos parenteses da horizontal eu vou querer uma largura de 200 pixels. Nesse caso estou definindo um tamanho fixo para minha view.
V:|-32-[v0(50)]-32-|, H:|-32-[v0(200)]-32-|
Nesse caso como definimos uma altura e uma largura, ele respeitou o começo da nossa declaração do nosso VisualFormat e executou ele realmente na sequencia da String, logo os 21 do final não surtiu efeito porque eu já defini uma largura fixa pra ele, mas você pode ver que ele se mantém independentemente do lado ou tamanho do dispositivo que eu tiver executando.
Nesse caso provavelmente o Iphone 6 tenha uns 400 e poucos pixels de largura, eu nào lembro agora, mas se eu rotacionar ele, vai continuar preenchendo o conceito de 21 na esquerda e 21 até o final, independentemente do tamanho. Então Autolayout foi aplicado e está funcionando como esperado.
Talvez você não esteja enxergando agora isso, mas isso aqui é "N" possibilidades que você pode estar criando.
E por que...?
Porque com isso você tem a habilidade de criar seus próprios componentes e não fica dependendo de uma Storyboard para criar as suas ViewsControllers por exemplo, você pode criar uma biblioteca com os componentes do jeito que quiser e depois disso publicar na comunidade OpenSource por exemplo, e disponibilizar para o mundo, ou até mesmo na sua empresa, ter uma metodologia que todos os produtos novos que venha a criar, tenha um design parecido, pelo menos uma componentização parecida.
É assim que trabalhamos com Autolayout, dentro do código, é assim que muitos desenvolvedores IOS trabalham… eu sou uma dessas pessoas. Eu particularmente usei por muito tempo Storyboard, mas eu abandonei ela justamente por causa desses prós que o VisualFormat traz.
O único contra para quem está começando é entender um pouquinho o conceito do VisualFormat, mas nada que praticando não resolva esse problema. Na própria documentação da Apple, no Docs deles, há tutoriais de como trabalhar com o VisualFormat.
Para praticar e ter um maior esclarecimento sobre o visual format e autolayout, assista o video acima no começo deste artigo.
Me siga nas redes sociais:
