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