Pular para o conteúdo principal

TableLayout (Android)

Em nosso ultimo post sobre Android falamos sobre como utilizar o LinearLayout, hoje mostraremos uma outra forma de agrupar os componentes com o uso do TableLayout.

Como o próprio nome sugere o TableLayout nos permite organizar os componentes na tela de forma tabular (linhasxcolunas), além de ser uma forma bem rápida de organizar componentes sem que tenhamos que nos preocupar com alinhamentos e margens.

O que usaremos:

  1. JDK 1.6
  2. Android Developer Tools (Eclipse)
Criando um novo projeto

Vamos abrir o Eclipse em seguida File - New - Project - Android - Android Application Project:

Na próxima tela iremos especificar o nome da aplicação, o nome do projeto e o nome do pacote:

image
Na próxima tela nos certificaremos da criação de uma atividade, selecionando a opção “Create activity”:

image

Vamos manter o ícone padrão:

image

Em seguida vamos escolher uma atividade em branco selecionando “BlankActivity”:

Por fim seremos questionados quanto a alguns detalhes de nossa atividade, aqui também manteremos o padrão:

Exemplo

Vamos abrir o arquivo : res/layout/activity_main.xml:

image

E colar o seguinte código:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:shrinkColumns="*"
android:stretchColumns="*" >
<!-- 2 columns -->

<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >

<TextView
android:id="@+id/textView1"
android:text="Col 1"
android:textAppearance="?android:attr/textAppearanceLarge" />

<Button
android:id="@+id/button1"
android:text="Col 2" />
</TableRow>

<TableRow
android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >

<EditText
android:id="@+id/editText1"
android:layout_span="2"
android:text="Col 1 &amp; 2" />
</TableRow>
<!-- red line -->

<View
android:layout_height="4dip"
android:background="#FF00" />
<!-- 4 columns -->

<TableRow
android:id="@+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >

<TextView
android:id="@+id/textView2"
android:text="Col 1" />

<Button
android:id="@+id/button2"
android:text="Col 2" />

<Button
android:id="@+id/button3"
android:text="Col 3" />

<Button
android:id="@+id/button5"
android:text="Col 4" />
</TableRow>

<TableRow
android:id="@+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >

<Button
android:id="@+id/button4"
android:layout_column="2"
android:text="Col 3" />
</TableRow>

<TableRow
android:id="@+id/tableRow5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >

<Button
android:id="@+id/button6"
android:layout_column="1"
android:text="Col 2" />
</TableRow>

</TableLayout>




Como é possível perceber, não precisamos definir o numero de colunas ou linhas da tabela, simplesmente adicionamos o item de nova linha quando desejamos uma nova, para em seguida incluir os componentes, automaticamente serão formadas as colunas, uma para cada componente incluído. É possível incluir um componente em uma coluna em especifico usando a propriedade  android:layout_column. Vale destacar que mesmo tabelas com apenas três colunas, por exemplo, podem receber um componente com a propriedade  android:layout_column="3" (lembrando que as colunas são base zero), com isso automaticamente a quarta coluna será criada. Outra propriedade interessante é android:layout_span="2", nesse exemplo estamos dizendo ao layout que o componente com essa propriedade ocupara duas colunas consecutivas. Vejamos como nosso layout ficou:



image



Quando trabalhamos com o TableLayout e estamos no modo xml, existe uma visão muito útil que nos permite ter uma dimensão mais precisa de como nosso layout esta, essa visão é a Outline:


image


Fonte:

Android Developer

Java Code Geeks

Vogella

Comentários

  1. I read this content really awesome.You provided

    another one great article.I hope this

    information may change my business carrier.I

    can remember these things whenever taking the

    decision.


    CCNA Training in Chennai

    ResponderExcluir

Postar um comentário

Obrigado por Participar do programero, fique a vontade para agradecer, retificar, perguntar ou sugerir.

Postagens mais visitadas deste blog

Iniciar e Parar Serviços do Windows (Delphi)

Em certas ocasiões nos deparamos com a necessidade de manipular determinadas atividades do SO, como iniciar ou parar um banco de dados, ou qualquer outro serviço que esteja funcionando no momento. Segue abaixo um código que encontrei na Internet para tal finalidade (não me recordo à fonte, assim que eu a encontrar colocarei).
Iniciar Serviço:

uses WinSvc;
//
// start service
//
// return TRUE if successful
//
// sMachine:
//   machine name, ie: \SERVER
//   empty = local machine
//
// sService
//   service name, ie: Alerter
//
function ServiceStart(
  sMachine,
  sService : string ) : boolean;
var
//
  // service control
  // manager handle
  schm,
//
  // service handle
  schs   : SC_Handle;
//
  // service status
  ss     : TServiceStatus;
//
  // temp char pointer
  psTemp : PChar;
//
  // check point
  dwChkP : DWord;
begin
  ss.dwCurrentState := -1;
// connect to the service
  // contr…

Alterar cores do PageControl (Delphi)

O padrão Windows todo cinza não é muito atraente, por isso quando nos utilizarmos do PageControl podemos alterar suas cores e fontes da seguinte maneira:
Em primeiro lugar devemos alterar a propriedade OwnerDraw para TRUE;
Depois implementar seu método DrawTab da seguinte maneira: //pinta a fonte
Control.Canvas.Font.Color:=clBlack;
//
// pinta a paleta / aba
Control.Canvas.brush.Color:=clSkyBlue;

PageControl1.Canvas.Rectangle(Rect);
Control.Canvas.TextOut(Rect.left+5,Rect.top+3,PageControl1.Pages[tabindex].Caption);
// pinta a parte interna (tabsheet)
PageControl1.Pages[TabIndex].brush.Color := Control.Canvas.brush.Color;
PageControl1.Pages[TabIndex].Repaint;

Caso a intenção seja manter cada aba com seu próprio estilo basta adicionar um CASE filtrando o índice das abas: case TabIndex of
  0: Control.Canvas.Font.Color:=clBlack;
  1: Control.Canvas.Font.Color:=clWindow;
  2: Control.Canvas.Font.Color:=clRed;
en…

Listar arquivos existentes em diretório (Delphi)

Mostraremos uma maneira simples e prática para listar o conteúdo de um diretório com a opção de incluir nessa listagem os arquivos de seus subdiretórios. No exemplo abaixo temos um Edit para receber o diretório a ser pesquisado um CheckBox para indicar se os subdiretórios entrarão na pesquisa um botão para efetuar a pesquisa e um Memo para listar os arquivos encontrados, no final um Edit que receberá o cálculo final (em bytes) da soma do tamanho dos arquivos. procedure TForm1.Button1Click(Sender: TObject);
begin
  tamanhoTotal := 0;
  memLista.Lines.Clear;
  ListarArquivos(edtDiretorio.Text, chkSub.Checked);
  Edit1.Text := IntToStr( tamanhoTotal );
end;
procedure TForm1.ListarArquivos(Diretorio: string; Sub:Boolean);
var
  F: TSearchRec;
  Ret: Integer;
  TempNome: string;
begin
  Ret := FindFirst(Diretorio+'\*.*', faAnyFile, F);
try
while Ret = 0 do
begin
if TemAtributo(F.Attr, faDirectory) then
begin
if (F.Name <> '.') And (F.Name &l…