Começando a Criar Interfaces Gráficas com Android

  • View
    223

  • Download
    6

Embed Size (px)

DESCRIPTION

Aprenda como trabalhar com os principais widgets de UI da plataforma Android. Diversos exemplos práticos para melhor entendimento.

Text of Começando a Criar Interfaces Gráficas com Android

Criando seu primeiro aplicativo Android no Eclipse

Comeando a Criar Interfaces Grficas com Android IntroduoO estudo para criar este artigo foi feito em vrias fontes, mas uma chamou a ateno por teu uma seqncia de exemplos muito bem explicados e de fcil entendimento. O texto se chama Understanding User Interface in Android.

Neste artigo vamos aprender como criar interfaces grficas (UI) mais bsicas com Android, utilizando o Eclipse como IDE de desenvolvimento. Pretendo criar outros artigos falando sobre componentes mais complexos ou se aprofundando nos apresentados aqui.Para quem est chegando de mundos um pouco mais obscuros em relao UI, como o Java ME, a diferena gritante e impressiona. Com Android temos gerenciadores de layout sofisticados, componentes estilizados com efeitos atrativos graficamente, alm de uma facilidade no desenvolvimento.

O Android oferece dois modos de criar interfaces grficas, uma definindo um arquivo XML que ser carregado no startup da aplicao e a renderizao da tela construda em tempo de execuo. O outro modo atravs da codificao pura. Na maioria dos casos o desenvolvedor usar as duas maneiras, porm, recomenda-se a preferncia pelo uso do XML.Como vimos nos outros publicados por mim no Java Mvel, um aplicativo Android ter uma Activity, que responsvel pela interface grfico da aplicao. Na verdade, ela pode ser imaginada como uma tela do seu software.

Como dissemos anteriormente, existem dois modos de criao de UI no Android, aqui vamos nos deter principalmente no XML. Ento, veja o exemplo abaixo:

O XML acima representa a interface grfica, contendo um campo de texto em um layout linear, orientado verticalmente. A aplicao deve possuir no mnimo uma classe que herde de Activity e sobrecarregue o mtodo onCreate:

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main); }Perceba que definidos a interface atravs de um arquivo XML, usando o mtodo setContentView. O R representa a classe com as constantes que identificam os recursos da nossa aplicao.Ao longo deste artigo vamos ver em detalhes o pouco que fizemos at aqui, vamos a luta. View e ViewGroupQuando pensamos em interface grfica de um aplicativo Android devemos ter em mente oque significa View e ViewGroup. Ambos representam qualquer componente visual que voc visualizar na tela do aparelho.

Como estas classes so de suma importncia para o entendimento do texto no geral, vou parafrasear o site oficial de desenvolvedores Android:

A classe View representa o bloco de construo bsico para componentes de interface grfica. Uma View ocupa uma rea retangular na tela e responsvel por desenhar e controlar os eventos. View a classe bsica para widgets, que so usados para criar componenets de UI interativos (botes, caixas de texto, etc.). A subclasse ViewGroup a classe base para layouts, que so containers invisveis que contm Views (ou outros ViewGroups) e definem as propriedades desse layout. Veja a Figura 1 para um melhor entendimento.

Figura 1: Views e Views Group.Para fazer com que o leitor entenda definitivamente importncia dessas duas classes, veja a Figura 2:

Na interface existe um vasto conjunto de widgets, desde botes at caixas de selees. Todos esses componentes esto dentro de um gerenciador de layout, mais precisamente em um LinearLayout.

Figura 2: Exemplo real de Views e Views Group. Gerenciadores de LayoutVamos comear a brincadeira com UI no Android com os gerenciadores de layout. Como o prprio nome indica, estas classes orientam o posicionamento dos widgets na tela. Dependendo do layout utilizado, at a altura e largura do componente alterada.

Para quem trabalhou com o swing do Java lembra do BorderLayout, FlowLayout, dentre outros. At mesmo no Java ME possvel utilizar gerenciador parecidos com os mencionados anteriormente, atravs do LWUIT.

Inicialmente vamos criar uma aplicao Android que alteraremos conforme o gerenciador de layout a ser estudado.

Criando o projetoRecapitulando dos nossos artigos anteriores. Siga o caminho file->new->Android Project. Configure as seguintes opes e clique em Ok:

Project Name: LayoutsAndroid.

Contents: Create new project in workspace. Target Name: Android 2.1. Application Name: Layouts Android Package Name: com.estudo.android. Create Activity: LayoutsAndroid

Figura 3: Configuraes do projeto inicial.O Eclipse j cria o projeto e toda a estrutura de pastas e cdigos necessria. Execute este projeto e ver o seguinte:

Figura 3: Projeto inicial emulado.D uma olhada tambm no arquivo main.xml, que pode ser encontrado no caminho res->layout. Listagem 1:

O nosso exemplo j usa um gerenciador de layout, o LinearLayout, que, por acaso, ser nosso primeiro objeto de estudo.

LinearLayoutEste gerenciador organiza seus componentes filhos em uma nica coluna ou nica linha, dependendo da orientao que o mesmo tiver.

Para ficar mais claro, vamos editar o arquivo main.xml citado anteriormente:

Listagem 2:

Se executarmos a aplicao agora, veja como fica:

Figura 4: Projeto alinhados verticalmente.Vamos fazer algumas alteraes no XML para compreender oque ele faz. Na declarao do layout, que sempre deve ser o n raiz do documento, temos o LinearLayout. Definimos para este componente trs propriedades:

android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"A orientation defina se os componentes se desenrolaro no sentido horizontal ou vertical. Se a tela ter apenas uma linha ou uma coluna, como falado anteriormente. Mudemos essa propriedade para:

android:orientation="horizontal"O resultado podemos ver abaixo:

Tambm definimos as propriedades de largura (width) e altura (height). Ambos usam fill_parent, que diz o seguinte: use todo o espao disponvel na tela. Vamos mudar novamente o main.xml, mais especificamente as propriedades do LinearLayout.

O resultado :

Perceba que o restante dos componentes foi cortado, por exceder os limites do seu container, o LinearLayout. Na prtica, porm, vai ser raro as vezes em que este gerenciador de layout no vai ocupar todo o espao disponvel na tela.

Existem alguns atributos especficos para componentes que fazem todo sentido quando aplicados no LinearLayout. Vamos trabalhar com duas propriedades: android:layout_weight e android:layout_gravity.Reescreva o main.xml:

LISTAGEM 3:

Depois de executar veremos o seguinte:

Figura 7: Utilizando gravity e weight.A propriedade gravity funciona como uma funo de alinhamento em relao ao container, como usamos right no boto, veja que ele se encontra na extremidade direita da tela.

O weight repassa para os componentes o espao no utilizado na tela. H, no se preocupem com os componentes, eles sero tratados daqui a pouco. Volte para a figura 4 e perceba que o espao vazio desapareceu, sendo atribudo para as duas caixas de textos que definiram a propriedade weight. Perceba tambm, que a segunda caixa de texto recebeu 70% do espao no utilizado, por isso ficou maior que a primeira caixa.Bem, encerramos por aqui a discusso sobre a LinearLayout. H, no se preocupe com os widgets (componentes). Logo veremos detalhadamente cada um. AbsoluteLayoutEste gerenciador define exatamente a posio (coordenada x/y) onde cada componente deve ficar. Este layout menos flexvel e tambm exige um maior trabalho para manuteno. Por exemplo, quando o aparelho muda a orientao, quem deve redefinir a posio dos componentes o programador, via cdigo.

Mas chega de conversa, redefina o main.xml para isso:

LISTAGEM 4:

Quando executamos a nossa aplicao fica com a seguinte cara:

Figura 8: Utilizando AbsoluteLayout.Simples n? Mas como o leitor j deve ter percebido, na um gerenciador de layout muito aconselhado.

TableLayoutEste gerenciador pode ser o mais auto-descritivo de todos. Para surpresa geral, ele organiza seus componentes filhos em linhas e colunas.

As linhas da tabela so representadas pela classe TableRow. As colunas so criadas conforme a insero de componentes em uma mesma linha. No permitido bordas em linhas, colunas e clulas.

Reescreva o main.xml:

LISTAGEM 5:

Para gerar uma interface como a Figura 9:

Figura 8: Utilizando TableLayout.Vrios pontos devem ser detalhados aqui. Primeiramente, veja que definimos a largura dos componentes somente para a primeira linha. Isso porque a coluna define sua largura como igual a largura do maior componente horizontal. Assim, se redefinirmos a ltima caixa de texto e o boto para:

O resultado da interface vai ser o mesmo. Tanto o campo de texto de endereo como o boto tem largura menor que a primeira caixa de texto.

Na ltima linha colocamos um campo de texto vazio:

Isso deve ser feito para que no ocorra o seguinte efeito:

Figura 8: Utilizando TableLayout com espao a mais. RelativeLayoutO RelativeLayout trabalha da seguinte forma. Cada componente filho deve indicar sua posio em relao a outro componente.

Vamos comear nossos estudos com este main.xml.

LISTAGEM 6:

O primeiro componente, um texto esttico, est orientado em relao ao sei pai, ou seja, ao prprio layout. Ento, definimos que ele estar a esquerda e ao topo da tela.

android:layout_alignParentTop="true" android:layout_alignParentLeft="true" Antes de prosseguir, veja como fica esta interface em trabalho.

Figura 9: Utilizando RelativeLayout.A caixa de texto tem sua localizao definida com:

android:layout_alignLeft="@+id/lblComments" android:layout_below="@+id/lblComments"O layout_alignLeft diz que o componente estar alinhado a esquerda do componente com o id lblCmments, que neste caso, o texto esttico I