Showing Revision 2 created 08/15/2016 by Udacity Robot.

1. Title:
   Add the Other Team in XML
2. Description:

3. 0 0:00 - 0:03
   Antes de começar,
   vou responder a esta pergunta.
4. 3434 0:03 - 0:06
   Eu só sei
   de dois ViewGroups:
5. 6267 0:06 - 0:08
   LinearLayouts
   e RelativeLayouts.
6. 8467 0:08 - 0:10
   A questão aqui...
7. 10167 0:10 - 0:13
   é que estes espaço
   deve ser dividido ao meio.
8. 13467 0:13 - 0:16
   Usando layout_weight
   fica bem fácil.
9. 17234 0:17 - 0:20
   Bem, vamos ver o código.
10. 19834 0:20 - 0:22
    Não estou mais
    trabalhando em Java,
11. 21767 0:22 - 0:26
    então vou até a aba
    activity_main.xml.
12. 25601 0:26 - 0:27
    Aqui está meu XML.
13. 28133 0:28 - 0:32
    Eu vou começar
    colando todo este código
14. 32234 0:32 - 0:34
    em outro LinearLayout.
15. 33734 0:34 - 0:36
    Este é o LinearLayout pai...
16. 36334 0:36 - 0:39
    dos meus dois
    LinearLayouts menores.
17. 39033 0:39 - 0:44
    E vou trazer estas duas linhas
    aqui para cima...
18. 43734 0:44 - 0:46
    porque elas precisam
    estar anexadas à rootView.
19. 47200 0:47 - 0:49
    Adiciono uma chave
    de fechamento.
20. 49434 0:49 - 0:51
    O Android Studio
    fez automaticamente
21. 51434 0:51 - 0:54
    uma tag de fechamento
    para mim aqui.
22. 53734 0:54 - 0:57
    Vou simplesmente
    recortá-la...
23. 56868 0:57 - 1:00
    e colá-la no final.
24. 60934 1:01 - 1:05
    Certo,
    um sublinhado vermelho.
25. 65033 1:05 - 1:08
    O erro diz...
26. 67734 1:08 - 1:10
    que devo definir
    layout_height e layout_width.
27. 70501 1:11 - 1:12
    Opa! Vamos fazer isso.
28. 73100 1:13 - 1:15
    Como esta é a rootView,
29. 76033 1:16 - 1:18
    usarei match_parent.
30. 79834 1:20 - 1:23
    Certo, eu tenho
    um LinearLayout
31. 82934 1:23 - 1:26
    envolvendo
    um LinearLayout filho.
32. 86234 1:26 - 1:28
    Se eu pré-visualizar...
33. 88534 1:29 - 1:30
    É quase a mesma coisa.
34. 90267 1:30 - 1:34
    Certo, então vou copiar...
35. 94267 1:34 - 1:38
    tudo no LinearLayout
    do time A...
36. 97734 1:38 - 1:42
    e colarei sob o time A.
37. 101934 1:42 - 1:46
    Este será o LinearLayout
    do time B.
38. 107434 1:47 - 1:52
    As coisas estão começando
    a ficar meio bagunçadas.
39. 112033 1:52 - 1:57
    Vou apertar Cmd+A,
    ou "Selecionar tudo",
40. 117033 1:57 - 2:01
    e vou usar o atalho de teclado
    Cmd+Option+L
41. 121167 2:01 - 2:03
    para formatar meu código.
42. 123300 2:03 - 2:08
    No Windows, é Ctrl+Alt+L.
    Agora está melhor.
43. 127767 2:08 - 2:11
    Quero garantir que você está
    entendendo o que houve.
44. 131334 2:11 - 2:16
    No topo,
    há um LinearLayout raiz.
45. 136434 2:16 - 2:21
    Começa aqui e,
    rolando para o fim,
46. 141000 2:21 - 2:23
    termina aqui.
47. 143167 2:23 - 2:27
    Dentro do LinearLayout raiz -
    vou voltar para cima -
48. 148000 2:28 - 2:32
    tem um layout filho,
    que começa aqui -
49. 151834 2:32 - 2:34
    vou rolar devagar -
50. 155501 2:36 - 2:39
    e termina aqui.
    É do time A.
51. 158701 2:39 - 2:41
    E tem outro
    LinearLayout filho,
52. 160834 2:41 - 2:44
    que começa aqui -
    vou rolar devagar -
53. 165033 2:45 - 2:47
    e termina aqui,
    que é do time B.
54. 167434 2:47 - 2:49
    Percebi algo vermelho
    lá em cima,
55. 169300 2:49 - 2:53
    então vou voltar
    para ver o erro.
56. 174200 2:54 - 2:57
    "Orientação errada,
    não especificada
57. 176934 2:57 - 2:58
    e padrão é horizontal,
58. 178234 2:58 - 3:00
    mas layout tem
    muitos filhos
59. 180300 3:00 - 3:04
    e a largura de pelo menos um
    é igual à do pai."
60. 185200 3:05 - 3:08
    Eu quero mesmo
    que seja horizontal.
61. 187567 3:08 - 3:10
    Mas vamos especificar
    a orientação.
62. 191133 3:11 - 3:15
    Isto não é de fato necessário,
    pois o padrão é horizontal,
63. 194968 3:15 - 3:17
    mas é bom deixar explícito.
64. 197834 3:18 - 3:21
    E dizia algo sobre os filhos
    estarem se sobrepondo.
65. 202167 3:22 - 3:24
    Vou pré-visualizar.
66. 204834 3:25 - 3:27
    Não parece ter mudado
    muita coisa,
67. 206901 3:27 - 3:32
    embora eu tenha tido o trabalho
    de copiar outro LinearLayout.
68. 211734 3:32 - 3:35
    Pode ter a ver com o erro
    que acabei de ler.
69. 215367 3:35 - 3:39
    Dizia que é
    um layout horizontal,
70. 218734 3:39 - 3:42
    que tenta justapor
    estes LinearLayouts,
71. 222234 3:42 - 3:46
    mas que o layout_width
    do LinearLayout
72. 226467 3:46 - 3:50
    é match_parent,
    o que toma a tela.
73. 229734 3:50 - 3:54
    Então meu primeiro LinearLayout
    está tomando a tela toda...
74. 234167 3:54 - 3:59
    e o outro está justaposto
    em algum lugar fora da tela.
75. 239634 4:00 - 4:03
    Vamos pensar
    no que pretendemos.
76. 243234 4:03 - 4:06
    Queremos que os layouts
    tomem o mesmo espaço
77. 246501 4:07 - 4:08
    e fiquem lado a lado.
78. 247901 4:08 - 4:12
    Eis o que teremos que usar:
    layout_weights.
79. 251634 4:12 - 4:15
    Vou até o primeiro
    LinearLayout...
80. 255234 4:15 - 4:20
    e adicionarei
    "layout_weight=1".
81. 260901 4:21 - 4:26
    Também vou definir
    sua largura como 0.
82. 265968 4:26 - 4:30
    Já dá para ver que temos
    dois LinearLayouts
83. 269734 4:30 - 4:33
    que só não estão
    sendo bem exibidos.
84. 272734 4:33 - 4:34
    Mas já melhorou.
85. 274334 4:34 - 4:38
    Também porei layout_weight
    no meu segundo LinearLayout,
86. 277534 4:38 - 4:39
    este aqui.
87. 278667 4:39 - 4:42
    Vou rolar para baixo...
    Aqui está o segundo.
88. 282000 4:42 - 4:44
    Vou fazer
    a mesmíssima coisa.
89. 284033 4:44 - 4:49
    Definirei que ele também
    tem peso 1,
90. 289000 4:49 - 4:51
    ou seja,
    layout_weights iguais,
91. 292434 4:52 - 4:56
    e definirei a largura como 0.
92. 296567 4:57 - 5:00
    Bom, a razão para definir
    as larguras como 0...
93. 299934 5:00 - 5:04
    é que, se os dois lados
    não tomam nenhum espaço,
94. 304334 5:04 - 5:09
    todo o espaço extra,
    ou seja, a tela toda,
95. 308534 5:09 - 5:12
    será dividido ao meio
    e distribuído aos dois,
96. 312033 5:12 - 5:15
    pois ambos têm
    o mesmo peso.
97. 314734 5:15 - 5:17
    Se isso for meio confuso,
    deixei alguns vídeos
98. 317334 5:17 - 5:20
    nas "Notas do instrutor"
    sobre layout_weight.
99. 320133 5:20 - 5:25
    Bom, está bem legal,
    só que diz que é do time A.
100. 324634 5:25 - 5:27
     Vou rolar a tela
     e mudar isso.
101. 327167 5:27 - 5:30
     Pronto, mudei para time B.
102. 330334 5:30 - 5:35
     Você pode ter percebido
     que tem outro erro aqui.
103. 334901 5:35 - 5:40
     Este erro acontece
     por termos um ID duplicado.
104. 339534 5:40 - 5:42
     Lembre-se,
     eu copiei e colei um código.
105. 342167 5:42 - 5:46
     Há duas coisas tentando
     ter o mesmo ID,
106. 345901 5:46 - 5:48
     "team_a_score".
107. 347834 5:48 - 5:52
     Vou mudar
     para "team_b_score".
108. 351601 5:52 - 5:54
     Está bem bonito!
109. 353634 5:54 - 5:56
     Está meio pequeno,
     vou dar um zoom,
110. 356634 5:57 - 5:59
     mas diz time B aqui.
111. 359133 5:59 - 6:02
     Todos os botões
     e TextViews estão certos,
112. 362234 6:02 - 6:04
     então vou tentar rodar
     no meu celular.
113. 365300 6:05 - 6:08
     Pronto. Está bem bonito.
114. 367834 6:08 - 6:12
     Os botões do time A
     estão respondendo,
115. 372033 6:12 - 6:13
     que ótimo.
116. 373234 6:13 - 6:19
     E os do time B, bem...
     também respondem.
117. 378667 6:19 - 6:21
     Que coisa.
118. 380667 6:21 - 6:23
     Mas nós só queríamos
     consertar o XML,
119. 383267 6:23 - 6:25
     não nos importamos
     com o Java.
120. 385467 6:25 - 6:30
     Agora que o XML funciona,
     que tal consertar o Java?