Este é terceiro artigo da série de artigos sobre desenvolvimento android, neste artigo aprenderemos mais sobre Layouts, para que possamos desenvolver a GUI (Interface Gráfica com o Usuário) da melhor maneira possível e possamos desenvolver aplicativos bem dispostos e de fácil utilização. Também aprenderemos a criar projetos mais complexos com mais de uma tela.

Caso você deseje, pode acessar os dois primeiros artigos da série que ensinaram a preparar um ambiente para o desenvolvimento de aplicativos para android e também a criar um pequena calculadora.

A GUI  é algo muito importante em qualquer sistema de informação, se tratando de aplicativos voltados para dispositivos móveis em que as telas são menores, com resoluções menores a importância da GUI é ainda maior, pois a área utilizável é menor e os elementos devem estar dispostos da melhor forma possível. No segundo artigo da série, aprendendo a incluir elementos a tela de nossa aplicação, mas em nenhum momento estávamos preocupados com tamanho, cores, afinal o intuito era aprender a manipular alguns elementos e não layout da aplicação.

Para desenvolver aplicativos com boa interface e que o usuário possa manusear da melhor forma, devemos aprender mais sobre Layouts, seus tipos e suas características. Cada elemento adicionado a tela é uma subclasse da classe View, e cada Layout é uma subclasse de ViewGroup, cada ViewGroup pode conter vários View’s e View’s Groups(Layouts aninhados).

Os principais tipos de layouts existentes são: LinearLayout, RelativeLayout, TableLayout, AbsoluteLayout e o FrameLayout.

desenvolvimento android

LINEAR LAYOUT

Estes layouts são utilizados para dispor os elementos em uma única direção, seja ela vertical ou horizontal. Este layout é o mais utilizado por aplicativos comerciais, pois ele utiliza bem a tela do aparelho, fazendo com que a utilização do aplicativo seja bastante facilitada. Para a construção de aplicativos mais complexos que necessitem de mais elementos na tela, são usados layouts aninhados, ou seja, um LinearLayout, dentro de outro LinearLayout, geralmente utilizamos um LinearLayout com orientação vertical para agrupar todos os elementos e quando precisamos que mais de um elemento fique em uma mesma “linha” inserimos um LinearLayout com orientação horizontal.

Cada elemento pode ter um peso, determinado pela clausula :gravity, que especifica se um elemento deve ocupar os espaços em branco, caso haja, quanto maior o :gravity maior é a prioridade, por padrão, todos os elementos adicionados a tela estão com o peso configurado como 0(zero).

Para exemplificar, crie um novo arquivo de layout em NomedoProjeto > res > layout > e insira o seguinte código:

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

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

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10" >

        <requestFocus />
    </EditText>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

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

        <EditText
            android:id="@+id/editText2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ems="10" />

    </LinearLayout>

</LinearLayout>

Isso fará com que seja criado um layout bem simples mas que pode exemplificar bem o uso do Linear Layout, ele é composto de um Linear layout que agrupa todos os elementos e um Linear Layout horizontal que faz com que dois elementos sejam visualizados em uma mesma “linha”. Veja como ficou:

FRAME LAYOUT

O FrameLayout cria uma pilha de elementos em que o último elemento adicionado é sempre o topo da pilha, com este layout você terá de abusar do posicionamento de tela e também dos padding’s entre os elementos para conseguir uma aparência boa, este layout é muito utilizado em subclasses ImageSwitcher, ViewAnimator, ViewSwitcher, ScrollView, TabHost, para compor elementos de tela como Slider de imagens e outros. Como não iremos trabalhar com estes elementos, por hora, não iremos nos aprofundar neste layout.

ABSOLUTE LAYOUT

Este tipo de Layout já foi muito usado, atualmente os desenvolvedores optam por não usar já que nele todas as coordenadas devem ser explicitamente determinadas, isso faz com que o aplicativo seja projetado para apenas um tamanho de tela. Como temos, hoje em dia, as mais variadas resoluções e tamanhos de tela, isso torna a programação inviável. Algo bem semelhante aconteceu com o CSS, onde era utilizado o position: absolute; algo que também caiu em desuso.

Como podemos perceber na imagem, no AbsoluteLayout, tudo absolutamente tudo deve ser especificado, como altura, comprimento e o distanciamento entre os elementos, produzir layouts com o AbsoluteLayout é bem trabalhoso e ainda será necessário produzir um Layout para cada tamanho de tela.

RELATIVE LAYOUT

Assim como o Linear Layout é muito utilizado pelos desenvolvedores atualmente, nele o posicionamento dos elementos na tela é feito através de relacionamentos entre os elementos. Ao criar um elemento, você pode determinar que tal elemento terá o tamanho e o posicionamento determinado por outro elemento. O grande problema que vejo na utilização deste tipo de Layout é a manutenção, pois uma vez determinado o posicionamento na tela dos elementos é praticamente impossível incluir elementos entre os elementos existentes ou mesmo excluir algum elemento que possua alto grau de relacionamento sem que todo o layout seja alterado. Também é necessário que todos os elementos da tela estejam com seus nomes de ID configurados pois os mesmos são utilizados para fazer o relacionamento entre os elementos, mudar este ID, durante o processo de desenvolvimento fará também que seu layout fique desconfigurado.

A figura acima demonstra o relacionamento de um elemento que está sendo incluído na tela com outros dois elementos, mudar algo como excluir algum elemento ou renomear algum, fará com que as referências sejam perdidas e o layout desconfigurado, por esses motivos não aconselho muito o uso deste Layout apesar de em muitos projetos, o mesmo ser adequado, sobretudo quando o aplicativo é bem modelado e quando o processo de desenvolvimento está melhor definido.

TABLE LAYOUT

No Table Layout cada elemento é mostrado em uma célula, conforme o número de elementos na tela vai aumentando, linhas e colunas são criadas. O número de colunas é sempre definido pela linha que possui o maior número de colunas. As células podem ser ocultadas para melhorar a visualização. O Table layout é um bom modo de exibir os elementos em um layout, sobretudo quando se está trabalhando com formulários, em que precisamos de uma sequência lógica para os elementos. Chega a ser bem similar ao Linear Layout em alguns aspectos.

QUAL LAYOUT UTILIZAR?

Depois de conhecer os variados tipos de layout você deve estar se perguntando qual utilizar, ou mesmo qual o melhor para se utilizar. A resposta mais correta é que você pode utilizar todos os tipos de layout e o melhor apenas a situação é que determinará. Mas acredito que para quem está a iniciar no mundo de desenvolvimento android o melhor é utilizar o Linear Layout, isso porque ele é o mais simples e proporciona muitas opções. Já que iremos trabalhar com formulários nos próximos artigos em que iremos interagir com um banco de dados, ele também se mostra bem adequado. É sempre bom pesquisar mais e mais para abrir possibilidades.

UTILIZAR O MODO GRÁFICO OU XML?

Ao manipular os elementos e também os layouts para aplicativos android no Eclipse, o desenvolvedor possui a opção de manipular com o modo gráfico e também com o modo XML, que nada mais é do que um editor de texto. É bem verdade que é muito mais fácil alterar o arquivo XML referente ao layout diretamente pelo modo gráfico, afinal é mais prático e tende a ser mais rápido. Para incluir elementos a tela, realmente é muito mais fácil, arrastar e soltar o elemento na tela e pronto, todo o código referente aquele elemento será gerado.

Mas quando se fala em customizar aquele elemento ou layout, configurando margens, tamanhos, fontes a coisa muda um pouco de figura. É bem mais prático efetuar as mudanças pelo editor de texto (modo XML), isso dará muito mais flexibilidade para o desenvolvedor, além de deixá-lo ainda mais conhecedor das estruturas de layout, afinal pode haver um dia em que seja necessário alterar algo e tudo que se tenha seja um bloco de notas.

Para que o aprendizado seja melhor e de uma forma mais simples, nos limitaremos a apresentar os layouts do próximos examplos todos com o LinearLayout, para que não tenhamos que fazer vários tipos de layouts, caso deseje fazer os seus layouts com outro tipo de ViewGroup, fique totalmente a vontade, isso não determinará o funcionamento do aplicativo, apenas o modo como ele é apresentado ao usuário final.

CONCLUSÃO

Neste artigo podemos aprender mais sobre os ViewGroup’s, que nada mais são do que tipos de layouts que podemos incluir os elementos de tela de nossa aplicação. Esse tipo de layout determinará o modo com que o usuário visualizará a aplicação. O tipo de layout também poderá influenciar no tempo de desenvolvimento, acredito que o layout que apresenta uma boa visualização e é adequado para layouts de formulários, que é o que mais utilizaremos é o LinearLayout.

O QUE ESPERAR DA PRÓXIMA AULA?

Depois de aprender mais de Layouts de aplicativos aprenderemos na próximo artigo a criar toda a visualização de um aplicativo de agenda, também começaremos a programar o novo aplicativo e a interagir com o banco de dados, afinal é lá que irão ser salvos os dados, para que você possa entrar e sair da aplicação sem que seus dados sejam perdidos, espero por você no próximo artigo.

Até já.

 

Autor: Jair Rebello

Blog do Autor | Artigos do Autor:

Analista de Sistemas, empreendedor e blogueiro que dedica parte de seu tempo para a partilha de material de grande qualidade relacionados a Wordpress, SEO, Tableless, JQuery, PHP, Android e outras tecnologias mais. Pode me encontrar no Escola Sites ou O Android.

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos

RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz