Return to Video

13-02 Adding a CheckBox - Solution

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

more » « less
Video Language:
English
Team:
Udacity
Project:
UD837 - Android for Beginners
Duration:
05:27

Portuguese, Brazilian subtitles

Revisions Compare revisions