Componentes das Views (layout)

Olá a todos.
Vamos abortar neste post, como funciona os diversos componentes na tela do seu Android.
Por hora, vamos falar dos mais básicos:

• TextView
• Button
• ImageButton
• EditText
• CheckBox
• RadioButton
• RadioGroup
• ToggleButton

Com um novo projeto Android aberto (se preferir, pode criar um novo, sem nada, seguindo um post deste blog), abra o seu arquivo main.xml que está originalmente localizado em res/layout.

main.xml

android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
    
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:text="@string/texto_exemplo">
    
    
          
    
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"       
        android:src="@drawable/icon">
    
    
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
    
    
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/texto_checkbox">
     
    
        style="?android:attr/starStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
                        
    
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">              
        
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/texto_radio1">
        
        
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"       
            android:text="@string/texto_radio2">
          
    
    
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    

Conforme você pode notar acima, estamos declarando no mesmo layout vários componentes, que irei explicar logo abaixo.

TextView: Um texto que será exibido na tela através da propriedade android:text, cujo valor deverá estar mapeado pelo string.xml

Button: Representa um simples botão.

ImageButton: Similar ao botão, porém, você adiciona uma imagem neste botão.

EditText: Uma caixa onde o usuário pode digitar alguma informação.

CheckBox: Um botão do tipo "caixa de seleção", onde existe dois estados: marcado e não-marcado. Este tipo de botão é usado pra quando você deseja deixar vários opções para o usuário escolher algumas delas. Por exemplo: uma tela onde você escolhe quais músicas você deseja ouvir daquela lista, ou seja, você poderá escolher vários opções (músicas) da lista..

RadioGroup e RadioButton: Este componente é parecido com o checkbox, porém, sua diferença é que ele não permite você selecionar mais de uma opção. Um radiobutton também tem dois estados, marcado e não-marcado. O radiogroup serve para agrudar estes radiobuttons, onde só é possível selecionar um radiobutton dos que existem dentro daquel radiogroup. Por exemplo: uma tela onde você deverá escolher entre sim e não, ou seja, deverá ser apenas uma opção.

ToggleButton: Parecido como checkbox, onde você tem o estado marcado e não-marcado, porém, ele tem um indicador de luz mostrando qual é a opção atual.

Exemplo da tela

Acima foi colocado dois exemplos para mostrar o funcionamento de alguns componentes quando estão ativos ou quando não estão ativos. Abaixo, vou explicar como funciona cada atributo usado  nesta tela, para que você possa modificar da forma que quiser.

android:id: É o identificador do componente, que usaremos para chamá-lo de outro lugar.
android:layout_width: É onde você define como será a largura. Para preencher a tela inteira você deverá usar fill_parent, caso deseja que ele se adapte ao tamanho do conteúdo, utilize wrap_content.
android:layout_height: Similar ao android:layout_width, porém, você vai ajustar a altura do componente, seguindo o mesmo conceito.
android:text: É a propriedade que corresponde ao texto que deverá ser exibido no componente.
android:src: É usada para localizar a imagem que irá ser carregada no botão.
style: Local onde você define qual será o estilo do botão, no nosso caso, definimos que seria como uma estrela.
android:orientation: Onde definimos no RadioGroup, como será distribuídos os RadioButtons, verticalmente ou horizontalmente.
android:textOn: Atributo do ToggleButton que define qual texto será exibido quando a flag estiver marcada.
android:textOff: Atributo do ToggleButton que define qual texto será exibido quando a flag NÃO estiver marcada.

Agora vamos dar uma olhada no código Java, para sabermos como podemos saber quando algum componente foi acionado ou alterado.

TesteComponentes.java

package com.testecomponentes;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;
import android.widget.ToggleButton;
import android.widget.RadioGroup.OnCheckedChangeListener;

public class TesteComponentes extends Activity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  // Botão
  Button btn1 = (Button) findViewById(R.id.btn1);
  btn1.setOnClickListener(new View.OnClickListener() {
   public void onClick(View v) {
    DisplayToast("Você clicou no botão 1");
   }
  });

  // Checkbox
  CheckBox checkBox = (CheckBox) findViewById(R.id.chkAutosave);
  checkBox.setOnClickListener(new View.OnClickListener() {
   public void onClick(View v) {
    // Método que verifica se a seleção foi marcada.
    if (((CheckBox) v).isChecked())
     DisplayToast("Você marcou a seleção");
    else
     DisplayToast("Você desmarcou a seleção");
   }
  });

  // Radiobox
  RadioGroup radioGroup = (RadioGroup) findViewById(R.id.rdbGp1);
  radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
   public void onCheckedChanged(RadioGroup group, int checkedId) {
    // o checkedId é apenas o Id do componente.
    RadioButton rb = (RadioButton) findViewById(checkedId);
    DisplayToast(rb.getText().toString());
   }
  });

  // ToggleButton
  ToggleButton toggleButton = (ToggleButton) findViewById(R.id.toggle1);
  toggleButton.setOnClickListener(new View.OnClickListener() {
   public void onClick(View v) {
    // Método que verifica se a seleção foi marcada.
    if (((ToggleButton) v).isChecked())
     DisplayToast("O botão Toggle está ativo");
    else
     DisplayToast("O botão Toggle está desativado");
   }
  });
 }

 // Ação do Toast, que exibi um aviso na tela.
 private void DisplayToast(String msg) {
  Toast.makeText(getBaseContext(), msg, Toast.LENGTH_SHORT).show();
 }

}

Em cada cada componente, eu declarei um um objeto relacionado a ele e o relacionei com o componente que está na tela, utilizando o método findViewById(Id), passando como parâmetro o Id do componente, que está mapeando no R.Java, como já vimos, anteriormente.
Como podemos perceber, adicionei uma Listner utilizando o método setOnClickListener(Listner) para um botão, para um checkbox, para um radioButton e para o ToggleButton.
Este listner me permite "ouvir" quando um componente é ativado, e com isso, podemos definir no bloco de código abaixo, qual será a reação daquela ação.
No caso do Button, chamo o método DisplayToast(String msg) que mesmo criei. Este método nada mais faz do que exibir na tela um aviso, e o que está escrito neste aviso, é o que eu recebo por parâmetro na chamada do método, no caso, a String msg.
Caso você queira fazer a ação para outros botões, basta declarar outros objetos do tipo Button e mapeá-lo com o Id de outro componente na tela, assim você poderá criar quantos componentes desejar e mapeamos utilizando o Id.
No caso do Checkbox, eu simplesmente verifico se ele foi marcado, através do método isChecked(), caso sim, exibe um aviso no tela do usuário que ele foi marcado, caso desmarcado, avisa também que o componente foi desmarcado.
Já no caso do RadioGroup e RadioButton, eu crio um objeto do tipo RadioGroup e recupero o componente da mesma forma que fizemos com os outros componentes, porém ao invés de colocarmos um Listner para "ouvir" que alguém clicou, adiciono o método setOnCheckedChangeListener() que verifica se o usuário alterou o valor das radioButtons. Este método, me dá um objeto do tipo int, chamado checkedId que é o Id do componente RadioButton que foi clicado. Com o id em mãos, podemos recuperar o o componente por um método já conhecido, o findViewById(), depois disso, podemos simplesmente exibir na tela um aviso do texto do componente alterado.
Por último, temos o ToggleButton, que tem exatamente o mesmo comportamento do Checkbox.

Agora você você sabe como funciona os componentes mais básicos do Android.
E também sabe como podemos declará-los, recuperá-los e também trabalhar na ação que aquele componente pode ter caso clicado ou marcado.