Android – Views – pt. 1

9 05 2011

O Android conta com várias Views por padrão, e neste artigo exploraremos algumas delas.

Uma View é similar a um JComponent, é um item que pode ser adicionado a tela onde o usuario poderá ver e interagir com ele.

Este artigo cobre apenas como criar esses elementos via XML, que é de longe a maneira mais fácil para lidar com telas.

Para continuarmos, vamos criar um projeto com os seguintes parametros:

Target: 2.1
Application Name: ViewsExample
Package Name: br.techs
Create Activity: MainActivity
Min SDK Version: 7

Views

Todas as tags de Views no Android tem suporte ao atributo id, é com ele que conseguimos acessar nossa tela após inflá-la.
As declarações de novos ids devem começar com ‘@+id/’ e depois disso demos o valor que vai ser o id.
Ex:

<TagQualquer android:id="@+id/iddesejado" />

TextView

Sempre que escolhemos a opção “Create Activity” quando estamos criando um projeto, o ADT se encarregará de criar uma classe e um main.xml que é simplesmente um TextView com as palavras “Hello World!” escritas.

O TextView é usado para exibir texto para o usuario, assim como o JLabel do Swing. Podemos controlar sua aparência e tamanho pelo XML, basta modificar os atributos na tag TextView, alguns desses atributos são:

  • android:text: valor será o texto do componente;
  • android:textColor: O valor da cor no formato ‘#RRGGBB’ em hexadecimal, é a cor do texto;
  • android:textSize: Tamanho da fonte, deve ser indicado em px, ex: ’12px’;
  • android:textStyle: Style do texto (bold, italic);
  • android:background: Uma cor no formato #RRGGBB ou um drawable;

Alguns atributos são valores pré-defenidos como os do android:textStyle, mesmo assim, ainda é possivel usar mais de um valor no atributo, é aqui que entra o operador pipe “|”.
Por exemplo, se quisermos o texto em negrito usamos “bold”, em itálico usamos o valor “italic”, mas se quisermos que o texto seja negrito+itálico, podemos usar o pipe juntando os dois: “bold|italic”.

Modificamos nosso main.xml para testar estes atributos.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent">
	<TextView android:id="@+id/textView"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:text="Hello Views!"
		android:textSize="28px"
		android:textColor="#12FF88"
		android:textStyle="italic|bold"
	/>
</LinearLayout>

E agora, rodando nossa atividade já podemos ver o seguinte:

EditText

Enquanto o TextView exibe texto como um JLabel, quem oferece ao usuário um campo para ele colocar texto é o EditText (assim como o JTextField) que é filho de TextView.
Este componente não declara nenhum atributo XML novo, mas usa os do TextView, a diferença é que ele realmente permite edição.

Para tornar ele editável ou não, usamos o atributo android:editable com true ou false (true é o default). O TextView mesmo com true não permite edição.

Button

É um simples botão com algo escrito assim como o JButton. É através deles que o usuario sabe que alguma ação será realizada quando clicar.

Modificando nosso main.xml para testar esses componentes.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent">
	<TextView android:id="@+id/textView"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:text="Hello Views!"
		android:textSize="28px"
		android:textColor="#12FF88"
		android:textStyle="italic|bold" />
	<EditText android:id="@+id/editView"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:text="..."
		android:textSize="28px"
		android:textColor="#12FF88"
		android:textStyle="italic|bold" />
	<Button android:id="@+id/button"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:text="Click!"
		android:textSize="28px"
		android:textColor="#12FF88"
		android:textStyle="italic|bold" />
</LinearLayout>

Notaram alguma semelhança?

Isso por que Button e EditText estendem TextView e compartilham os atributos de texto.

E o resultado da nossa tela até agora é o seguinte:

CheckBox

É um botão que permite ao usuario alternar entre as opções marcado/desmarcado.

Ele também estende TextView, e o valor atribuido em ‘android:text’ é o texto visivel ao lado do CheckBox.

ToggleButton

ToggleButton são botões como o CheckBox, mas indicam marcado/desmarcado com uma ‘luz’ invés do efeito de desenho de um “tick”.
O atributo ‘android:text’ não tem efeito nesse componente, por padrão o texto é alternado entre ON e OFF, sendo possivel usar os atributos como color, style, size e etc.. para modificar a aparencia desse texto.
Esse componente tem dois atributos a mais para sua tag.

  • android:textOn: O texto que será exibido quando estado for ON
  • android:textOff: O texto que será exibido quando estado for OFF

RadioButton

São botões como o CheckBox que permitem marcá-lo, mas não é possivel desmarcá-lo.
Para se obter o efeito de seleção unica, é necessario adicionar eles dentro de um RadioGroup.

E o nosso XML final:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="vertical"
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent" android:layout_height="match_parent">
	<TextView android:id="@+id/listView" android:layout_width="match_parent"
		android:layout_height="wrap_content" android:text="Hello Views!"
		android:textSize="28px" android:textColor="#12FF88" android:textStyle="italic|bold" />
	<EditText android:id="@+id/textView" android:layout_width="match_parent"
		android:layout_height="wrap_content" android:text="..."
		android:textSize="28px" android:textColor="#12FF88" android:textStyle="italic|bold" />
	<Button android:id="@+id/button" android:layout_width="match_parent"
		android:layout_height="wrap_content" android:text="Click!"
		android:textSize="28px" android:textColor="#12FF88" android:textStyle="italic|bold" />
	<CheckBox android:id="@+id/check" android:layout_width="match_parent"
		android:layout_height="wrap_content" android:text="Check it!"
		android:textSize="28px" android:textColor="#12FF88" android:textStyle="italic|bold" />
	<ToggleButton android:id="@+id/tbutton"
		android:layout_width="match_parent" android:layout_height="wrap_content"
		android:textOn="Ligado" android:textOff="Desligado" android:textSize="28px"
		android:textColor="#12FF88" android:textStyle="italic|bold" />
	<RadioGroup android:layout_width="match_parent"
		android:layout_height="wrap_content">
		<RadioButton android:id="@+id/r1button"
			android:layout_width="match_parent" android:layout_height="wrap_content"
			android:text="Opção 1" android:textSize="28px" android:textColor="#12FF88"
			android:textStyle="italic|bold" />
		<RadioButton android:id="@+id/r2button"
			android:layout_width="match_parent" android:layout_height="wrap_content"
			android:text="Opção 2" android:textSize="28px" android:textColor="#12FF88"
			android:textStyle="italic|bold" />
	</RadioGroup>
</LinearLayout>

Note que todos eles tem os atributos do TextView, tornando fácil personalizá-los.

E o resultado final da nossa aplicação é como a seguinte:

PS:
Para facilitar, indiquei aqui para criar um novo projeto para esse artigo. Mas o código original está no projeto AndroidTechs, e a nossa MainActivity lá é a ViewActivity e o main.xml é a views.xml.

Esse é o primeiro artigo sobre Views, aqui apresentei apenas as mais comuns para um programa Android, guardarei umas Views mais interessantes para depois. ;)

About these ads

Ações

Informação

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




Seguir

Obtenha todo post novo entregue na sua caixa de entrada.

Junte-se a 150 outros seguidores

%d blogueiros gostam disto: