YouTube

Got a YouTube account?

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

Portuguese, Brazilian subtitles

← 13-02 Adding a CheckBox - Solution

Get Embed Code
13 Languages

Showing Revision 11 created 09/30/2015 by Gislene Kucker Arantes.

  1. Ao construir este layout,
    pensemos nas visualizações necessárias.
  2. Vou partir do princípio que tudo isso
    já está construído, e nós só vamos
  3. falar sobre as coisas novas
    que precisamos adicionar ao layout.
  4. As duas novas visualizações
    que precisamos adicionar
  5. são um TextView para coberturas
  6. e uma visualização CheckBox
    para o chantilly.
  7. Você talvez não soubesse
    que esta visualização existia no Android,
  8. mas com sorte, uma busca no Google
    ajudou você a encontrar esta resposta.
  9. Seguindo para o passo 2,
    precisamos posicionar as visualizações.
  10. Se estas visualizações
    já estiverem na posição correta,
  11. só precisamos adicionar Coberturas
    e Chantilly verticalmente em uma coluna.
  12. Como a visualização de raiz
    é um layout vertical e linear,
  13. podemos só acrescentar
    estas visualizações no topo.
  14. No terceiro passo,
    vamos estilizar as visualizações.
  15. O estilo no cabeçalho Coberturas
    é o mesmo dos cabeçalhos
  16. Quantidade e Resumo do Pedido,
    então podemos simplesmente
  17. copiar e colar os cabeçalhos
    que já existem.
  18. Já a visualização CheckBox é nova,
    então precisamos estilizá-la de acordo.
  19. Devemos dar 24dp de espaço
    entre a caixa e o texto,
  20. e devemos mudar o tamanho da fonte
    de Chantilly para 16sp.
  21. Vamos fazer essas alterações
    no nosso aplicativo.
  22. Para acrescentar um cabeçalho Coberturas
    que pareça o cabeçalho Quantidade,
  23. basta copiar e colar o código.
  24. Copio e então o acrescento ao topo
    deste LinearLayout vertical.
  25. Certo, então agora aqui diz
    Quantidade duas vezes.
  26. Vou mudar o texto,
    para que diga Coberturas.
  27. Também copiei a margem do fundo,
  28. de forma que há algum espaço
    entre este cabeçalho e o conteúdo abaixo.
  29. Agora, não acrescentamos um CheckBox
    ao aplicativo antes,
  30. então vou ver no Google como fazer isso.
  31. Vou buscar por caixa de marcação android.
  32. Lembre-se de acrescentar Android,
    pois podem haver caixas de marcação
  33. para outras plataformas, como para a web
    ou outras plataformas móveis.
  34. Isso ajudará a conseguir
    um resultado específico para Android.
  35. Vamos tentar o primeiro link.
  36. Esta é a documentação de referência
    para a classe CheckBox.
  37. Percorro o documento
    e vejo uma bela visão geral de classe
  38. e então ela vai diretamente
    para os atributos XML.
  39. Eu realmente gostaria, no entanto,
    de um exemplo de XML para CheckBox.
  40. Então, voltemos aos resultados de busca.
  41. Vamos clicar no segundo link.
  42. Legal, agora mostra
    algumas figuras de caixas de marcação.
  43. E aqui está um pouco de XML.
  44. Parece muito bom.
  45. Tem duas CheckBoxes
    dentro de um LinearLayout.
  46. Vou copiar a primeira CheckBox,
  47. e então vou colar em nosso aplicativo.
  48. De volta ao aplicativo, vou colar isto
    depois do texto Coberturas,
  49. mas antes do texto Quantidade,
    então, bem aqui.
  50. Vou modificar o XML
    porque ele não encaixa em nosso caso.
  51. Vou remover o id e também o texto aqui.
  52. Em vez de carne,
    porque nosso café não vende carne,
  53. vou digitar Chantilly.
  54. Por sinal, o que você viu antes,
    @string/meat,
  55. referia-se a uma resource string
    no arquivo strings.xml.
  56. Vamos falar sobre isso depois,
    mas, por enquanto,
  57. você pode só digitar a string
    diretamente aqui.
  58. E veja, o preview atualizou,
    então temos uma caixa que diz Chantilly.
  59. O bom da visualização de caixa de marcação
    é que ele dá uma caixa,
  60. assim como texto,
    então você não precisa adicionar
  61. outra visualização de texto aqui.
  62. Também não precisamos desta linha
    que fala sobre onClick.
  63. Só o que nos importa para esta tarefa
    é fazer a CheckBox aparecer aqui.
  64. A outra forma como você
    poderia ter chegado a este XML
  65. seria olhando a tabela
    de visualizações comuns de Android.
  66. Esta tabela lista algumas
    visualizações comuns de Android
  67. e tem exemplos de XML também.
  68. Aqui está a visualização de CheckBox
    e eis um exemplo de como ficaria
  69. e o XML correspondente.
  70. Você poderia ter copiado o XML daqui
    e colado no aplicativo.
  71. Voltando ao Android Studio,
    vamos rodar o aplicativo para vê-lo.
  72. E aqui está.
  73. Está muito bom.
  74. Temos o cabeçalho Coberturas
    e uma CheckBox de Chantilly.
  75. Também tem uma animação legal
    quando marcamos a caixa.
  76. O único problema que vejo
    é que o espaçamento está errado.
  77. Por exemplo, está muito apertado
    entre o cabeçalho Quantidade
  78. e a CheckBox Chantilly, e também
    não há espaço suficiente por aqui.
  79. Voltando às linhas vermelhas
    que nos deram,
  80. deveríamos adicionar 24dp de espaço aqui,
    e mudar o tamanho da fonte para 16sp.
  81. Primeiro, vou mudar o tamanho da fonte.
  82. Vou digitar android:textSize
    e depois colocar 16sp.
  83. Vou abrir o preview aqui
    para confirmar que a fonte aumentou,
  84. e aumentou mesmo.
  85. Se você não sabe se atualizou,
    você pode apertar este botão.
  86. Certo.
  87. Com relação ao espaçamento,
    eu consegui fazer funcionar
  88. na base de muita tentativa e erro.
  89. Tentei definir os valores de margem
  90. e então tentei definir o padding,
    e acabou que paddingLeft
  91. controla o espaçamento
    entre a caixa e o texto aqui.
  92. Vamos acrescentar o padding agora.
  93. Legal, o texto se mexeu.
  94. Ainda vejo mais um problema.
  95. Tem espaço vertical suficiente aqui,
    mas aqui não tem.
  96. Preciso ou acrescentar padding embaixo,
    ou margem embaixo nesta visualização,
  97. ou preciso acrescentar padding no topo,
    ou margem no topo neste cabeçalho.
  98. Qualquer um dos dois funcionaria,
  99. então vou adicionar uma margem ao topo
    neste cabeçalho de Quantidade.
  100. Pronto, ficou melhor!
  101. Agora as coisas parecem
    ter um espaçamento mais igual.
  102. Vou rodar este aplicativo no meu aparelho.
  103. E aqui está o app.
  104. Ficou muito bom.
  105. Bom trabalho.
  106. Quando precisar mudar
    mais a UI do seu aplicativo,
  107. você pode seguir este padrão
    de buscar a informação no Google
  108. e depois aplicar ao aplicativo.