Portuguese, Brazilian subtitles

← 05-07 Build Layout - Solution

Get Embed Code
13 Languages

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

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