O documento discute os desafios de construir interfaces sem o Interface Builder e fornece um guia passo-a-passo para fazê-lo de forma manual usando Storyboards e código. O guia explica como definir a primeira tela do aplicativo, criar elementos de interface como rótulos e adicioná-los à tela usando auto layout para posicioná-los. Recursos como classes e modularização são recomendados para tornar o processo mais organizado.

1. P O R R E N ATA FA R I A
Abandonando o
Interface Builder

2. Q U A N D O T U D O C O M E Ç O U …

3. Q U A N D O T U D O C O M E Ç O U …
E I V O U U S A R A
S T O RY B O A R D V I U ! ! !
A F F, D E N O V O ? ?
P E R A Í E N TÃ O Q U E V O U D A R
L O G O M E U P U S H

4. Q U A N D O T U D O C O M E Ç O U …
V I S H , F O I M A L !
D E U M E R G E F O I ?
M E N I N A ! P O R Q U E T U N Ã O M E
D I S S E Q U E T I N H A A LT E R A D O A
S T O RY B O A R D ? ? ? ?
A I N D A B E M Q U E
S O U W E B

5. N Ã O É P O S S Í V E L
Q U E E M E M P R E S A
G R A N D E S E J A D E S S A
F O R M A …
ಠ_ಠ
E A I E U D E S C O B R I Q U E É P I O R
D O Q U E E U P E N S E I …

6. A I N T E R FA C E B U I L D E R …
demora………
demora………
demora………
Haja paciência!
Quando você clica para abrir
E quando tem muitas telas para buildar

7. =
Se você fizer
essa tela
Você também terá
que fazer a
próxima, mesmo
que seja igual
O que é péssimo
se você precisar
reutilizar toda
hora o código
Mas é ainda mais
divertido tentar
explicar seu
layout para seus
colegas!

8. L I N H A S L I N H A S L I N H A S
Quanto mais
telas, mais linhas
e mais confuso
Se você tiver muitas telas,
boa sorte memorizando a
posição de cada uma

9. Se não tiver cuidado na hora de modificar
seu layout, pode esperar muitos erros!
Além de te tomar bastante tempo,
modificando de um por um
Cuidado com
identificadores!

10. M A S E X I S T E M M O M E N T O S E M O M E N T O S
Prós de
Storyboards
T E A J U D A A
P R O T O T I PA R , S E
V O C Ê N Ã O T E M U M
D E S I G N P R O N T O
A P P S P E Q U E N O S
F I C A M P R O N T O S
M A I S R Á P I D O S

11. E como fazer o código sem interface builder?

12. PA S S O Z E R O :
D E S AT I V E A I N T E R FA C E N O S A J U S T E S D O A P P

13. PA S S O 1 :
E N T E N D A O C I C L O D E V I D A D O S E U A P P
Lembre-se que o App
Delegate é o primeiro a
buildar!
E é nele que você chamará
sua primeira tela
VA I S E R B E M A Q U I

14. PA S S O 2 :
D E F I N A Q U E M VA I S E R A P R I M E I R A T E L A
U I W I N D O W
P R I M E I R A T E L A D O
A P P
w i n d o w. ro o t V i e w C o n t ro l l e r = V i e w C o n t ro l l e r ( )

15. PA S S O 2 :
D E F I N A Q U E M VA I S E R A P R I M E I R A T E L A
U I W I N D O W
P R I M E I R A T E L A D O
A P P
Se quiser que comece com uma controller, é a mesma coisa
C O N T R O L L E R
w i n d o w. ro o t V i ew C o n t ro l l e r =
U I N av i g a t i o n C o n t ro l l e r ( ro o t V i ew C o n t ro l l e r : V i ew C o n t ro l l e r ( ) )

16. J E I T O R U I M
PA S S O 3 :
C R I E S U A I N T E R FA C E
Primeiro crie seu elemento
l e t t i t l e L a b e l = U I L a b e l ( )
Depois configure ele
s e l f . l a b e l . t e x t C o l o r =
U I C o l o r. w h i t e
s e l f . l a b e l . t e x t = “ Te s t e ! ”
Adicione ele à sua view
s e l f . v i e w. a d d S u b v i e w ( s e l f . l a b e l )
Desative design automático
s e l f . l a b e l . t r a n s l a t e s A u t o re s i z i n g
M a s k I n t o C o n s t r a i n t s = f a l s e
Adicione autolayout

17. PA S S O 3 :
C R I E S U A I N T E R FA C E
Crie e configure seu elemento
a partir de uma lazy
J E I T O B O M
l e t l a b e l : U I L a b e l = {
l e t l a b e l = U I L a b e l ( )
l a b e l . n u m b e r O f L i n e s = 0
l a b e l . t r a n s l a t e s A u t o re s i z i n g
M a s k I n t o C o n s t r a i n t s = f a l s e
re t u r n l a b e l
} ( )
Crie uma função para
adicionar todos os objetos a
view
f u n c s e t u p V i e w s ( ) {
a d d S u b v i e w ( l a b e l )
}
Adicione o autolayout nessa função
Veja que eu já desativei o design automático
f u n c s e t u p V i e w s ( ) {
a d d S u b v i e w ( l a b e l )
a u t o l a y o u t ( )
}

18. PA S S O 3 :
C R I E S U A I N T E R FA C E Seu app precisa ser muito
bem planejado, já que se os
objetos não forem iguais não
vai funcionar bem
Existe o ,
que é fazer com classes,
porém, existe um
problema nisso…
J E I T O M A R AV I L H O S O
A forma de fazer é
praticamente a mesma da
passada, porém,
modularizada, por isso que
ela é melhor

19. PA S S O 4 :
A U T O L AY O U T
view.addConstraint(NSLayoutConstraint.init(item: label,
attribute: .centerX, relatedBy: .equal, toItem: view,
attribute: .centerX, multiplier: 1, constant: 1))
label.widthAnchor.constraint(equalToConstant: 100).isActive = true
label.heightAnchor.constraint(equalToConstant: 50).isActive = true
Não é tão difícil assim…

20. R E N ATA FA R I A
G R A D U A N D A E M S M D
E X - E S TÁ G I A R I A D O A P P L E
D E V E L O P E R A C A D E M Y
W W D C 1 7 S C O L A R S H I P
C H E G A M O S A O F I M !
Se quiser saber mais …
G O PA L S H A R M A
L E T S B U I L D T H AT A P P
B O B T H E D E V E L O P E R
P E S S O A S : A P P L E R E F E R E N C E :
U I K I T
N S L AY O U T C O N S T R A I N T
T H E A P P L I F E C Y C L E
renata.faria.gomes@hotmail.com
Renata Faria Gomes