Portuguese, Brazilian subtitles

← Add the Other Team in XML

Get Embed Code
13 Languages

Showing Revision 1 created 10/09/2015 by sp16.

  1. Antes de começar a codificar,
    vou responder a esta pergunta
  2. Eu realmente conheço até agora só
    dois ViewGroups: LinearLayouts e
  3. RelativeLayouts.
  4. A palavra chave aqui era que estes
    dois precisam ter um espaço igual.
  5. Usar o layout_weight é um jeito
    bem fácil de fazer isso.
  6. Vamos dar uma olhada no código.
  7. Muito bem. Eu não estou mais
    trabalhando com Java, então vou até
  8. o activity_main.xml.
  9. E aqui está meu arquivo XML.
  10. Vou começar colocando todo este
    código dentro de um outro LinearLayout.
  11. E este é o LinearLayout parent para
    dois mini LinearLayouts.
  12. E eu vou mover estas duas
    linhas aqui em cima,
  13. porque elas precisam ser atreladas
    ao View raiz, fechar uma chave.
  14. O Android Studio criou automaticamente
    um tag de fechamento para mim aqui.
  15. Então vou cortar
  16. este tag de fechamento, rolar
    até embaixo e colá-lo.
  17. Agora tem uma linha vermelha,
    e se eu olhar para o erro,
  18. dá para ver que ele diz que preciso ter o
    layout_height e o layout_width definidos.
  19. Vamos fazer isso.
  20. Então porque isso é o View raiz,
    eu vou fazer disso match_parent.
  21. Então,
  22. eu tenho um LinearLayout circundando
    um LinearLayout filho agora.
  23. E se eu for para o Preview,
    continua com a mesma aparência.
  24. Então, o que vou fazer é copiar tudo do
  25. LinearLayout do Time A, e logo
    abaixo do Time A, eu vou colá-lo.
  26. E isso será o LinearLayout do Time B.
  27. Agora as coisas estão começando a ficar
    um pouco desorganizadas.
  28. Então vou usar um Cmd+A, ou
    selecionar tudo, e daí vou
  29. usar o atalho de teclado
    Cmd+Option+L para formatar meu código.
  30. No Windows é Ctrl+Alt+L.
    Está um pouco melhor.
  31. Agora eu só quero ter certeza de que
    você entende o que está acontecendo aqui.
  32. Rolando até o topo, eu tenho
    um LinearLayout raiz aqui.
  33. Ele começa aqui, e se você rolar
    até embaixo, ele termina aqui.
  34. Dentro deste LinearLayout raiz,
    vou rolar para cima de novo,
  35. tenho um layout filho aqui,
    que começa aqui.
  36. Vou rolar para baixo devagar.
  37. E termina aqui.
  38. Isto é para o Time A.
  39. E eu tenho um outro LinearLayout filho
    que começa aqui
  40. Rolar para baixo devagar, e
    termina aqui para o Time B.
  41. Agora percebemos algo vermelho no topo.
  42. Então vou rolar para cima de novo
    e ver o que o erro diz.
  43. Orientação errada? Nenhuma orientação
    especificada, e o padrão é horizontal,
  44. no entanto este layout
    tem múltiplos filhos,
  45. e ao menos um tem
    layout_width="match_parent".
  46. Bem, nós queremos que seja horizontal,
    mas vamos adiante e
  47. especifiquemos a orientação.
  48. De novo, isto não é tecnicamente
    necessário, porque o padrão é horizontal,
  49. mas é bom explicitar.
  50. E ele estava dizendo algo sobre
    filhos cobrindo um ao outro.
  51. Vou clicar em Preview.
  52. E isso não parece ter mudado muito,
    apesar de eu ter tido
  53. todo o trabalho de copiar e colar
    outro LinearLayout.
  54. Isto deve ter a ver com o erro
    que nós acabamos de ver.
  55. Ele dizia que era um layout horizontal.
  56. Então ele está tentando colocar estes
    dois LinearLayouts lado a lado, mas
  57. aquele LinearLayout tem um
    layout_width de
  58. match_parent, o qual preenche a tela.
  59. Então basicamente meu primeiro
    LinearLayout está preenchendo a tela
  60. e o outro LinearLayout está sendo colocado
    ao lado dele em algum lugar fora da tela.
  61. Então pensemos no que queremos que
    queremos mesmo que aconteça neste ponto.
  62. Queremos que os dois layouts ocupem o
    mesmo espaço e um ao lado do outro.
  63. Então é aqui que precisamos trazer
    o layout_weight.
  64. Eu vou pegar o primeiro LinearLayout e
  65. dar a ele um layout_weight de 1.
  66. Também vou configurar sua largura para 0.
  67. Já dá para ver que temos de
    fato dois LinearLayouts,
  68. eles só não estão sendo
    exibidos adequadamente.
  69. Mas isso é um pouco melhor.
  70. Também tenho que por um layout_weight
    no meu segundo LinearLayout,
  71. Este aqui.
  72. Então vou rolar para baixo.
  73. Aqui está meu segundo LinearLayout.
  74. Farei exatamente a mesma coisa.
  75. Vou dizer que ele tem layout_weight
    de 1 também, então
  76. agora eles têm layout_weights
    equivalentes.
  77. Então vou configurar a largura para 0.
  78. E o motivo de eu configurar as
    larguras de ambos para 0
  79. é basicamente que estes dois lados
    não têm largura.
  80. Assim, ele vai pegar todo o
    espaço extra,
  81. que é a tela toda, e dividí-lo dando
    metade para um e
  82. metade para o outro, porque ambos
    têm o mesmo layout_weight.
  83. Se isso for confuso, eu pus
    links de alguns vídeos nas
  84. notas do instrutor que falam
    sobre layout_weight.
  85. Mas isso está parecendo bom,
    exceto que ele diz Time A.
  86. Eu vou rolar para baixo para
    mudar isso para Time B.
  87. Talvez você tenha percebido que
    há um erro aqui também, e
  88. este erro ocorre porque, bem,
    temos um ID duplicado.
  89. Lembre-se de que eu só copiei
    e colei o código.
  90. Então, basicamente temos duas
    coisas tentando ter o mesmo ID
  91. do team_a_score.
  92. Eu vou mudar isso para team_b_score.
  93. Está parecendo muito bom.
  94. É um pouco difícil de ver.
    Vou dar mais zoom.
  95. Mas diz Time B aqui.
  96. E eu tenho todos os botões certos,
    e todos os TextViews certos.
  97. Vou tentar rodar isso
    no meu telefone.
  98. E parece muito bom.
  99. Agora, se eu aperto os botões do
    Time A, ele atualiza, e isso é ótimo.
  100. Se aperto os botões do Time B,
    ele também atualiza.
  101. Isto é especial.
  102. Mas lembre-se: nós só queríamos
    acertar o XML.
  103. Nós não nos importamos com o Java.
  104. Mas agora que temos o XML funcionando,
    porque não consertar o Java?