Bem-vindo ao curso de Introdução ao Desenvolvimento de Aplicativos Android.
Vamos implementar agora a interface gráfica de envio de mensagens usando
o RelativeLayout, que é o gerenciador onde os elementos da interface gráfica são
posicionados tendo os outros elementos como referência.
Nesse gerenciador nós posicionamos os elementos ao lado, abaixo,
ou acima uns dos outros.
Alinhamos suas bordas e definimos uma margem de separação entre elas.
Vamos ver no código-fonte do aplicativo como isso pode ser feito.
O primeiro elemento que eu adicionei no arquivo
XML foi o rótulo com a palavra 'Para', que fica no canto superior esquerdo.
Como eu estou usando RelativeLayout, eu achei por bem fornecer
uma ID para todos os elementos, já que precisamos dessa ID para fazer referência.
Todos os elementos de interface gráfica que eu criei eu configurei a largura e
a altura como 'wrap_content', o que significa que os elementos terão o
tamanho, no mínimo, suficiente para conter tudo o que for necessário dentro deles.
Nesta TextView eu atribuí uma margem superior de 14dp,
para que o topo do texto não fique tão próximo do topo da janela.
O lado esquerdo desta TextView foi alinhado ao lado esquerdo da janela usando
'layout_alignParentLeft' e ao topo da janela usando 'layout_alignParentTop'.
No fim eu adicionei texto para a TextView fazendo referência a uma variável que está
dentro do arquivo strings.xml da pasta 'Values'.
Observe nesse arquivo que essa variável de nome 'to_label' possui como valor
a string 'Para'.
Notem que existe realce no atributo 'Android: layout_alignParentLeft'.
Isso indica para nós warning do Android Studio.
Nesse caso específico o Android Studio está dizendo que você deveria
preferencialmente usar 'Android layout_alignParentStart' ao invés
de layout_alignParentLeft, pois isso dará mais suporte aos
dispositivos que o texto flui da direita para esquerda.
A opção é sua de acatar a sugestão ou não,
pois essa warning não causará nenhum erro tempo de compilação ou de execução.
No nosso caso bastaria trocar atributo pelo outro,
mas caso você esteja programando projeto configurado com minha SDK menor que 17,
você deverá manter os dois atributos configurados como true.
Após configurar o rótulo eu vou posicionar o campo de entrada de texto
que está ao lado dele.
Este campo possui nome 'Edit Subject'.
Largura e altura foram configuradas como 'wrap_content' e o atributo
'hint' foi usado.
Este atributo serve para dar uma dica do que o usuário precisa preencher nesse
campo.
A palavra Destinatários aparece tom de cinza quando a Edit Text está
vazia e sem foco, e some quando o usuário começa a escrever texto na Edit Text.
Esta é uma maneira simples e barata de melhorar a usabilidade dos seus
aplicativos.
Para posicionar a Edit Text vou usar o atributo layout_toRight
Of e informar esse atributo que esta Edit Text deve ficar ao lado do Label.
Eu também vou informar aqui que o lado direito desta caixa de texto deve ser
alinhado com o lado direito da janela, sendo que isso fará com que a caixa
de texto aumente de tamanho para ocupar todo o espaço horizontal disponível.
Se esta informação não fosse fornecida, a caixa de texto teria o
tamanho da palavra Destinatários, que foi colocada no atributo hint,
dado que a largura foi anteriormente configurada como 'wrap_content'.
[SEM SOM] Note
que tanto layout_toRightOf,
quanto layout_alignParentRight possuem warnings no Android Studio,
dado que o Android Studio preferiria que você tivesse colocado
layout_toandof e layout_alignParentEnd,
respectivamente, por motivo semelhante ao que eu já expliquei anteriormente
para o layout_alignParentLleft que eu adicionei na TextView.
O próximo campo de texto a ser posicionado é a área onde o
usuário irá escrever a mensagem.
Os quatro primeiros atributos são itens que eu já expliquei anteriormente,
então vou passar diretamente para o atributo Gravity,
que serve para posicionar o texto que está dentro da Edit Text.
Como eu estou atribuindo o valor Top para este atributo, o texto será alinhado
no topo e não no centro, como seria o caso se este atributo fosse omitido.
[SEM SOM] Os próximos dois atributos
servem para dizer que a Edit Text deverá ocupar toda largura da tela,
dado que estamos alinhando os lados esquerdo e direito da view,
aos lados esquerdo e direito da janela.
O atributo layout_below foi colocado aqui
para informar que esta view deve ficar embaixo do label 'Para'.
Poderíamos ter usado também a caixa de texto de entrada dos destinatários para
esta tarefa, mas por uma preferência pessoal eu sempre escolho a view que
está à esquerda quando duas opções são possíveis.
Por fim, o atributo layout_above serve para dizer que esta Edit Text ficará
acima de botão que ainda não foi apresentado.
Vou falar sobre ele a seguir.
O último atributo Padding Top, é uma margem de separação.
O botão que provavelmente disparará o gatilho de envio de mensagem foi o
último item adicionado no arquivo XML.
Como a posição desse elemento é na borda inferior da janela,
usamos o atributo layou_alignParentBottom para esta tarefa.
Por fim, queremos que o botão fique centralizado no layout e usamos
o atributo layout_centerHorizontal para dar este efeito.
