Android Hello World Parte 2

No artigo anterior vimos como configurar o nosso ambiente de desenvolvimento para desenvolver aplicações Android e fizemos uma aplicação básica, baixamos para nosso dispositivo e simulamos no PC.

 

Agora vamos nos aprofundar mais um pouco no desenvolvimento de software. É fundamental saber que a interface gráfica do Android é descrita em arquivos XML: existem as Classes de Views (Botões, caixas de texto, teclado e etc.) e as Classes de View Groups que nada mais são que Layouts que organizam estas Views.

 

Quem já programou com alguma interface gráfica como o Qt ou o Swing já deve estar familiarizado com este conceito. Um View Group é um container de Views e a organizam na tela de alguma forma (Grid, Linear, Horizontal, Vertical).

 

 

Android interface gráfica
Hierarquia de View, Figura retirada de: http://developer.android.com/training/basics/firstapp/building-ui.html

 

Vamos começar mexendo no activity_main.xml do artigo passado, adicionaremos um campo de texto e um botão. Também vamos mudar o layout e, consequentemente, alterar a disposição destes componentes na tela. O arquivo activity_main.xml se encontra na pasta MyFirstApp/res/layout.

 

 

Criando um Layout do tipo Linear

 

O template BlankActivity que escolhemos no artigo anterior possui um layout do tipo RelativeLayout e um TextView como view filho.

 

Vamos apagar o <TextView> e mudar o tipo de layout para LinearLayout, o layout linear pode mostrar seus views em colunas ou em linhas, neste artigo vamos fazer a orientação ser em linhas, para isto setamos como "horizontal" o atributo android:orientation". O arquivo deve ficar como abaixo. Podemos acessar a API do LinearLayout com todos os seus atributos aqui.

 

Nosso arquivo deve ficar assim:

 

 

Os atributos height e width são a largura e altura da nossa view, no nosso caso ela vai ser full screen pois o nosso próprio LinearLayout é a nossa raiz e esta é tela cheia. 

 

 

Adicionando um campo de texto

 

O elemento do Android para textos que podem ser editados pelo usuário é o <EditText>, vamos inserir um destes dentro do nosso layout:

 

 

Como todos os objetos do tipo View, é necessário definir atributos no XML para especificar as suas propriedades. 

 

  • android:id é um identificador único para o nosso objeto, é usado para manipular o objeto no código fonte em Java. O '@' é para referênciar objetos no XML, o '+' é usado quando o objeto é criado pela primeira vez, o SDK utiliza este token para criar o recurso em gen/R.java. Seguido de id/"nome do objeto" que proponho chamar de edit_message;
  • o width e height servem para delimitar seu tamanho, o "wrap_content" faz com que o objeto seja do tamanho necessário para que caiba o seu texto e nada mais;
  • android:hint é o texto de "dica" normalmente fica escrito quando não tem nada escrito e é apagado assim que você seleciona o textbox para entrar com o seu texto.

 

Como podemos observar o android:hint está apontando para um recurso de String ainda não definido e isto está ocasionando um erro no Eclipse. Todo recurso de String no Android deve estar descrito no arquivo /res/values/strings.xml, é lá que a view procura pelas suas strings. 

 

 

Adicionando recursos de String

 

 Ao adicionar campos de texto na interface é recomendado especificar cada string como um recurso do seu programa. Recursos do tipo "string" permitem que você gerencie todo o texto do seu aplicativo a partir de um único local, o que facilita a localização e atualização dos textos do seu app.

 

Externar as strings também facilita a questão da tradução. Por padrão o nosso projeto possui um arquivo para os recursos de string localizado em /res/values/strings.xml, adicione uma nova string chamada de "edit_message" e inicie a mesma com o texto "Enter a message" (você pode apagar a string "hello world").

 

Também adicione uma string com o nome "button_send" e com o texto "Send". Adicionaremos este botão no próximo passo. O resultado do nosso string.xml deve ficar assim:

 

 

 

Adicionando um botão

 

Vamos adicionar um botão a nossa tela, para isto, logo abaixo do elemento <EditText> adicione o elemento <Button>:

 

 

A altura e a largura são definidas como "wrap_content" para o botão possuir o tamanho do seu conteúdo, no caso o texto do nosso "button_send".

 

 

Customizando o tamanho dos componentes

 

Rodando a nossa aplicação (estou utilizando o simulador do post anterior), podemos observar que o campo de texto e o botão têm o tamanho necessário para comportar suas strings. Para o botão está ok, mas e caso o usuário queira inserir um texto maior do que aquele tamanho? Vamos alongar o nosso campo de texto para ocupar a tela inteira. Para isto vamos mexer no atributo android:layout_weight.

 

Android interface gráfica
Falta espaço para o texto

 

O valor do  layout_weight, ou "peso de layout" é quanto do espaço total não utilizado uma view deve consumir. Por padrão este valor vem zerado para todas as views. Se especificarmos 1 para uma view e 2 para outra, isto quer dizer que uma das views ocupara 1/3 do espaço restante a outra 2/3.  Vamos especificar um valor maior do que zero para nosso EditText para que ele ocupe todo o espaço restante.

 

Vamos atualizar as propriedades do nosso EditText:

 

 

E agora há espaço para entrar com uma string maior:

 

Android interface gráfica
Espaço para texto maior.

 

 

Nosso arquivo final de layout, activity_main.xml deve ficar assim:

 

 

 

É de suma importância entender o mecanismo por trás da interface gráfica mas assim como outras IDEs o Eclipse também conta com um gerador de interface gráfica, você desenha na tela, coloca componentes, mexe no atributo dos mesmos e o XML é gerado para você.

 

 

Gui Eclipse Android interface gráfica
Gui Eclipse

 

Conclusão

 

Neste artigo vimos como utilizar alguns elementos da interface gráfica. No próximo artigo vamos ver como alternar entre atividades e por fim uma aplicação que se comunique via bluetooth com um microcontrolador.

 

Referência

 

Baseado na página deste link.

Deixe um comentário

Seja o Primeiro a Comentar!

Notificar
avatar
wpDiscuz