Showing Revision 1 created 10/14/2015 by sp2.

1. Title:
2. Description:

3. 205 0:00 - 0:04
   Para construir este layout,
   preciso abrir o arquivo activity_main.xml.
4. 4660 0:05 - 0:06
   Sei que preciso de um LinearLayout vertical
5. 6640 0:07 - 0:09
   para colocar essas Views
   em uma coluna vertical.
6. 9340 0:09 - 0:12
   Primeiro vou mudar o RelativeLayout
   em um LinearLayout.
7. 12840 0:13 - 0:16
   Imediatamente, ele mostra um erro
   na tag de abertura
8. 16540 0:17 - 0:21
   que não coincide com a tag de fechamento,
   assim, copio daqui para colar aqui.
9. 20840 0:21 - 0:22
   Agora as tags coincidem.
10. 22085 0:22 - 0:24
    Em seguida, vou adicionar as Views.
11. 23930 0:24 - 0:26
    Primeiro, tenho o TextView de Quantidade.
12. 25720 0:26 - 0:29
    Vou aproveitar este TextView
    e alterar seu texto para Quantidade.
13. 29821 0:30 - 0:32
    O próximo é o TextView com o valor zero.
14. 31960 0:32 - 0:35
    Posso copiar o primeiro TextView
    e colar aqui abaixo deste.
15. 34971 0:35 - 0:38
    Vou alterar o texto para o texto do valor 0
    coincidir com a imagem da tela.
16. 38430 0:38 - 0:41
    O último filho neste LinearLayout é o botão.
17. 41500 0:42 - 0:44
    Ainda não adicionamos botão no layout,
    então vamos buscar no Google.
18. 44994 0:45 - 0:48
    Ao abrir navegador,
    procure por "botão Android."
19. 48160 0:48 - 0:52
    Este primeiro link parece bom,
    é um site developer.android.com.
20. 52540 0:53 - 0:54
    Aqui está a documentação para o botão.
21. 54215 0:54 - 0:56
    Podemos ignorar a maior parte do texto.
22. 56700 0:57 - 0:59
    Vamos rolar a tela para ler
    o resumo da Classe.
23. 59211 0:59 - 1:02
    O texto trata de um código Java,
    que ainda não aprendemos.
24. 62880 1:03 - 1:06
    Mas aqui, temos arquivos
    em XML para um botão.
25. 66300 1:06 - 1:08
    Podemos copiar isto
    e ver faz em nosso código.
26. 69257 1:09 - 1:12
    Em nosso layout vou adicionar o botão
    abaixo dessas duas TextViews.
27. 72748 1:13 - 1:15
    E colar o código da documentação
    neste local do nosso código.
28. 76011 1:16 - 1:18
    E agora, em vez da string
    de "autodestruição",
29. 78154 1:18 - 1:21
    vamos para algo mais amigável,
    como o nosso Pedido.
30. 82280 1:22 - 1:24
    Não precisamos do resto,
    podemos apagar a linha.
31. 84900 1:25 - 1:27
    Legal, você agora tem uma TextView de Quantidade,
32. 87125 1:27 - 1:29
    uma TextView que diz 0,
    e um botão de Pedido.
33. 90320 1:30 - 1:32
    Vamos executar no app,
    e ver como se parece,
34. 92220 1:32 - 1:34
    apertando o botão verde Play.
35. 94461 1:34 - 1:36
    Vemos aqui embaixo
    ele sendo construído.
36. 97058 1:37 - 1:39
    Opa, não é isso que queremos.
37. 99180 1:39 - 1:43
    Parece que o LinearLayout
    é horizontal ao invés de vertical.
38. 103434 1:43 - 1:47
    Então, vamos garantir que adicionamos
    o atributo de orientação.
39. 107794 1:48 - 1:51
    Vamos mudar para o texto
    android;orientation=vertical.
40. 112020 1:52 - 1:53
    Isso deve resolver o problema.
41. 113550 1:54 - 1:55
    Vamos executar novamente.
42. 115495 1:55 - 1:57
    Ok, agora está melhor.
43. 117010 1:57 - 2:00
    Os três elementos filhos exibidos
    em uma coluna vertical.
44. 120240 2:00 - 2:02
    Só falta customizar esses campos
45. 121690 2:02 - 2:04
    para que fiquem parecidos
    com o nosso modelo de tela.
46. 125230 2:05 - 2:09
    Na tela vemos a TextView
    de Quantidade em maiúscula.
47. 129570 2:10 - 2:14
    Na Lição 1, conhecemos o atributo
    chamado android:textAllCaps.
48. 133930 2:14 - 2:16
    E ele aparece aqui
    no autocompletar.
49. 136178 2:16 - 2:18
    Se aparecer isso,
    basta apertar Enter.
50. 138274 2:18 - 2:20
    E será automaticamente adicionado ao código.
51. 141400 2:21 - 2:24
    Definimos esse valor como true,
    porque queremos tudo em maiúsculas.
52. 145009 2:25 - 2:28
    O motivo de usar esse atributo
    para capitalizar o texto,
53. 148560 2:29 - 2:31
    é para se quisermos mudar
    a interface do usuário,
54. 150810 2:31 - 2:33
    e mostrar QUANTIDADE
    em letras minúsculas, como aqui,
55. 153298 2:33 - 2:37
    tudo o que precisaremos fazer
    é remover este atributo sem alterar o texto.
56. 158000 2:38 - 2:40
    Para a TextView que exibe o valor "0",
57. 160190 2:40 - 2:43
    devemos usar o texto com tamanho 16 sp.
58. 162849 2:43 - 2:44
    Vou adicionar agora,
59. 163895 2:44 - 2:47
    a sugestão surge no autocompletar,
    e então aperto Enter.
60. 167194 2:47 - 2:50
    Vou escolher então 16 sp para o valor.
61. 170651 2:51 - 2:53
    Também queremos fonte de cor preta.
62. 173113 2:53 - 2:55
    Vou usar o sistema de cores Android para o preto,
63. 175255 2:55 - 2:57
    com esta referência aqui.
64. 177380 2:57 - 3:01
    Legal, assim concluímos as TextViews
    de Quantidade e do valor "0".
65. 180845 3:01 - 3:02
    O botão de Pedido está bem sim,
66. 182738 3:03 - 3:06
    ele capitalizará automaticamente texto em um botão,
67. 186554 3:07 - 3:08
    e a largura e altura de wrap_content.
68. 188820 3:09 - 3:12
    Precisamos corrigir o espaço vertical aqui.
69. 191820 3:12 - 3:17
    Queremos 16 dp de padding ou margem
    entre TextViews de Quantidade e "0".
70. 197190 3:17 - 3:21
    Também queremos distância de 16 dp
    entre o "0" e o botão de Pedido.
71. 201396 3:21 - 3:23
    Você pode implementar isso
    de maneiras diferentes,
72. 203900 3:24 - 3:28
    Para este botão vou adicionar como layout_marginTop,
73. 211377 3:31 - 3:35
    E como layout_marginBottom
    para a TextView Quantidade.
74. 217810 3:38 - 3:40
    Fique à vontade para usar outro modo,
    desde que fique assim.
75. 220810 3:41 - 3:43
    Escolhi fazer uma margem inferior
    e uma margem superior
76. 223409 3:43 - 3:47
    é porque sei que esta área central
    irá mudar mais tarde.
77. 227040 3:47 - 3:50
    Será alterado para seletor de quantidade
    com um botões de somar e subtrair.
78. 230578 3:51 - 3:53
    e eu ainda quero ter 16 dp de espaço
79. 233531 3:54 - 3:56
    entre o título Quantidade e o seletor.
80. 236720 3:57 - 3:58
    O mesmo vale para o botão.
81. 238577 3:59 - 4:01
    Ok, vamos executá-lo novamente
    em nosso dispositivo.
82. 241280 4:01 - 4:03
    Legal, ficou exatamente como queríamos.
83. 243350 4:03 - 4:05
    O TextView QUANTIDADE
    está em maiúsculas,
84. 245852 4:06 - 4:11
    a TextView "0" tem fonte preta,
    16 de tamanho, e o botão de Pedido aqui.
85. 251710 4:12 - 4:15
    Temos também 16 dp de espaço entre as Views
86. 255760 4:16 - 4:18
    Bom trabalho! Opa, e eu quase esqueci.
87. 258240 4:18 - 4:21
    O questionário também pergunta
    o que ocorre quando você aperta o botão.
88. 261560 4:22 - 4:24
    Bem, na verdade, ele não faz nada,
89. 264449 4:24 - 4:26
    pelo menos no momento.
90. 265889 4:26 - 4:28
    Assista para descobrir
    o que acontece a seguir.