Atenção: esse artigo tem um vídeo complementar. Clique e assista!
Para que serve
Em que situação o tema é útil
Autores: Ricardo Ogliari e Robison Cris Brito
Quando se inicia o desenvolvimento de uma interface gráfica para um aplicativo, independente de linguagem de programação ou plataforma de desenvolvimento, deve-se obrigatoriamente prever a interação entre o usuário e os componentes visuais, que podem ser botões, caixas de seleção, imagens, vídeos, dentre outros.
Na plataforma Android esse processo não é diferente, porém, como se trata de desenvolvimento para dispositivos com recursos limitados, com tela pequena e teclado reduzido, esse modelo de eventos é um pouco diferente dos existentes nas aplicações para desktop, onde, por exemplo, era possível tratar eventos de mouse, recebimento de informações pela rede, timer, entre outros. Entretanto, dentre as linguagens de desenvolvimento móvel, a plataforma Android é uma das que fornecem uma das maiores quantidades de opções para o tratamento de eventos com o usuário, permitindo assim a criação de aplicativos sofisticados (ler Nota DevMan 1).
Nos últimos dois artigos da série, foram apresentados os conceitos básicos de programação para plataforma Android, a preparação do ambiente de desenvolvimento, os primeiros passos para desenvolver um aplicativo e também foi tratado com detalhes os componentes visuais básicos da plataforma.
Sendo um programador iniciante na plataforma, aconselha-se fortemente a leitura desses dois artigos antes de seguir com o tratamento de eventos da interface gráfica do Android.
A interface de programação do Android apresenta sete formas de tratamento de evento com usuários:
• Clique: acontece quando o usuário navega pelo aplicativo utilizando os cursores do dispositivo. Chegando no componente desejado (este recebendo o foco), quando a tecla “Enter” é pressionada (ou o touch) um evento de clique é originado;
• Clique longo: semelhante ao evento anterior, porém, o clique no componente se estende por alguns segundos;
• Menu de contexto: o Android permite que um menu específico para cada View seja criada.
• Evento de toque: esse evento é chamado quando ocorre um toque sobre um componente. Usando este evento, é possível identificar inclusive a direção do toque (baixo, cima, esquerda, direita).
• Mudança de Foco: quando o usuário interage com a tela, os componentes podem receber ou perder o foco, em ambas as situações são gerados eventos de mudança de foco;
• Evento de tecla: quando o componente detém o foco e qualquer tecla do dispositivo é pressionada, podendo com isso mudar inclusive o conteúdo do componente (texto de uma caixa de texto). Este é o evento onKey;
• Item Selecionado: esse evento é chamado toda vez que um item for selecionado. Este item pode ser presente em uma lista ou um Spinner, por exemplo.
Neste artigo serão apresentados os modos de interação com o usuário listados anteriormente. Como estudo de caso para o artigo, será desenvolvido uma aplicação de cadastro simples de imóveis com alguns componentes visuais (componentes estes também conhecidos por Views).
Criando a interface gráfica do estudo de caso
Como o estudo de caso tem por objetivo apresentar o tratamento de eventos, a interface visual não possuirá recursos sofisticados, será simplesmente uma tela de cadastro de imóvel (Nota DevMan 2). A Figura 1 apresenta esta única tela da aplicação.
Figura 1. Tela do aplicativo.
Para o exemplo, o projeto foi nomeado de EventsProject e o Activity Main (janela principal) de FormPersistent.
Após desenvolver o projeto no Netbeans, o arquivo main.xml, presente em Resource/Layout, deve ser modificado para apresentar uma interface igual a Figura 1. Esse código é apresentado na Listagem 1.
Listagem 1. Main.xml - Arquivo xml referente a interface gráfica do aplicativo.
001. <?xml version="1.0" encoding="utf-8"?>
002. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
003. android:id="@+id/llMain" android:orientation="vertical"
004. android:layout_width="fill_parent"
005. android:layout_height="fill_parent" >
006. <TextView
007. android:layout_width="fill_parent"
008. android:layout_height="wrap_content"
009. android:text="Cadastro de Imóvel:"/>
010. <EditText android:layout_width="fill_parent"
011. android:layout_height="wrap_content"
012. android:id="@+id/edtNome" />
013. <EditText android:id="@+id/edtRegiao"
014. android:layout_width="fill_parent"
015. android:layout_height="wrap_content" />
016. <Button android:text="Cadastrar"
017. android:id="@+id/btnCadastro"
018. android:layout_width="wrap_content"
019. android:layout_height="wrap_content"
020. android:layout_gravity="center_horizontal" />
021. </LinearLayout> Como pode ser observado, a tela do aplicativo é simples, formado por um LinearLayout;. Este gerenciador de layout organiza os seus filhos (componentes) um abaixo do outro ou um ao lado do outro. Os componentes do container são: um texto estático TextView, dois componentes de caixa de texto EditText, que representam no cadastro os campos Nome e Região, e por fim um componente Botão para realizar a ação fictícia de cadastro.
As propriedades das 4 Views são auto explicativas, sendo assim:
...
