Todo estudante de programação conhece o tradicional “Hello, world!”. Trata-se de uma tradição criar um programa que simplesmente mostra essa mensagem na tela quando se está aprendendo uma nova linguagem (ou a sua primeira linguagem)... Como é um “costume mundial”, os en- genheiros do Android SDK colocaram a mensagem exibida por padrão nas telas iniciais dos aplicativos novos criados dentro do Eclipse. Diz a lenda que o uso desse tipo de “programinha” começou com o livro The C Programming Language (A Linguagem de Programação C), de Brian Kernighan e Dennis Ritchie, em que um “Hello, world!” é o primeiro exemplo apresentado para ensinar ao leitor seu primeiro programa em C. Este livro foi lançado em 1978! Ou seja, o “Hello, world!” já serviu para começar a ensinar mais de uma geração a programar!
Estes são os widgets de que vamos precisar (todos ficam na categoria Form Widgets da Palette – veja sua localização na figura 1.28):
• Um TextView de tamanho Médio (Medium), contendo uma mensagem informativa.
• Um SeekBar, que será usado para especificar a altura em metros, bastando para isso deslizar seu botão com o dedo.
• Um segundo TextView de tamanho Médio (Medium), logo abaixo do SeekBar, que exibirá o valor correspondente à posição do SeekBar. • Um Button, que, ao ser tocado, realizará a conversão.
• Um último TextView, só que agora Grande (Large), onde será exibida a altura convertida em pés.
Figura 1.28 – Widgets necessários para o aplicativo Conversor.
Comece removendo o TextView pequeno com a mensagem “Hello world”: clique sobre ele e pressione Delete (ou Del) no teclado.
Clique sobre o TextView Medium (Figura 1.28) com o botão esquerdo do mouse, mantenha-o pressionado e arraste o widget para o canto superior esquerdo da tela (deixe um pequeno espaço à direita e à esquerda). Note que, à medida que você move o widget pela tela, o Eclipse mostra linhas de guia para que você se oriente com relação ao posicionamento do objeto.
Isso acontece pois estamos usando um widget container, que serve para agrupar um conjunto de outros widgets dentro dele de alguma maneira específica. Estes containers são chamados gerenciadores de layout. Esta- mos usando o “default” em uma tela do Android, o RelativeLayout (layout relativo). Ele estabelece que todo elemento na tela é posicionado em relação a algum outro. Isso facilita a organização e ajuda na adaptação para tamanhos de tela diferentes.
Quando você soltar o TextView na tela, poderá ver pelo Outline (a pequena janelinha no canto superior direito do Eclipse) que o TextView está contido no RelativeLayout, de uma maneira hierárquica (Figura 1.29):
Figura 1.29 – Exibição da hierarquia de widgets da tela no Outline.
OUTLINE, MAS NÃO OUTLAW (FORA DA LEI)
Janelinhas acessórias como o Outline costumam ser tratadas como os “renegados” das ferramentas de software – muita gente nem sabe que eles existem e costumam fechá-los assim que aparecem. Mas espere! Neste caso aqui, o Outline pode ser um grande aliado!
Muitas vezes, widgets podem sumir da tela ou ficar em locais onde é difícil clicar sobre eles para selecioná-los. Lembre-se nesse momento do Outline: com ele você pode ser usado para “caçar” um widget perdido ou de difícil seleção!
Uma informação importantíssima de cada widget é seu Id (de identifi- cador). Trata-se de um nome usado para identificá-lo dentro do layout e posteriormente acessá-lo via programação. Todo widget colocado na tela recebe um “id automático” formado pelo seu tipo iniciado em letras mi- núsculas (por exemplo, TextView começa com textView, e Button com button) seguido por um número. Um jeito fácil de descobrir o Id de um widget é visualizá-lo no Outline: o seu Id é aquele mostrado ao lado do seu ícone. Também é possível mudar o Id de um widget na tela. Isso é particularmente interessante quando temos mais de um widget do mesmo tipo na tela (como dois ou mais TextView, por exemplo) e precisamos diferenciá-los depois no código. Vamos fazer isso para os dois TextView que mostrarão a altura em metros e depois em pés.
Antes de adicionar o próximo widget (o SeekBar), vamos trocar o texto que é exibido no TextView para algo mais informativo que simplesmente “Medium Text”... Para isso, vamos trocar o conteúdo da sua propriedade Text (Texto).
Clique sobre ele para selecioná-lo (se ainda não estiver selecionado). No canto inferior direito do Eclipse, fica a janela de propriedades (Properties – Figura 1.30). Ela mostra os atributos (ou seja, as configurações) do widget atualmente selecionado. Localize a propriedade Text e mude seu valor para “Informe sua altura em metros:”, como mostrado na figura 1.30.
Figura 1.30 – Mudando a propriedade Text.
DICA: Você pode acessar as propriedades mais comuns de um widget clicando com o botão direito do mouse sobre ele! Em alguns casos, esse procedimento é ainda mais fácil que usar a janela Properties.
Depois de digitar o texto e pressionar Enter, você verá o texto atualizado aparecendo no widget.
Acrescente agora o SeekBar, posicionando-o logo abaixo do TextView. Para exibir a medida em metros escolhida pela movimentação do SeekBar, precisaremos de um novo TextView. Arraste um TextView Medium para logo abaixo do SeekBar e procure colocá-lo no centro da tela. Em seguida, mude sua propriedade Text para “0,00 m” (veja a figura 1.32 para se orientar). Quando o usuário movimentar a “bolinha” do SeekBar, vamos, por meio da programação em Java, exibir o valor correspondente à sua posição neste TextView de tamanho médio que acabamos de inserir. Por isso, seria interessante mudar seu Id, de algo genérico como textView2 para algo mais significativo. Uma boa ideia de Id seria txtMetros – as primeiras três letras minúsculas indicam seu tipo (TextView), e a segunda parte, seu conteúdo! O melhor e mais rápido jeito de mudar o Id é clicar com o botão direito do mouse sobre o widget e selecionar Edit ID no menu. Será exibida a tela da figura 1.31, onde você pode digitar o novo Id:
Figura 1.31 – Mudando o ID de um widget.
Agora podemos passar aos próximos widgets, colocando-os na sequência indicada pela figura 1.32. No caso dos outros TextView e Button, assim que posicioná-los, modifique sua propriedade Text para exibir o texto mos- trado na figura 1.32:
Figura 1.32 – Tela do aplicativo com todos os widgets posicionados.
Coloque o último widget, um TextView Large que exibirá a altura conver- tida em pés, logo abaixo do Button, alinhado à esquerda deste. Preste atenção nas linhas verdes, que mostram a relação do alinhamento com outro widgets. Evite deixar este último TextView alinhado em relação ao
TextView que exibe a altura em metros (txtMetros), para evitar surpresas no posicionamento.
Não deixe de definir o ID deste último TextView para txtPes, clicando com o botão direito sobre ele e selecionando Edit ID.
Pronto! Com isso, completamos a interface da tela do nosso programa. Al- ternando para a aba de exibição do código XML do arquivo (activity_main. xml), ele deve estar semelhante ao da listagem 1.1: