quinta-feira, 11 de outubro de 2012

Interagindo com o Layout


Olá a todos.

Agora que já sabemos instalar o Android em nossas máquinas, criar uma simples aplicação e fazer layouts básicos, aprenderemos a criar layout's que interagem com o usuário. Esta interação basicamente é feita através do parâmetro android:id. Através desse parâmetro, criamos um identificador de um componente gráfico do XML, que poderá ser mapeado diretamente nas classes Java que contém os códigos-fontes da nossa aplicação.

Para usar como exemplo desta interação, foi criado um layout de teste, cujo código XML é mostrado abaixo.



E seu layout é mostrado abaixo.



Neste layout temos um EditText, um TextView e um Button. Utilizaremos todos esses componentes no nosso exemplo.

O que faremos será basicamente obter um texto digitado pelo usuário, através do EditText, e verificar se o conteúdo do EditText é nulo ou não. Se for nulo, uma mensagem será mostrada na tela, alertando o usuário. Se não for, o conteúdo do TextView será atualizado com o valor que o usuário digitou.

Para obtermos o texto digitado pelo usuário, precisamos mapear na classe Java o id de cada componente (contido no XML). Em Android, esse mapeamento é feito através do método Context.findViewById(int id), que recebe um id do XML e retorna um objeto, que nada mais é do que o componente do XML mapeado na classe Java. Como toda Activity herda da classe Context, não precisaremos invocar o contexto como prefixo do método findViewById().

Abaixo é demonstrado como mapeamos, na Activity (tela) MainActivity.java, o EditText do nosso XML:



Como o método findViewById() retorna um objeto, precisamos fazer a conversão dele para seu componente correspondente. Neste caso, EditText. Utilizando este método, poderemos mapear os demais componentes. Para manter o nosso código-fonte organizado e didático, agruparemos esses componentes de layout em um mesmo método, chamado do evento onCreate(), tal qual mostrado abaixo.



Para manter o código ainda mais didático, foram definidos Atributos em nossa tela. Atributos são variáveis que serão vistas em todo o escopo de nossa tela. Em outras palavras, são as "variáveis globais" de nossa tela. Em Android existe um padrão para indicar variáveis que são atributos, que é utilizar como prefixo da variável a letra "m". Repare que os atributos de nossa tela possuem tal prefixo.

Através do método mapeiaComponentes(), mapeamos os componentes gráficos da nossa tela. Agora, o próximo passo na especificação do nosso exemplo é verificar o conteúdo do EditText. Porém, tal verificação deve ser feita apenas quando o botão for clicado.

Em Android, quando um botão é clicado, o evento onClick() é chamado. Porém, este método precisa ser implementado. Existem duas maneiras de se implementar este método:


  • Implementando o método OnClickListener no cabeçalho da classe, tal qual mostrado abaixo:


  • Implementando o método diretamente após o botão ter sido mapeado do XML para a Activity, tal qual mostrado abaixo:

Em ambos os casos, o que for executado após o botão ser clicado deverá estar dentro do método public void onClick(View v). Então, colocaremos a verificação do conteúdo do EditText (se é nulo ou não) dentro deste evento. O código atualizado de nossa Activity ficaria assim:



A mensagem à ser mostrada na tela é invocada pelo componente Toast. Este componente mostra na tela, por um breve período (Toast.LENGTH_SHORT ou Toast.LENGTH_LONG) uma mensagem. Repare que o texto do TextView foi modificado através do método mTextView.setText(content). Esse é um dos vários métodos que um TextView possui. A maioria deles é apenas uma imagem de algum parâmetro deste componente no XML. Por exemplo, no XML temos android:text="Texto", e na Activity temos textView.setText("Texto"). No XML temos android:visibility="gone", e na Activity temos textView.setVisibility(View.GONE). E assim por diante.

Agora, iremos criar um exemplo um pouco mais complexo, que envolve uma prática bem comum em Android: mostrar ou esconder componentes da tela, dependendo do valor de um determinado parâmetro.

Para isso, será criado mais um componente em nosso layout: um TextView que só será mostrado quando o botão for clicado. Se o botão não for clicado, esse TextView permancerá oculto.

O XML gerado é mostrado abaixo:


E o layout gerado:



No XML acima, a TextView está desbloqueada apenas para demonstrar como o layout ficará no fim da execução do aplicativo. Mas para que nosso aplicativo funcione de acordo com a idéia proposta (desbloquear um componente da tela), devemos incluir o parâmetro android:visibility="gone" no LinearLayout que contém a TextView.

Agora precisamos criar esse comportamento de desbloqueio do componente em nossa Activity. Modificando seu código-fonte, teremos o seguinte:


Agora já podemos executar nosso aplicativo. Para isso, basta clicarmos em nosso projeto, com o botão direito do mouse:



E então, clicar em "Run As" e depois em "Android Application". Assim, um emulador será aberto.

OBS.: Para que você possa escolher qual emulador exato será aberto, devemos modificar a opção de execução do aplicativo. Isso pode ser feito através da opção "Run Configurations...", como mostrado abaixo.



Uma vez dentro dessa opção, precisamos clicar na aba "Target", e depois na opção "Manual".



Agora podemos executar nosso aplicativo e escolher um emulador específico. Basta escolhermos as opções "Run As" e depois em "Android Application". Agora, teremos a seguinte tela sendo mostrada:



Após escolhermos um emulador, nosso aplicativo começará a ser carregado no emulador. Após algum tempo, finalmente nosso aplicativo terá sido carregado no emulador, e teremos a seguinte situação:



Agora podemos testar a funcionalidade que implementamos. Para isso, clicaremos no botão sem ter digitado nada. Ao fazer isso, uma mensagem de alerta aparecerá na tela:



Temos que digitar algo no EditText, senão essa mensagem aparecerá. Tendo digitado um texto, clicaremos no botão. Eis o que aconteceu:



Basicamente o que aconteceu foi que quando o botão foi clicado, a propriedade Visibility do TextView foi mudada de GONE para VISIBLE. Essa é uma prática muito útil na criação de layouts. Por exemplo: em um cadastro de clientes, habilitar os campos Estado e Cidade apenas após o campo País for inicializado.

-----

Assim, chegamos ao fim de mais um tópico.

Caso alguém tenha uma dúvida, crítica ou sugestão, sinta-se à vontade.

Nenhum comentário:

Postar um comentário