YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Portuguese, Brazilian subtitles

← Add the Other Team in XML

Get Embed Code
13 Languages

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

  1. Antes de começar,
    vou responder a esta pergunta.

  2. Eu só sei
    de dois ViewGroups:
  3. LinearLayouts
    e RelativeLayouts.
  4. A questão aqui...
  5. é que estes espaço
    deve ser dividido ao meio.
  6. Usando layout_weight
    fica bem fácil.
  7. Bem, vamos ver o código.
  8. Não estou mais
    trabalhando em Java,
  9. então vou até a aba
    activity_main.xml.
  10. Aqui está meu XML.
  11. Eu vou começar
    colando todo este código
  12. em outro LinearLayout.
  13. Este é o LinearLayout pai...
  14. dos meus dois
    LinearLayouts menores.
  15. E vou trazer estas duas linhas
    aqui para cima...
  16. porque elas precisam
    estar anexadas à rootView.
  17. Adiciono uma chave
    de fechamento.
  18. O Android Studio
    fez automaticamente
  19. uma tag de fechamento
    para mim aqui.
  20. Vou simplesmente
    recortá-la...
  21. e colá-la no final.
  22. Certo,
    um sublinhado vermelho.
  23. O erro diz...
  24. que devo definir
    layout_height e layout_width.
  25. Opa! Vamos fazer isso.
  26. Como esta é a rootView,
  27. usarei match_parent.
  28. Certo, eu tenho
    um LinearLayout
  29. envolvendo
    um LinearLayout filho.
  30. Se eu pré-visualizar...
  31. É quase a mesma coisa.
  32. Certo, então vou copiar...
  33. tudo no LinearLayout
    do time A...
  34. e colarei sob o time A.
  35. Este será o LinearLayout
    do time B.
  36. As coisas estão começando
    a ficar meio bagunçadas.
  37. Vou apertar Cmd+A,
    ou "Selecionar tudo",
  38. e vou usar o atalho de teclado
    Cmd+Option+L
  39. para formatar meu código.
  40. No Windows, é Ctrl+Alt+L.
    Agora está melhor.
  41. Quero garantir que você está
    entendendo o que houve.
  42. No topo,
    há um LinearLayout raiz.
  43. Começa aqui e,
    rolando para o fim,
  44. termina aqui.
  45. Dentro do LinearLayout raiz -
    vou voltar para cima -
  46. tem um layout filho,
    que começa aqui -
  47. vou rolar devagar -
  48. e termina aqui.
    É do time A.
  49. E tem outro
    LinearLayout filho,
  50. que começa aqui -
    vou rolar devagar -
  51. e termina aqui,
    que é do time B.
  52. Percebi algo vermelho
    lá em cima,
  53. então vou voltar
    para ver o erro.
  54. "Orientação errada,
    não especificada
  55. e padrão é horizontal,
  56. mas layout tem
    muitos filhos
  57. e a largura de pelo menos um
    é igual à do pai."
  58. Eu quero mesmo
    que seja horizontal.
  59. Mas vamos especificar
    a orientação.
  60. Isto não é de fato necessário,
    pois o padrão é horizontal,
  61. mas é bom deixar explícito.
  62. E dizia algo sobre os filhos
    estarem se sobrepondo.
  63. Vou pré-visualizar.
  64. Não parece ter mudado
    muita coisa,
  65. embora eu tenha tido o trabalho
    de copiar outro LinearLayout.
  66. Pode ter a ver com o erro
    que acabei de ler.
  67. Dizia que é
    um layout horizontal,
  68. que tenta justapor
    estes LinearLayouts,
  69. mas que o layout_width
    do LinearLayout
  70. é match_parent,
    o que toma a tela.
  71. Então meu primeiro LinearLayout
    está tomando a tela toda...
  72. e o outro está justaposto
    em algum lugar fora da tela.
  73. Vamos pensar
    no que pretendemos.
  74. Queremos que os layouts
    tomem o mesmo espaço
  75. e fiquem lado a lado.
  76. Eis o que teremos que usar:
    layout_weights.
  77. Vou até o primeiro
    LinearLayout...
  78. e adicionarei
    "layout_weight=1".
  79. Também vou definir
    sua largura como 0.
  80. Já dá para ver que temos
    dois LinearLayouts
  81. que só não estão
    sendo bem exibidos.
  82. Mas já melhorou.
  83. Também porei layout_weight
    no meu segundo LinearLayout,
  84. este aqui.
  85. Vou rolar para baixo...
    Aqui está o segundo.
  86. Vou fazer
    a mesmíssima coisa.
  87. Definirei que ele também
    tem peso 1,
  88. ou seja,
    layout_weights iguais,
  89. e definirei a largura como 0.
  90. Bom, a razão para definir
    as larguras como 0...
  91. é que, se os dois lados
    não tomam nenhum espaço,
  92. todo o espaço extra,
    ou seja, a tela toda,
  93. será dividido ao meio
    e distribuído aos dois,
  94. pois ambos têm
    o mesmo peso.
  95. Se isso for meio confuso,
    deixei alguns vídeos
  96. nas "Notas do instrutor"
    sobre layout_weight.
  97. Bom, está bem legal,
    só que diz que é do time A.
  98. Vou rolar a tela
    e mudar isso.
  99. Pronto, mudei para time B.
  100. Você pode ter percebido
    que tem outro erro aqui.
  101. Este erro acontece
    por termos um ID duplicado.
  102. Lembre-se,
    eu copiei e colei um código.
  103. Há duas coisas tentando
    ter o mesmo ID,
  104. "team_a_score".
  105. Vou mudar
    para "team_b_score".
  106. Está bem bonito!
  107. Está meio pequeno,
    vou dar um zoom,
  108. mas diz time B aqui.
  109. Todos os botões
    e TextViews estão certos,
  110. então vou tentar rodar
    no meu celular.
  111. Pronto. Está bem bonito.
  112. Os botões do time A
    estão respondendo,
  113. que ótimo.
  114. E os do time B, bem...
    também respondem.
  115. Que coisa.
  116. Mas nós só queríamos
    consertar o XML,
  117. não nos importamos
    com o Java.
  118. Agora que o XML funciona,
    que tal consertar o Java?