Programação de Aplicativos Android (Parte 5) - Ricardo Quintão - UVA

Prévia do material em texto

Prof: Ricardo Quintão
email: ricardo.quintao@uva.br
Site: www.rgquintao.com.br
Criando um Projeto Android
Estrutura da tela.
Uma tela é composta de Views e de ViewGroups.
Views: são objetos visuais de uma interface
gráfica. Elas ocupam uma área na tela e são
responsáveis por desenhar e controlar os eventos
de um componente.
ViewGroup: são responsáveis pelo gerenciamento
de layouts. O ViewGroup pode ser resumido a um
contêiner invisível que pode receber uma ou mais
Views ou outros ViewGroups.
Toda tela começa com um ViewGroup Raiz.
Só pode existir um único ViewGroup Raiz, mas
podem existir diversos ViewGroup Filhos.
Ao lado temos a estrutura de uma tela.
ViewGroup
(Raiz)
ViewViewGroup
(Filho)
View
ViewViewView
Criando um Projeto Android
tela1.xml
<LinearLayout>
<LinearLayout>
<View 1 />
<View 2 />
<View n />
</LinearLayout>
<LinearLayout>
<View 1 />
<View 2 />
<View n />
</LinearLayout>
</LinearLayout>
ViewGroup
Elemento
Raiz
ViewGroup
Elemento
Filho
ViewGroup
Elemento
Filho
Vejamos agora o uso de telas com mais de um
ViewGroup.
• Múltiplos Layouts na mesma tela
Os layouts são exemplos de ViewGroups. Neles
nós podemos inserir diversas Views e também
ViewGroups.
Sendo assim, podemos organizar uma tela
contendo múltiplos layouts para estruturar
melhor a organização das suas Views.
Dentro de uma tela é possível utilizar mais de
um layout, porém, só pode existir um único
elemento raiz.
tela1.xml
1: <LinearLayout
2: xmlns:android="http://schemas.android.com/apk/res/android"
3: xmlns:tools="http://schemas.android.com/tools"
4: android:orientation="vertical"
5: android:layout_width="match_parent"
6: android:layout_height="match_parent"
7: android:padding="10dp"
8: tools:context="com.example.teste.Activity_Principal" >
9:
10: <LinearLayout
11: android:orientation="horizontal"
12: android:layout_width="wrap_content"
13: android:layout_height="wrap_content" >
14:
15: <TextView
16: android:layout_width="wrap_content"
17: android:layout_height="wrap_content"
18: android:text="Peso:" />
19:
20: <EditText
21: android:id="@+id/et_peso"
22: android:layout_width="wrap_content"
23: android:layout_height="wrap_content" />
24:
25: </LinearLayout>
26: 
Vamos, por exemplo, criar um
LinearLayout raiz de orientação
vertical e, dentro dele, múltiplos
LinearLayouts de orientação
horizontal, para permitir que dois
ou mais objetos sejam alinhados
horizontalmente.
A seguir temos um exemplo desta
organização:
Como podemos ver, na linha 10 foi
definido um novo LinearLayout
filho com apenas duas Views,
sendo este LinearLayout finalizado
na linha 25.
Temos que tomar cuidado com as
definições dos elementos filhos
para que eles não sobreponham os
já existentes.
tela1.xml (continuação)
27: <LinearLayout
28: android:orientation="horizontal"
29: android:layout_width="wrap_content"
30: android:layout_height="wrap_content" >
31:
32: <TextView
33: android:layout_width="wrap_content"
34: android:layout_height="wrap_content"
35: android:text="Altura:" />
36:
37: <EditText
38: android:id="@+id/et_altura"
39: android:layout_width="wrap_content"
40: android:layout_height="wrap_content" />
41:
42: </LinearLayout>
43: 
44: <Button
45: android:id="@+id/bt_calcular"
46: android:layout_width="match_parent"
47: android:layout_height="wrap_content"
48: android:text="Calcular IMC" />
49:
50: </LinearLayout>
Na linha 27 foi definido outro
LinearLayout filho com apenas
duas Views, sendo este
LinearLayout finalizado na linha
42.
Na linha 44 definimos um botão.
Na linha 50 finalizamos o
LinearLayout raiz.
Ao Lado temos o resultado da tela
que criamos.
O LinearLayout raiz define a tela
como um todo.
O primeiro LinearLayout filho
agrupa a TextView Peso e o seu
EditText. Repare como ficaram
alinhados horizontalmente.
O segundo LinearLayout filho
agrupa a TextView Altura e o seu
EditText também horizontalmente.
E por último o Botão.
Os LinearLayouts filhos e o Botão
foram alinhados verticalmente, já
que o LinearLayout raiz assim
definiu.
Primeiro Layout filho
Segundo Layout filho
Criando um Projeto Android
tela1.xml
<ScrollView>
<LinearLayout>
<LinearLayout>
<View 1 />
<View 2 />
<View n />
</LinearLayout>
<LinearLayout>
<View 1 />
<View 2 />
<View n />
</LinearLayout>
</LinearLayout>
</ScrollView>
ViewGoup
Elemento
Raiz
ViewGroup
Elemento
Filho
• ScrollView
ScrollView é um outro exemplo de ViewGroup.
Este ViewGroup possibilita que o seu conteúdo
seja rolado na tela caso ele não caiba na área
definida.
Ele tem como limitação gerenciar apenas um
elemento. Para que diversas Views possam ser
utilizadas, eles devem ser agrupadas um uma
ViewGroup, por exemplo um layout, e então
colocar este ViewGroup dentro da ScrollView.
Criando um Projeto 
Android
• RadioGroup
RadioGroup é um outro exemplo
de ViewGroup.
Este ViewGroup é normalmente
utilizado para agrupar os
RadioButtons.
Como os RadioButtons possuem
a característica de seleção
exclusiva, isto é, quando um
botão é marcado os demais são
desmarcados, é necessário
agrupar os botões que fazem
parte deste grupo.
tela1.xml
1: <RadioGroup
2: xmlns:android="http://schemas.android.com/apk/res/android"
3: xmlns:tools="http://schemas.android.com/tools"
4: android:orientation="vertical"
5: android:layout_width="match_parent"
6: android:layout_height="match_parent"
7: android:padding="10dp"
8: tools:context="com.example.teste.Activity_Principal" >
9:
10: <radioButton
11: android:id="@+id/rb_OP1"
12: android:layout_width="wrap_content"
13: android:layout_height="wrap_content"
14: android:text="OP1" />
15:
16: <radioButton
17: android:id="@+id/rb_OP2"
18: android:layout_width="wrap_content"
19: android:layout_height="wrap_content"
20: android:text="OP2" />
21:
22: <radioButton
23: android:id="@+id/rb_OP3"
24: android:layout_width="wrap_content"
25: android:layout_height="wrap_content"
26: android:text="OP3" />
27:
28: </RadioGroup>
Ao lado temos uma amostra da
tela deste projeto criada a partir
do arquivo tela1.xml apresentado
anteriormente.
Repare que inicialmente nenhum
botão possui marcação.
Para evitar um possível erro de
processamento em que o usuário
não marque nada, deve-se
escolher um RadioButton para já
começar marcado.
Para isso, utilizasse o parâmetro
checked no xml como ilustrado
abaixo:
android:checked=“true”
Criando um Projeto Android
Criando um Projeto 
Android
Exemplo de uso do RadioGroup e
RadioButtons.
O Exemplo ilustrado vai solicitar
que seja marcada uma das
opções.
Após clicar no botão, será
informada a opção que foi
marcada.
Ao lado temos o arquivo
tela1.xml definindo o layout da
tela que será apresentada.
tela1.xml
1: <LinearLayout
2: xmlns:android="http://schemas.android.com/apk/res/android"
3: xmlns:tools="http://schemas.android.com/tools"
4: android:orientation="vertical"
5: android:layout_width="match_parent"
6: android:layout_height="match_parent"
7: android:padding="10dp"
8: tools:context="com.example.radiobutton.MainActivity">
9:
10: <TextView
11: android:layout_width="wrap_content"
12: android:layout_height="wrap_content"
13: android:text="Marque o seu estado civil" />
14:
15: <RadioGroup
16: android:layout_width="wrap_content"
17: android:layout_height="wrap_content"
18: android:orientation="vertical" />
19:
20: <radioButton
21: android:id="@+id/rb_solteiro"
22: android:layout_width="wrap_content"
23: android:layout_height="wrap_content"
24: android:checked="true"
25: android:text="Solteiro" />
26:
Criando um Projeto Android
tela1.xml (continuação)
27: <radioButton
28: android:id="@+id/rb_casado"
29: android:layout_width="wrap_content"
30: android:layout_height="wrap_content"
31: android:text="Casado" />
32:
33: <radioButton
34: android:id="@+id/rb_separado"
35: android:layout_width="wrap_content"
36: android:layout_height="wrap_content"
37: android:text="Separado" />
38:
39: <radioButton
40: android:id="@+id/rb_divorciado"
41: android:layout_width="wrap_content"
42: android:layout_height="wrap_content"
43: android:text="Divorciado" />
44:
45: <radioButton
46: android:id="@+id/rb_viuvo"
47: android:layout_width="wrap_content"
48: android:layout_height="wrap_content"
49: android:text="Viúvo" />
50:
51: </RadioGroup>
52:
tela1.xml (continuação)
53: <Button
54: android:id="@+id/bt_registrar"
55: android:layout_width="match_parent"
56: android:layout_height="wrap_content"
57: android:text="Registrar" />
58:
59: <TextView
60: android:id="@+id/bt_resultado"
61: android:layout_width="wrap_content"
62: android:layout_height="wrap_content"
63: android:text="" />
64:
65: </LinearLayout>
Vale ressaltar que os radioButtons foram
agrupados em um RadioGroup para que seja feita
a marcação exclusiva de uma das opções.
Ao lado temos uma amostra
da tela deste projeto criada a
partir do arquivo tela1.xml
apresentado anteriormente.
Criando um Projeto Android
Criando um Projeto 
Android
Ao lado temos o arquivo
Activity_tela1.java responsável pela
execução do nosso projeto.
Activity_tela1.java
1: package com.example.radiobutton;
2: 
3: import android.app.Activity;
4: import android.os.Bundle;
5: import android.view.View;
6: import android.widget.*;
7: 
8: public class Activity_tela1 extends Activity
9: {
10: RadioButton rb_solteiro, rb_casado, rb_separado,
11: rb_divorciado, rb_viuvo;
12: TextView tv_resultado;
13: Button bt_registrar;
14:
15: @Override
16: protected void onCreate(Bundle savedInstanceState)
17: {
18: super.onCreate(savedInstanceState);
19: setContentView(R.layout.tela1);
20:
Activity_tela1.java (continuação)
21: rb_solteiro = (RadioButton) findViewById(R.id.rb_solteiro);
22: rb_casado = (RadioButton) findViewById(R.id.rb_casado);
23: rb_separado = (RadioButton) findViewById(R.id.rb_separado);
24: rb_divorciado = (RadioButton) findViewById(R.id.rb_divorciado);
25: rb_viuvo = (RadioButton) findViewById(R.id.rb_viuvo);
26: bt_registrar = (Button) findViewById(R.id.bt_registrar);
27: tv_resultado = (TextView) findViewById(R.id.tv_resultado);
28:
29: bt_registrar.setOnClickListener(new View.OnClickListener() {
30:
31: @Override
32: public void onClick(View v)
33: {
34: String texto="Seu estado civil é: ";
35: if(rb_solteiro.isChecked())
36: texto = texto + "solteiro";
37: else if(rb_casado.isChecked())
38: texto = texto + "casado";
39: else if(rb_separado.isChecked())
40: texto = texto + "separado";
41: else if(rb_divorciado.isChecked())
42: texto = texto + "divorciado";
43: else if(rb_viuvo.isChecked())
44: texto = texto + "viuvo";
45:
46: tv_resultado.setText(texto);
47: }
48: });
49: }
50: }
Para verificar se um
determinado RadioButton está
marcado, utiliza-se o método
isChecked( ), do RadioButton
que retorna um valor booleano
(true ou false).
Criando um Projeto 
Android
Ao lado temos uma amostra
da execução deste projeto.
Criando um Projeto Android
Criando um Projeto 
Android
• CheckBox
CheckBox tem um funcionamento
semelhante ao RadioButton.
A diferença entre os dois, vem do
fato que o RadioButton é utilizado
quando apenas uma das opções
deve ser marcada, já o CheckBox
é utilizado quando marcações
múltiplas são permitidas.
Devido a isso, as CheckBoxes não
precisam estar agrupadas em uma
ViewGroup.
Ao Lado temos um exemplo do
uso de CheckBox.
tela1.xml
1: <LinearLayout
2: xmlns:android="http://schemas.android.com/apk/res/android"
3: xmlns:tools="http://schemas.android.com/tools"
4: android:orientation="vertical"
5: android:layout_width="match_parent"
6: android:layout_height="match_parent"
7: android:padding="10dp"
8: tools:context="com.example.checkbox.Activity_tela1" >
9:
10: <TextView
11: android:layout_width="wrap_content"
12: android:layout_height="wrap_content"
13: android:text="Marque uma das opções abaixo" />
14:
15: <CheckBox
16: android:id="@+id/cb_musculacao"
17: android:layout_width="wrap_content"
18: android:layout_height="wrap_content"
19: android:text="Musculação" />
20:
21: <CheckBox
22: android:id="@+id/cb_ginastica"
23: android:layout_width="wrap_content"
24: android:layout_height="wrap_content"
25: android:text="Ginástica" />
26:
Criando um Projeto Android
tela1.xml (continuação)
27: <CheckBox
28: android:id="@+id/cb_hidro"
29: android:layout_width="wrap_content"
30: android:layout_height="wrap_content"
31: android:text="Hidroginástica" />
32:
33: <CheckBox
34: android:id="@+id/cb_natacao"
35: android:layout_width="wrap_content"
36: android:layout_height="wrap_content"
37: android:text="Natação" />
38:
33: <Button
34: android:id="@+id/bt_registrar"
35: android:layout_width="match_parent"
36: android:layout_height="wrap_content"
37: android:text="Registrar" />
38:
33: <TextView
34: android:id="@+id/tv_resultado"
35: android:layout_width="wrap_content"
36: android:layout_height="wrap_content"
37: android:text="" />
38:
39: </LinearLayout>
Criando um Projeto 
Android
Ao lado temos o arquivo
Activity_tela1.java
responsável pela execução
do nosso projeto.
Activity_tela1.java
1: package com.example.checkbox;
2: 
3: import android.app.Activity;
4: import android.os.Bundle;
5: import android.view.View;
6: import android.widget.*;
7: 
8: public class Activity_tela1 extends Activity
9: {
10: CheckBox cb_musculacao, cb_ginastica,
11: cb_hidro,cb_natacao;
12: TextView tv_resultado;
13: Button bt_registrar;
14:
15: @Override
16: protected void onCreate(Bundle savedInstanceState)
17: {
18: super.onCreate(savedInstanceState);
19: setContentView(R.layout.tela1);
20:
21: cb_musculacao = (CheckBox) findViewById(R.id.cb_musculacao);
22: cb_ginastica = (CheckBox) findViewById(R.id.cb_ginastica);
23: cb_hidro = (CheckBox) findViewById(R.id.cb_hidro);
24: cb_natacao = (CheckBox) findViewById(R.id.cb_natacao);
25: bt_registrar = (Button) findViewById(R.id.bt_registrar);
26: tv_resultado = (TextView) findViewById(R.id.tv_resultado);
27:
Activity_tela1.java (continuação)
28: bt_registrar.setOnClickListener(new View.OnClickListener() {
29:
30: @Override
31: public void onClick(View v)
32: {
33: String texto="Você escolheu: ";
34: if(cb_musculacao.isChecked())
35: texto = texto + “\nMusculação";
36: if(cb_ginastica.isChecked())
37: texto = texto + "\nGinástica";
38: if(cb_hidro.isChecked())
39: texto = texto + "\nHidroginástica";
40: if(cb_natacao.isChecked())
41: texto = texto + "\nNatação";
42:
43: tv_resultado.setText(texto);
44: }
45: });
46: }
47: }
Criando um Projeto Android
Prof: Ricardo Quintão
email: ricardo.quintao@uva.br
Site: www.rgquintao.com.br