Layout.xml! Iniciando o desenvolvimento para o Android!

O Android proporciona uma forma muito interessante de se criar interfaces gráficas.
Podemos criar layouts com inúmeros componentes gráficos a partir de arquivos XML e deixar a parte de tratamento de eventos para as classes Java as chamadas Activity.
Dessa forma, o código melhora muito em termos de arquitetura pois a parte de visão fica totalmente separada da parte de comportamento.

E assim conseguimos aplicar o padrão de projeto MVC (Model View Controller).

Esse padrão implica que a aplicação é divida em três camadas básicas:
O modelo, camada referente às regras de negócio da aplicação.
O controller ( responsável por ser a ponte entre o Modelo e a View).
E a View responsável pela interface gráfica do sistema.

Seguindo esse padrão o Layout.xml assume o papel de View e a Activity assume o papel de controller.
Logo, os elementos que vão interagir com o usuário como Button, EditText (campos para entrada de texto), Spinner (combobox do Android) dentre outros, são definidos no Layout.xml.
É nesse arquivo que também organizamos os elementos na tela, onde os botões vão ficar se um vai ficar em cima do outro, além de definir padrão de cores e demais detalhes referentes a interface gráfica.

Vejamos um exemplo de um layout xml do Android:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" >

<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Nome:" />

<EditText
 android:id="@+id/editTextNome"
 android:layout_width="match_parent"
 android:layout_height="wrap_content" />

<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="E-mail:" />

<EditText
 android:id="@+id/editTextEmail"
 android:layout_width="match_parent"
 android:layout_height="wrap_content" />

<Button
 android:id="@+id/buttonEnviar"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Enviar" />

</LinearLayout>

O padrão para escrita desse arquivo é simples e intuitiva. Basta abrir a tag com o nome do elemento que deseja disponibilizar, e dentro dessa tag é colocado as características desse elemento. No exemplo abaixo demonstramos o componente TextView, veja que três características foram informadas nessa tag. São elas:

<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Nome:" />

android:text – Define o texto que esse elemento irá exibir.

android:layout_width – Define a largura em pixels que esse componente irá gastar.

android:layout_height – Define a altura em pixels que esse componente irá gastar.

Informação importante android:layout_width e android:layout_width devem ser informados obrigatoriamente em qualquer componente.

Quando usamos a constante wrap_content estamos dizendo que esse elemento irá gastar o mínimo necessário para a sua exibição. Também existe a constante match_parent que define que o elemento poderá usar todo o espaço disponível.

Seguindo analisando o arquivo percebemos que o primeiro elemento criado é o LinearLayout  esse componente é diferenciado pois se trata de um ViewGroup.
É como se fosse um gerenciador de componentes, é ele que define aonde e como os componentes serão disponibilizados na tela.
Por exemplo, ao definir a orientação dele como vertical, seguindo a tag:

android:orientation="vertical"

Estamos dizendo que os elementos serão apresentados verticalmente, ou seja, um em cima do outro. Então sabemos que os cinco elementos que estão envolvidos no LinearLayout.
Serão exibidos um em cima do outro.

Assim como utilizamos o LinearLayout, também podemos utilizar outros ViewGroups como o RelativeLayout que possibilita a organização dos componentes na tela de acordo com eles próprios. Ou seja, podemos definir que um Button fique em cima de um TextView com o ID x.

Segue abaixo um exemplo do RelativeLayout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/text_view_nome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nome:" />

    <EditText
        android:layout_below="@id/text_view_nome" 
        android:id="@+id/editTextNome"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_below="@id/editTextNome"
        android:id="@+id/text_view_email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="E-mail:" />

    <EditText
        android:layout_below="@id/text_view_email"
        android:id="@+id/editTextEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Button
        android:layout_below="@id/editTextEmail"
        android:id="@+id/buttonEnviar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Enviar" />

</RelativeLayout>

Veja que com o RelativeLayout definimos que o EditText com o id editTextNome ficará abaixo do componente que contiver o id text_view_nome.
Definimos isso via a tag

 android:layout_below="@id/text_view_nome" 

Então entendemos que um componente se organiza de acordo com o seus irmãos. Essa é a característica do RelativeLayout.

Os dois exemplos apresentados de layout XML, tanto o LinearLayout quanto o RelativeLayout irão gerar exatamente a mesma tela.

Na imagem abaixo conseguimos ver como os componentes serão expostos.

 Imagem 

Veja que o Layout foi totalmente construído sem nenhuma linha de código Java. A camada de View da nossa aplicação de exemplo esta pronta. Porém, nada acontece se clicarmos no botão “Enviar”. Ou preenchermos os campos para entrada de texto. Pois esses eventos são de responsabilidade da camada de controller. Que é representada pela classe Activity da API do Android e será tema de um próximo post.

Veja este post aqui:

Anúncios
  1. #1 by blackmarket android on Julho 12, 2014 - 2:33 pm

    If you want to get a good deal from this paragraph then you have to apply these methods
    to your won website.

  1. Meu primeiro aplicativo Android | Android On Board
  2. Activity! Criando Interfaces Gráficas no Android! | Android On Board

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s

%d bloggers like this: