Android

Interfaces: widgets

Relembrando... • Após a criação do projeto, será criada uma

estrutura de diretórios necessária para um projeto Android.

• A pasta src contém os fontes das classe que representam as Activity, etc...

• A pasta gen contém uma classe utilitária “R.java”, gerada automaticamente

o Recomenda-se não alterar esta classe manualmente

o é utilizada para facilitar a obtenção dos componentes ou recursos apenas informando o seu nome.

2

Interface Gráfica com Usuário

• Interface com usuário é baseada em View e ViewGroup

• A classe View serve como base para subclasses denominadas Widgets que oferecem uma forma de implementar os elementos gráficos de um interface

o TextView, Button , TextEdit, RadioButton, Checkbox, etc

• ViewGroup representa um container de Views e também de ViewGroups.

o classe base para componentes de layouts, como LinearLayout, FrameLayout, AbsoluteLayout, RelativeLayout, TableLayout, etc.

3

View

• Estrutura de dados, cujas propriedades armazenam dados do layout e determinada área de interface.

• Capaz de gerenciar suas propriedades como proporção, posição, foco, aparência (baseado no status), scrolling.

4

Como criar interfaces

• Definição por XML

o Escolha normalmente usada pelos desenvolvedores

• Programação

o Usada para criação dinâmica de telas

5

Interface de Usuário

Termos

- View, Control, Widget

Representam elementos de interface de usuário;

Incluem: botões, grades, listas, janelas, entre outros;

- Container

Visão que contém outras visões;

- Layout

Arquivo XML utilizado para descrever a visão; 6

android.widget

• O pacote android.widget reúne elementos gráficos para serem utilizados para interação humano aplicação

o TextView

o EditText

o Button

o Outros...

7

Widgets

• O pacote android.widget reúne elementos gráficos para serem empregados para interação homem-máquina da aplicação.

• Arraste um Button da Palette para a tela. Mantenha o Button selecionado e veja as propriedades na aba Properties

• Procure a propriedade Id e altere para: @+main/btnNavegar .

• Aproveite e também altere o Text para Navegar. 8

Interface de Usuário

Esta UI contém:

- um container Name;

- um container Address;

- um container Parente;

9

Editor de Layout

• Um ponto interessante na tecnologia adotada pelo Android:

o forma que é desenvolvida a interface

o Em Java costumamos criar interfaces pelo código

o Nesta plataforma as interfaces por padrão são feitas em arquivos .xml.

10

Associando XML ao Código Fonte

• Activity gerada no processo de criação do projeto será a principal

• Arquivo .XML gerado será carregado no onCreate() da Activity acima.

11

Activity

• Componente do aplicativo que fornece uma tela no qual o usuário pode interagir

• Cada Activity controla uma janela na qual se pode desenhar sua interface com o usuário.

• Um aplicativo normalmente consiste de múltiplas Activities que são fracamente ligadas umas às outras (SO gerencia as activities)

12

Ciclo de vida de uma Activity

13

Ciclo de vida de uma Activity

14

Vida de uma Activity

• Acontece entre a primeira chamada para onCreate até a chamada do finally() que resulta no evento onDestroy().

• Uma Activity irá fazer toda a configuração do estado de suas propriedades no OnCreate() e liberar todos os recursos remanescentes em onDestroy().

15

Vida de uma Activity

16

Tempo de visibilidade de uma Activity

• Acontece entre uma chamada para onStart() até uma chamada correspondente para onStop().

• Durante este período o usuário pode ver a Activity na tela, embora não possa estar em primeiro plano e interagir com o usuário.

• Entre estes dois métodos que você pode manter os recursos que são necessários para mostrar a atividade para o usuário.

17

Tempo de visibilidade de uma Activity

18

Activity no topo da pilha

• Acontece entre uma chamada para onResume() até uma chamada correspondente para onPause().

• Durante esse tempo, a Activity está na frente de todas as outras atividades e pode interagir com o usuário.

19

Resumindo...

20

Eventos

• Definem o ciclo de vida de uma Activity

• Invocam métodos na Activity

o implementamos as funcionalidades requeridas.

21

public class Activity extends ApplicationContext {

protected void onCreate(Bundle savedInstanceState);

protected void onStart();

protected void onRestart();

protected void onResume();

protected void onPause();

protected void onStop();

protected void onDestroy();

}

Eventos

• onCreate(): Chamado quando a Activity é criada pela primeira vez.

• onRestart(): Chamado após uma Activity ser parada (stop), preparando a Activity para retomada do topo da pilha;

• onStart(): Chamado quando a Activity está se tornando visível para o usuário;

22

Eventos

• onResume(): Chamado quando a Activity vai começar a interagir com o usuário. Neste ponto, sua atividade está no topo da pilha de atividade.

• onPause(): Chamado quando o sistema está prestes a começar a retomar uma Activity anterior.

o Usado para salvar alterações não salvas da Activity corrente.

o Implementação deve ser muito rápida porque a próxima Activity não será iniciada até que esse método retorne.

23

Eventos

• onStop(): Chamado quando a Activity já não é visível para o usuário, porque outra Activity está cobrindo toda a tela.

• onDestroy(): A última chamada recebida pela Activity antes de ser destruída, isso porque a Activity foi finalizada pelo método finally() ou o espaço da memória está sendo requerido pelo sistema.

24

Como criar uma activity

25

Como criar uma Activity

26

Como criar uma Activity

27

28

29

Manipulando o click do botão de Tela

30

Observando o ciclo de vida

31

Output das mensagens

32

TextView

• utilizado para exibir um texto e permitir a sua edição.

• Por padrão sua configuração não permite a edição, substitui o Label utilizado nas outras tecnologias.

33

EditText

• Herdeiro de TextView

• sua configuração permite a edição de texto por padrão,

o similar ao TextBox (Framework .NET) ou

o do JTextFied (Java).

34

Button

• Controle utilizado para disponibilizar ações ao usuário

• Pode assumir o comportamento

o clicável (click-button) ou

o pressionado com estado (push-button).

Por padrão o comportamento é click-button.

35

Exercício

• Criar um projeto para demonstrar o uso do TextView, EditText e Button.

• Neste novo projeto vamos exigir um texto e ao clicar no botão o texto será transformado em um texto todo maiúsculo.

36

Exercício

37

Exercício

38

ToggleButton

• botão que exibe um estado "ON" ou "OFF" no qual o usuário pode pressionar e alterar o estado caso queira.

• Exercício:

o Crie um projeto simples com um ToggleButton na tela, e a medida que ele pressiona ou libera vamos escrever no output a ação executada.

39

Solução

40

RadioButton e RadioGroup • RadioButton : botão de dois estados: marcado ou

desmarcado.

o Quando está desmarcado, o usuário pode pressionar e marcar.

o Depois de marcado o RadioButton não pode ser desmarcado pelo usuário pela interface (diretamente).

o Não faz sentido usar um RadioButton isolado.

• Utiliza-se grupos de RadioButtons associados em um RadioGroup,

o Quando o usuário marca um RadioButton, o RadioGroup automaticamente desmarca os demais.

o Utiliza-se o RadioGroup para gerenciar um conjunto de RadioButton no qual exigimos uma escolha do usuário dentre o grupo, ou seja, exigir uma escolha somente.

41

Exercício

• Crie um projeto para demonstrar o uso do RadioGroup.

• O usuário vai ter um RadioGroup na tela, e a medida que ele marca as opções vamos escrever na própria tela usando uma janelinha Toast

42

Lay-out do formulário

43

Código no onCreate

44

// Como sempre, pegando os objetos da interface e

// armazenando em atributos da classe

this.rdgGrupoOp01 = (RadioButton)this.findViewById(R.main.rdgGrupoOp01);

this.rdgGrupoOp02 = (RadioButton)this.findViewById(R.main.rdgGrupoOp02);

this.rdgGrupoOp03 = (RadioButton)this.findViewById(R.main.rdgGrupoOp03);

// Criando os eventos, só que em vez de criar um evento

// para cada componente conforme os demais exemplos

// vou criar um único tratador de evento (ver o código a seguir)

this.rdgGrupoOp01.setOnClickListener(this.rdgGrupo_Click);

this.rdgGrupoOp02.setOnClickListener(this.rdgGrupo_Click);

this.rdgGrupoOp03.setOnClickListener(this.rdgGrupo_Click);

// Marcar como a Opção 1 como padrão

this.rdgGrupoOp01.setChecked(true);

Tratador de eventos

45

/**

* Tratador do evento Click para todos as opções Radio

*/

private RadioButton.OnClickListener rdgGrupo_Click = new

RadioButton.OnClickListener() {

public void onClick(View v) {

String str = "Opção 1 : " + rdgGrupoOp01.isChecked() +"\n";

str += "Opção 2 : " + rdgGrupoOp02.isChecked() + "\n";

str += "Opção 3 : " + rdgGrupoOp03.isChecked();

// O Toast será estudado mais a frente, apenas use ele

// para exibir uma pequena janela com um texto

Toast.makeText(Main.this, str, Toast.LENGTH_SHORT).show();

}

};

CheckBox

• Ao contrário do RadioButton o CheckBox pode estar sozinho, ter mais de um CheckBox marcado ao mesmo tempo, e até não ter nenhum marcado.

• Não requer controlador de grupo.

46

Exercício

• Criar um projeto para demonstrar o uso do CheckBox.

• O usuário vai marcar CheckBox dizendo se tem gatos e cachorros

47

Código do onCreate

48

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

// Como sempre, pegando os objetos da interface e

// armazenando em atributos da classe

this.ckbCachorro = (CheckBox)this.findViewById(R.main.ckbCachorro);

this.ckbGato = (CheckBox)this.findViewById(R.main.ckbGato);

// Criando os eventos, só que em vez de criar um evento

// para cada componente conforme os demais exemplos

// vou criar um único tratador de evento (ver o código

// mais abaixo)

this.ckbCachorro.setOnClickListener(this.rdgGrupo_Click);

this.ckbGato.setOnClickListener(this.rdgGrupo_Click);

}

Tratador do evento Click

49

/**

* */

private CheckBox.OnClickListener rdgGrupo_Click = new

CheckBox.OnClickListener() {

public void onClick(View v) {

String str = "Possui cachorros : " + ckbCachorro.isChecked() +

"\n";

str += "Possui gatos : " + ckbGato.isChecked();

Toast.makeText(Main.this, str, Toast.LENGTH_SHORT).show();

}

};

Resumindo.. • Criar um projeto para demonstrar o uso dos

widgets:

o TextView, EditText e Button: ao clicar no botão o texto será transformado em maiúsculas;

o ToggleButton: a medida que ele pressiona ou libera, escrever no output a ação executada.

o RadioGroup: a medida que ele marca as opções, escrever na tela usando uma janelinha Toast

o CheckBox: a medida que marcar a opção, escrever na janelinha Toast.

50