segunda-feira, 8 de outubro de 2012

Layouts


Olá a todos.

Agora que já sabemos como se instala o Android em sua máquina, e como se cria uma aplicação simples, iremos aprender a criar layouts em Android. Em Android, layouts são criados através de arquivos XML, com uma estrutura de linguagem bem rígida e padronizada, mas também bem simples e didática, graças à excelente estrutura criada pelo Google.

Existem diversos tipos de layout em Android: FrameLayout, LinearLayout, TableLayout, dentre outros. Neste tópico, iremos abordar basicamente os 3 layouts citados neste parágrafo.

FrameLayout
O FrameLayout é o layout mais básico que existe no Android. Neste layout, podemos ter apenas uma estrutura de layout armazenada. Porém, tal estrutura pode ser outro layout. Este layout é bastante usado em layouts genéricos, como abas e telas cujo layout muda ao longo de sua execução. Usaremos esse layout como base para ensinar diversos conceitos básicos de layout em Android.

Por exemplo, em Android existem diversos tipos de componentes gráficos:

  • TextView  Mostra um texto na tela. É com certeza o componente gráfico mais usado em Android.
  • ImageView  Mostra uma imagem ou simplesmente uma janela na tela. Toda vez que você for mostrar uma imagem ou mostrar ao usuário uma janela colorida, por exemplo, esse componente será usado.
  • EditText  Os componentes acima apenas mostram informações na tela. Já o EditText obtém um texto digitado pelo usuário, que poderá ser usado para interagir com a aplicação Android.
  • Button  Este componente é um dos mais comuns em qualquer sistema de layout. Neste componente, uma ação é executada após um clique ser dado nele.
  • CheckBox  Um componente que basicamente possui dois valores: verdadeiro ou falso. Muito usado para representar configurações do sistema.
  • RadioGroup  Componente bem útil para mostrar diversas opções relacionadas na tela, onde apenas uma das opções deve ser clicada. Muito usado em perguntas de múltipla escolha.

E existem diversos parâmetros para cada componente gráfico em um layout em Android. Para entender bem como são esses parâmetros, é demonstrado abaixo o uso de alguns desses componentes em um FrameLayout. Abaixo é mostrado o código-fonte do XML que cria o layout.


E o layout gerado.



No código-fonte acima, temos alguns parâmetros, que são explicados abaixo:

  • android:layout_width="match_parent"  Na criação de layouts em Android, sempre chamamos um parâmetro usando o prefixo "android:". Neste caso, o posfixo do parâmetro é "layout_width". Este parâmetro define o tamanho da largura da tela que estamos criando. Este tamanho pode ser um tamanho fixo (em pixels, density pixels, ou outras unidades de formatação) ou em tamanhos expansíveis. Neste caso, ele está com um tamanho expansível. Existem 3 tamanhos expansíveis em Android:
    • fill_parent  Com esta opção, o tamanho do parâmetro será máximo (ou seja, o tamanho da tela corrente). Por exemplo, se a tela do celular ou tablet em que estamos mexendo é 800 x 600 pixels, se tiver em um FrameLayout o parâmetro android:layout_width="fill_parent", o tamanho da largura do layout da tela que estamos criando será de 600 pixels. A partir da API 8 (Froyo, Android 2.2) esta opção foi descontinuada, sendo seu funcionamento obtido através da opção "match_parent".
    • wrap_content  Com esta opção, o tamanho do parâmetro será mínimo, tendo como base os componentes-filhos do layout atual. Por exemplo, se definimos a largura do layout atual, com o parâmetro layout_width, da seguinte forma: android:layout_width="wrap_content", estamos sinalizando que o tamanho da largura da tela será o tamanho do componente-filho deste layout. No caso do XML que estamos analisando, seu componente-filho é um TextView. Se, por exemplo, esse TextView possui um tamanho de 20 x 20 (altura x largura) pixels, então o tamanho do layout será o mesmo. É isso que o wrap_content faz. Se tivéssemos fill_parent em seu lugar, o tamanho do layout não seria 20 x 20 pixels, mas sim os 800 x 600 pixels, equivalentes ao tamanho da tela do celular.
    • match_parent  Mantém o tamanho herdado pelo componente-pai. Caso não haja um componente-pai, o tamanho será máximo (ou seja, o tamanho da tela). Neste XML, temos um TextView e seu componente-pai, que é um FrameLayout. Se colocarmos no TextView o parâmetro android:layout_width="match_parent", a largura da tela atual será a mesma largura do FrameLayout.
  • android:layout_height="match_parent"  Este parâmetro define a altura da tela que estamos criando.
  • android:gravity="center_horizontal"  Este parâmetro define o alinhamento que os componentes deste layout terão. Neste caso, o alinhamento será central e horizontal.
  • android:text="Exemplo"  Este parâmetro define o texto do componente atual.

Bom, muitos conceitos foram explicados acima. Para entendê-los melhor, não há outro jeito senão pegando as opções que cada parâmetro dá e ir modificando e testando. Por exemplo, abaixo temos o mesmo XML acima, mas desta vez com o parâmetro android:gravity do componente TextView mudado de "center_horizontal" para "center_vertical".



E abaixo, temos o mesmo XML acima, mas desta vez com o parâmetro android:gravity do componente TextView mudado de "center_horizontal" para "center".



Vamos seguir modificando as opções dos componentes, pois somente assim entenderemos melhor o funcionamento de cada parâmetro. Abaixo temos o layout resultante quando modificamos os parâmetros android:layout_widthandroid:layout_height de "match_parent" para "wrap_content".


Com isso, o tamanho do FrameLayout se tornou o mesmo tamanho do TextView. Difícil de entender? Então vamos dar cores ao TextView:



O resultado disso é visto abaixo.



Agora ficou fácil entender que o tamanho do FrameLayout se tornou o mesmo tamanho do TextView. Agora, se modificarmos os parâmetros android:layout_widthandroid:layout_height do FrameLayout de "wrap_content" para "match_parent" (que é o valor original, exposto na 1ª imagem deste tópico), temos o seguinte resultado.



Ou seja, no exemplo anterior, o tamanho do FrameLayout tinha se tornado o mesmo tamanho do TextView, através do uso do "wrap_content". Agora, o tamanho do FrameLayout se tornou o tamanho da tela do celular, através do uso do "match_parent". O entendimento desses conceitos de tamanho expansível de tela é VITAL no desenvolvimento de qualquer layout em Android. É de suma importância dominar esses conceitos, senão a criação de layout em Android se tornará bem mais complicada.

Seguindo na explicação do FrameLayout, é mostrado abaixo o XML acima com algumas opções a mais, a fim de deixar mais elegante o texto exibido.



O resultado deste novo XML é mostrado abaixo:


Neste novo XML, mudamos a cor de fundo do FrameLayout de preto (cor padrão) para azul, através do parâmetro android:background com o valor "#2244AA", que é um azul suave. Mas por que a maior parte da tela se encontra na cor branca? Porque essa é a cor do TextView (através da opção android:background="#FFFFFF"). Como os parâmetros de tamanho de tela do FrameLayout e do TextView são "match_parent", o tamanho da tela é o tamanho do TextView. No entanto, temos um parâmetro novo no FrameLayoutandroid:padding="5dp". O que é esse parâmetro? Com esse parâmetro, é criada uma margem interna entre o FrameLayout e o TextView, de 5 dp de tamanho. O conceito de "dp" pode ser entendido aqui.

Assim, como a cor do FrameLayout é azul, e o do TextView é branco, temos um contraste na tela, que dá a impressão de que uma borda foi criada.

Seguindo a explicação, temos as opções android:textSize (tamanho do texto), android:textStyle (estilo de texto, que nesse caso é negrito), e android:textColor (cor do texto, que nesse caso é vermelho).

Agora iremos falar dos outros tipos de layout.

LinearLayout
No FrameLayout temos apenas um componente-filho. Já no LinearLayout, podemos ter vários. Este layout é indicado para casos como vários estruturas na tela, de forma linear. Neste layout temos um parâmetro que não existia no FrameLayout, android:orientation. Ele possui as opções "vertical" e "horizontal". Para demonstrar o funcionamento desse parâmetro, utilizaremos outro XML, mostrado abaixo.


Agora temos mais de um componente na tela. O resultado do XML acima é mostrado abaixo.



Ou seja, temos 2 TextView's uma embaixo da outra, na orientação vertical. Como ambos os TextView estão com os parâmetros android:layout_width="match_parent"android:layout_height="wrap_content", temos a largura com tamanho máximo, e a altura com tamanho mínimo (o tamanho do TextView). Abaixo temos a inversão desses valores, quando a orientação do LinearLayout for horizontal.


Eis o resultado desse novo XML:



Como os TextView's ficaram muito próximos, podemos dar um espaçamento entre eles. Isso é mostrado no XML abaixo:


Eis o resultado:


O que foi acrescentado agora foi o parâmetro android:layout_margin="5dp". Ele criou uma margem externa (não confunda com padding, que é uma margem interna) entre os 2 TextView's. Mas ainda assim, os textos estão muito "colados" no TextView. Então, agora, usaremos o padding para dar um espaçamento interno em seus textos.


Eis o resultado:


Para finalizar esta explicação básica sobre LinearLayout's, iremos falar do parâmetro layout_weight, uma verdadeira "mão-na-roda" em Android. Abaixo temos um novo XML.


Nele, incluímos um novo TextView, e modificamos a orientação do LinearLayout de horizontal e vertical. Porém, incluímos o parâmetro android:layout_weight="1". Esse parâmetro dá prioridade ao tamanho do TextView em que ele está setado (neste caso, no 1º TextView). Em outras palavras, ele potencializa o tamanho da largura/altura deste componente, sobrescrevendo a efetividade (tornando útil o funcionamento) dos parâmetros android:layout_widthandroid:layout_height. Assim, ele "extende" o tamanho deste TextView até onde a tamanho de tela deixar. O resultado disso pode ser visto abaixo:


E agora, o resultado quando setamos android:layout_weight="1" também no 2º TextView.


E também no 3º.


Ou seja, o parâmetro layout_weight dá "peso" pra cada componente. Como, na imagem anterior, todos estão com o mesmo peso, eles ocupam o mesmo lugar na tela. Porém, este parâmetro sobrescreve o funcionamento dos parâmetros android:layout_widthandroid:layout_height. Para finalizar a explicação sobre o layout_weight, o que acontece quando setamos todos os TextView como android:layout_weight="1", mas o 1º TextView como android:layout_weight="2"?


Ou seja, ele balanceou o peso dos componentes de acordo com o valor dos parâmetros android:layout_weight em cada TextView.

Agora, iremos aprender um pouco sobre o TableLayout.

TableLayout
Este layout comumente é usado quando precisamos listar vários componentes em uma mesma linha, ao longo de uma mesma tela. Por exemplo, criar um layout com 18 TextView's divididas 3 a 3, ao longo de 6 linhas. Para criarmos um layout assim, poderíamos usar 6 LinearLayout's, mas isso gastaria muito código-fonte no XML, além de muita memória no Android. A solução para este caso seria utilizar um TableLayout.

Para sinalizar que determinados componentes do TableLayout sejam usados em uma mesma linha, é usado o componente TableRow. Abaixo há um exemplo de seu funcionamento:


E o resultado deste XML:


Pelo exemplo acima, pode-se deduzir o efeito que um TableLayout possui. Se não fosse utilizado o componente TableRow, o TableLayout basicamente se tornaria um LinearLayout.

Para entender melhor o funcionamento do TableLayout, exercitaremos um exercício. Criaremos um layout com 6 linhas, cada uma contendo 3 TextView's de tamanho igual. O resultado terá de ser o layout abaixo.


Bom, já deu pra perceber que o código-fonte do XML gerado será enorme (passando de 250 linhas para ambos os casos), pois teremos que replicar bastante código para criar esses 18 TextView's. Uma dica para evitar esse re-trabalho de digitação é criar um style para o nosso TextView. Para criar um style, devemos criar um arquivo de XML na pasta res/values, chamado styles.xml. Neste arquivo, criaremos a forma genérica dos nossos TextView's. Abaixo é mostrado como ficaria a sintaxe desse arquivo.


Agora precisamos colocar esse novo estilo em nosso XML. Assim, teríamos como resultado um arquivo XML de layout de apenas 110 linhas, mais da metade do tamanho de linhas do XML sem o uso de styles.


-----

Com esses 3 tipos de layout podemos criar uma quantidade imensa de layout's em Android. Existem ainda outros tipos de layout (e outros componentes visuais), de cunho mais específico, que com o tempo veremos aqui no blog.

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

2 comentários:

  1. Seus posts são muito bons, parabéns!!!


    Estou com uma dúvida:

    Como eu faço o um layout referente a uma página da Web?

    Ex: eu quero de criar um layout da pagina de '' pesquisa de imagens'' do google, mas gostaria de ter o retorno das imagens que eu pesquisei. É basicamente transformar uma pagina web, em um layout para o android.

    Como faço isso?

    Espero que você consiga me ajudar!!

    ResponderExcluir
  2. Olá yusuchi17.

    Pelo que entendi à respeito da sua dúvida, acho que o post abaixo pode te ajudar. Caso não ajude, me diga.

    http://mobile.dzone.com/articles/android-%E2%80%93-how-implement-google

    ResponderExcluir