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. 😉
Mark Vasconcelos Creative Solutions 