Android. Interfaces: widgets

Transcrição

1 Android Interfaces: widgets

2 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 o Recomenda-se não alterar esta classe manualmente é utilizada para facilitar a obtenção dos componentes ou recursos apenas informando o seu nome. 2

3 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

4 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

5 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

6 Termos Interface de Usuário - 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

7 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

8 Widgets O pacote android.widget reúne elementos gráficos para serem empregados para interação homemmá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 Aproveite e também altere o Text para Navegar. 8

9 Interface de Usuário Esta UI contém: - um container Name; - um container Address; - um container Parente; 9

10 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

11 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

12 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

13 Ciclo de vida de uma Activity 13

14 Ciclo de vida de uma Activity 14

15 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

16 Vida de uma Activity 16

17 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

18 Tempo de visibilidade de uma Activity 18

19 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

20 Resumindo... 20

21 Definem o ciclo de vida de uma Activity Invocam métodos na Activity o implementamos as funcionalidades requeridas. Eventos 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(); } 21

22 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

23 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 o Usado para salvar alterações não salvas da Activity corrente. Implementação deve ser muito rápida porque a próxima Activity não será iniciada até que esse método retorne. 23

24 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

25 Como criar uma activity 25

26 Como criar uma Activity 26

27 Como criar uma Activity 27

28 28

29 29

30 Manipulando o click do botão de Tela 30

31 Observando o ciclo de vida 31

32 Output das mensagens 32

33 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

34 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

35 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

36 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

37 Exercício 37

38 Exercício 38

39 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

40 Solução 40

41 RadioButton e RadioGroup RadioButton : botão de dois estados: marcado ou desmarcado. o o o Quando está desmarcado, o usuário pode pressionar e marcar. Depois de marcado o RadioButton não pode ser desmarcado pelo usuário pela interface (diretamente). Não faz sentido usar um RadioButton isolado. Utiliza-se grupos de RadioButtons associados em um RadioGroup, o o Quando o usuário marca um RadioButton, o RadioGroup automaticamente desmarca os demais. 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

42 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

43 Lay-out do formulário 43

44 Código no oncreate // 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); 44

45 Tratador de eventos /** * 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(); 45

46 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

47 Exercício Criar um projeto para demonstrar o uso do CheckBox. O usuário vai marcar CheckBox dizendo se tem gatos e cachorros 47

48 Código do oncreate 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); 48

49 Tratador do evento Click /** * */ 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(); 49

50 Resumindo.. Criar um projeto para demonstrar o uso dos widgets: o o o o TextView, EditText e Button: ao clicar no botão o texto será transformado em maiúsculas; ToggleButton: a medida que ele pressiona ou libera, escrever no output a ação executada. RadioGroup: a medida que ele marca as opções, escrever na tela usando uma janelinha Toast CheckBox: a medida que marcar a opção, escrever na janelinha Toast. 50