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.

Mais visitadas

Aplicação Flask usando Nginx e Gunicorn

Aplicação Flask usando Nginx e Gunicorn Se você já desenvolveu uma aplicação Flask básica, sabe que o servidor de desenvolvimento embutido não é ideal para produção. Ele não é projetado para lidar com altos volumes de tráfego ou conexões simultâneas. Para tornar sua aplicação Flask mais robusta e pronta para produção, podemos usar o Gunicorn como servidor de aplicação e o Nginx como proxy reverso. Neste artigo, vamos adaptar o exemplo anterior ( Criando uma Aplicação CRUD com Flask, PostgreSQL e Docker ) para incluir o Nginx e o Gunicorn. O que são Nginx e Gunicorn? Gunicorn O Gunicorn (Green Unicorn) é um servidor de aplicação WSGI que roda aplicações Python como o Flask. Ele é eficiente e simples de configurar, lidando com múltiplas requisições ao mesmo tempo, algo que o servidor embutido do Flask não faz bem. Nginx O Nginx é um servidor web que atua como um proxy reverso. Ele recebe requisições HTTP e as encaminha ao Gunicorn. Além disso, o Nginx pode: Servir arquivos ...

Criando uma Aplicação CRUD com Flask, PostgreSQL e Docker

Criando uma Aplicação CRUD com Flask, PostgreSQL e Docker Neste guia, vamos criar uma aplicação básica que acessa um banco de dados PostgreSQL e realiza operações CRUD (Create, Read, Update, Delete). Vamos usar Flask e executar tudo com Docker. Sem estilos ou extras, apenas o essencial. Estrutura do Projeto crud-app/ |-- app/ | |-- app.py | |-- templates/ | | |-- index.html | | |-- edit.html |-- Dockerfile |-- requirements.txt |-- docker-compose.yml Passo 1: Dependências Crie um arquivo requirements.txt com as seguintes linhas: Flask==2.2.2 Flask-SQLAlchemy==3.0.2 psycopg2-binary==2.9.3 Werkzeug==2.2.2 Passo 2: Aplicação Flask Arquivo app/app.py : from flask import Flask, render_template, request, redirect, url_for from flask_sqlalchemy import SQLAlchemy app = Flask(__name__) # Configuração do banco de dados app.config['SQLALCHEMY_DATABASE_URI'] = 'postgresql://user:password@db:5432/crud_db' app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False db...

Criando sua Primeira Aplicação Web com Python e Docker

  Criando sua Primeira Aplicação Web com Python e Docker Hoje vamos fazer algo prático: criar uma aplicação web simples em Python usando Flask e executá-la dentro de um contêiner Docker. Se você não sabe exatamente o que é Docker ou Flask, não se preocupe! Vou explicar tudo de forma simples para que você consiga acompanhar sem problemas. O que é Docker? Docker é uma ferramenta que permite empacotar aplicações e suas dependências em contêineres, garantindo que elas funcionem da mesma forma em qualquer ambiente. Em outras palavras, com o Docker, você cria um ambiente isolado e padronizado para rodar suas aplicações. Como instalar o Docker Acesse o site oficial do Docker . Baixe e instale a versão apropriada para o seu sistema operacional (Windows, macOS ou Linux). Após a instalação, verifique se está tudo funcionando abrindo um terminal e executando: docker --version Se o Docker estiver instalado corretamente, ele vai exibir a versão instalada. O que é Flask? Flask é um m...