Android - Trabalhando com Widgets/Componentes

Quando se fala em “Widgets” todo mundo pensa em mini aplicativos para personalizar seu celular ou tablet, aplicativos que oferecem diversas opções, por exemplo: relógios personalizados, indicadores de carga de bateria ou até mesmo botões e funções que facilitam o uso do aparelho. Na realidade eu gosto muito destas tecnologias, acho legal e interessante deixar meu Smartphone ou tablet um tanto diferente dos outros, mas para quem não sabe, os denominados “Componentes” em linguagem de programação Delphi ou C# são os conhecidos “Widgets” na programação para Android. Montarei alguns exemplos básicos de utilizações destes componentes, como: o TextView, EditText, Button, RadioButton, CheckBox, entre outros.

Conceitos Básicos

A classe “View” é responsável pela criação de qualquer componente gráfico, sendo a base para os componentes visuais. Já a classe “Widget” é a classe filha de “View”, representando os componentes.

Exemplo: EditText – android.widget.EditText.

Algumas propriedades fundamentais quando se trata de componentes no Sistema Android seria o “layout_width” , o “layout_height” e o “id”. O primeiro corresponde a largura, o segundo a altura do componente podendo ser do tipo “fill_parent” ou “wrap_content”. A propriedade “id” identifica o campo na aplicação, a identificação do componente em si.

Exemplo:

layout_width = “fill_parent”: ocupa o tamanho máximo disponível na tela.
layout_height  = “wrap_content”: ocupa apenas o tamanho necessário na tela.
id = “@+botão/btnSalvar”

Depois de aprendermos conceitos básicos e fundamentais a respeito dos “Widgets”, explorarei mais a fundo um a um para entendermos melhor.

TextView

Este é um dos mais simples, ele representa um texto, no Delphi se compara a um Label.

Exemplo:

<TextView 

    android:id="@+label/txtlabel"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="Exemplos de Widgets"

    />

EditText

Este controle representa um campo editável, onde podemos inserir quais dados que desejarmos.

Exemplo:

<EditText

    android:id="@+Edit/Editar"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="Digite aqui"

    />

Button

Este controle nos possibilita a utilização de um botão para realizar tudo o que desejar, como por exemplo: executar uma rotina ao clicar no mesmo, o código XML fica da seguinte maneira.

Exemplo:

<Button

    android:id="@+botão/btSalvar"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="Salvar Dados"

    />

A Figura 01 abaixo nos proporciona todos os controles utilizados até o momento.

Figura 01: Controles Utilizados.

CheckBox

Permite criar um controle para checar uma ou várias opções, este controle é muito utilizado. No exemplo abaixo criei uma possibilidade para o usuário checar se é Estudante e Trabalhador. Veja a Figura 02 para maiores detalhes.

Exemplo:

<CheckBox

 android:id="@+checkbox/ckEstudante"

 android:layout_width="fill_parent"

 android:layout_height="wrap_content"

 android:text="Estudante"

/>

<CheckBox

 android:id="@+checkbox/ckTrabalhador"

 android:layout_width="fill_parent"

 android:layout_height="wrap_content"

 android:text="Trabalhador"

/>

Figura 02: Utilização de CheckBox.

RadioGroup e RadioButton

Estes controles trabalham juntos. O RadioGroup permite agrupar controles RadioButton, utilizável em tipos de campos booleanos por exemplo, no nosso caso utilizamos estes componentes para indicar se o usuário é do sexo masculino ou feminino.  Ver Figura 03.

Exemplo:

<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

    <RadioButton

    android:id="@+radio/rbMasculino"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="Masculino"/>

    <RadioButton

    android:id="@+radio/rbFeminino"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="Feminino"/>

 </RadioGroup>

Figura 03: Uso do RadioButton.

Conclusão

Este artigo abordou alguns “Widgets” básicos para se trabalhar com o Sistema Android. É importante ressaltar que o uso é bem fácil e intuitivo, os senhores podem perceber que o código muda muito pouco de componente para componente.

O XML é praticamente o mesmo para todos, basta aprenderem um pouco de suas funcionalidades que fica fácil a implementação no que desejar no projeto.

Fica a dica para testar outros ”Widgets”, tais como: o “ImageView” que permite a inserção de imagem,  o “AnalogClock” ou “DigitalClock” ambos possibilitam colocar um relógio tanto analógico como digital, o “DatePicker” a manipulação de Data (dia, mês e ano) ou até trabalhar com Cronômetro utilizando o “Chronometer”.

Um forte abraço e até o mês que vem!