Layout Android
Autor: Michelly | Publicado: 2011-10-23T18:30:00-07:00

Layout Android
Olá !Depois de um&nbsp;bom tempo, voltei !!! Preparei um post sobre Layout para aplicativos Android. Como em qualquer sistema, é necessária uma interface gráfica para que haja a interação do usuário. Certo?É muito mais fácil de organizar e visualizar, declarando elementos da interface em um arquivo XML.No post “ Entendendo a organização do código no Eclipse “ explica a função de cada classe na estrutura de um projeto Android, inclusive a pastinha Layout, onde fica o main.xml:
- \res\layout: Telas do programa (XML).
Vamos ver um exemplo bem simples de um Layout. Não irei adicionar uma lógica (por enquanto), apenas a interface.
- Criei um projeto chamado TesteLayout;- Um pacote chamado br.com.android;- Mudei o nome da Activity para AppTestLayout.
Automaticamente, já é criado o main.xml.
Veja:
﻿Veja que coloquei algumas setinhas coloridas para ressaltar alguns pontos.Abra a pasta Layout e clique no main.xml (setinha preta).A&nbsp;setinha da parte inferior (laranja), aponta para o link main.xml, nesta opção, você terá acesso ao código XML, e poderá acrescentar widgets, que são Text, EditText, Button, RadioButton, Checkbox, dentre outros, que a seguir explico como implementar através de códigos ou arrastando esses widgets para o campo que desejar.




Clicando no Graphical Layout (veja a setinha azul), você tem um campo, que é como ficará a aplicação na tela.A setinha verde, aponta para o item Palette, onde se encontram os widgets, que podem ser arrastados para o campo ao lado (veja a seta preta).


Esses são os tipos de layout, porém, neste post explicarei apenas o LinearLayout.

– LinearLayout– RelativeLayout– TableLayout– FrameLayout

Veja abaixo o código xml que contém o Layout LinearLayout. Ele empilha ou alinha os elementos filhos na direção horizontal ou vertical e alinha a esquerda, centro ou direita.

&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"&nbsp;&nbsp;&nbsp; android:orientation="vertical"&nbsp;&nbsp;&nbsp; android:layout_width="fill_parent"&nbsp;&nbsp;&nbsp; android:layout_height="fill_parent"&nbsp;&nbsp; &nbsp;&gt;&lt;TextView&nbsp; &nbsp;&nbsp;&nbsp; android:layout_width="fill_parent" &nbsp;&nbsp;&nbsp; android:layout_height="wrap_content" &nbsp;&nbsp;&nbsp; android:text="@string/hello"&nbsp;&nbsp;&nbsp; /&gt;&lt;/LinearLayout&gt;

Agora vamos ver como é prático utilizar o Graphical Layout.Veja as setinhas na figura abaixo...Cliquei na setinha vermelha e arrastei para o campo ao lado (usei o textview). Observe a setinha verde.



﻿Agora vamos para o campo para digitar o textview “Nome”: veja a setinha verde. Clique e digite: Nome.
﻿

Veja a setinha amarela, já começamos a montar nossa primeira interface.



Agora já temos um campo para digitar o nome (EditText):
﻿


Vamos fazer um textview “Endereço”, é só repetir, como fizemos no Nome ...
﻿


Repita também o campo EditText:





Quando você clica em main.xml, o código vai ficar assim:
&lt;?xml version="1.0" encoding="utf-8"?&gt;&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"&nbsp;&nbsp;&nbsp; android:orientation="vertical"&nbsp;&nbsp;&nbsp; android:layout_width="fill_parent"&nbsp;&nbsp;&nbsp; android:layout_height="fill_parent"&nbsp;&nbsp;&nbsp; &gt;&lt;TextView&nbsp; &nbsp;&nbsp;&nbsp; android:layout_width="fill_parent" &nbsp;&nbsp;&nbsp; android:layout_height="wrap_content" &nbsp;&nbsp;&nbsp; android:text="@string/hello"&nbsp;&nbsp;&nbsp; /&gt;&lt;TextView 
android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Nome"&gt;&lt;/TextView&gt;
&lt;EditText android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/editText1"&gt;&nbsp;&nbsp;&nbsp; &lt;requestFocus&gt;&lt;/requestFocus&gt;&lt;/EditText&gt;
&lt;TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Endereço"&gt;&lt;/TextView&gt;
&lt;EditText android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/editText2"&gt;&lt;/EditText&gt;
&lt;/LinearLayout&gt;
No próximo post, tem mais Layout. Temos muito ainda que ver.Até mais !!!﻿