Capítulo 03 - Formulários, menus e navegação entre telas

51
Capítulo 03: Formulários e menus

description

Neste capítulo discutimos itens como: 1. Rolagem de tela com ScrowView; 2. Range de notas com SeekBar; 3. Exibição de Imagens com ImageView; 4. Exibição de menus com OptionMenu, MenuInflater e ActionBar; 5. Transição de telas com Intents; 6. Encerramento de uma activity 

Transcript of Capítulo 03 - Formulários, menus e navegação entre telas

Page 1: Capítulo 03 - Formulários, menus e navegação entre telas

Capítulo 03: Formulários e menus

Page 2: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

Instrutor

● Programador desde 2000

● Aluno de doutorado

● Mestre em informática pelo ICOMP/UFAM

● Especialista em aplicações WEB – FUCAPI

[email protected]

● sites.google.com/site/marciopalheta

Page 3: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

3/51

Agenda

● Activity para Formulario de cadastro de alunos

● Novos componentes: ScrollView, ImageView e SeekBar

● Trocar a tela inicial de uma App

● Trabalhando com Menus: OptionMenu e ActionBar

● Transição de telas com Intents

Page 4: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

4/51

Incrementando o cadastro

● Precisamos Cadastrar e Alterar os dados do aluno

● Dados: Foto, Nome, Fone, Endereço, Site, Email e Nota

● Mas a tela do device é limitada

● Vamos criar uma nova Activity (tela) para edição dos dados dos alunos

Page 5: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

5/51

Exercício 01: Tela de dados do Aluno

● Ctrl+N / Android / Android Activity

Page 6: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

6/51

Exercício 01: Tela de dados do Aluno

● Configure os dados da nova Activity

Page 7: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

7/51

Passo-a-passo

● Altere o arquivo de internacionalização: strings.xml

● Na tela nova, inclua os campos necessários ao formulário de cadastro de alunos

● Implemente o método onCreate() da classe de controle, para associação de atributos a componentes de tela

● Altere o arquivo AndroidManifest.xml, para que sua nova tela seja a primeira a ser executada, ao invés da tela de listagem

● Execute sua app

Page 8: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

8/51

Exercício 02: Formulário de cadastro

● Vamos criar um formulário para cadastro de alunos

● Novos componentes:

– ImageView: para exibir a foto o usuário, armazenada no próprio device;

– SeekBar: para que o usuário escolha uma nota, dentro de um intervalo

Page 9: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

9/51

Exercício 02: Formulário de cadastro

● Início do arquivo: /res/layout/formulario.xml

Page 10: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

10/51

Exercício 02: Formulário de cadastro

● Início do arquivo: /res/layout/formulario.xml

GroupView que, na falta de espaço, permite a

rolagem da tela

Page 11: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

11/51

Exercício 02: Formulário de cadastro

● Início do arquivo: /res/layout/formulario.xmlGroupView para agrupamento de

componentes do formulario

Page 12: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

12/51

Exercício 02: Formulário de cadastro

● Início do arquivo: /res/layout/formulario.xml

Exibe um arquivo de imagem com a foto do aluno

Page 13: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

13/51

Exercício 02: Formulário de cadastro

● Início do arquivo: /res/layout/formulario.xml

Local de armazenamento da imagem

Page 14: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

14/51

Exercício 02: Nome e Telefone

Page 15: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

15/51

Exercício 02: Site e E-mail

Page 16: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

16/51

Exercício 02: Endereço e Nota

Page 17: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

17/51

Exercício 02: Botão para salvar

● Final do arquivo: /res/layout/formulario.xml

Page 18: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

18/51

Exercício 03: Baixa de imagens

● Baixando imagens direto do repositório do nosso curso:

– https://github.com/marciopalheta/cursosandroid/tree/master/CadastroAluno/res

● Baixe as imagens das pastas:

– drawable-(hdpi, mdpi e xhdpi)

Page 19: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

AndroidManifest.xml

Page 20: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

AndroidManifest.xml

Definições da nossa App

Page 21: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

AndroidManifest.xml

Definições da Tela de Listagem

Page 22: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

AndroidManifest.xml

Define a Activity ListaAlunoscomo tela inicial da aplicação

Page 23: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

AndroidManifest.xml

Definições da Tela de Formulário

Page 24: Capítulo 03 - Formulários, menus e navegação entre telas

Exercício 04: Alteração de tela inicial

● Altere o AndroidManifest para que o formulário seja a tela inicial da nossa App

Page 25: Capítulo 03 - Formulários, menus e navegação entre telas

Exercício 04: Alteração de tela inicial

● Altere o AndroidManifest para que o formulário seja a tela inicial da nossa App

Definições da Tela de Formulário

Page 26: Capítulo 03 - Formulários, menus e navegação entre telas

Exercício 04: Alteração de tela inicial

● Altere o AndroidManifest para que o formulário seja a tela inicial da nossa App

Definições da Tela de Formulário

Seta o Formulariocomo tela inicial

Page 27: Capítulo 03 - Formulários, menus e navegação entre telas

27/51

Execute a App

Page 28: Capítulo 03 - Formulários, menus e navegação entre telas

Antes de continuar...

● Torne novamente a ListaAlunosActivity a tela inicial da nossa aplicação:

Definições da Tela de Listagem

Page 29: Capítulo 03 - Formulários, menus e navegação entre telas

29/51

Navegação entre telas

● Agora que temos duas telas na nossa App, precisamos de algum mecanismo para navegar entre elas

● Para essa atividade, é comum utilizarmos menus

● Toda Activity do Android já sabe tratar menus

● Precisamos apenas sobrescrever o método:

– onCreateOptionsMenu(Menu menu), que recebe do Android um menu vazio

● O próprio Android se encarrega de encaixar o menu na tela

● Para exibir o menu da App:

– Basta clicar no Botão Menu do device

Page 30: Capítulo 03 - Formulários, menus e navegação entre telas

30/51

Estratégia para definição de Menus

● Apesar de ser possível a definição de Menus a partir de objetos Java, é mais comum o uso de arquivos XML:

● O método Activity.onCreateOptionsMenu retorna true para indicar que o menu deve ser exibido na tela

<item android:id="@+id/menu_novo" android:icon="@drawable/ic_novo" android:showAsAction="always" android:title="Novo"/><item android:id="@+id/menu_mapa" android:icon="@drawable/ic_mapa" android:showAsAction="always" android:title="Mapa"/>

Page 31: Capítulo 03 - Formulários, menus e navegação entre telas

31/51

Estratégias para definição de Menus

● O Android precisa ler o XML com itens do menu e criar objetos do tipo View, a partir das tags

● Essa é a especialidades dos Inflaters

● O MenuInflater é especialista em carregar XML de menu

● O método Activity.onCreateOptionsMenu(Menu menu) nos oferece um objeto Menu vazio, que pode ser utilizado pelo MenuInflater para carregar um XML com itens do menu

● O método Activity.getMenuInflater() nos devolve um MenuInflater

● Inflater.inflate(): lê um XML e carrega um Menu

Page 32: Capítulo 03 - Formulários, menus e navegação entre telas

Exercício 05: Menu principal

● Altere o nome da App, no arquivo strings.xml:

Page 33: Capítulo 03 - Formulários, menus e navegação entre telas

Exercício 05: Menu principal

● Altere o nome da App, no arquivo strings.xml:

Page 34: Capítulo 03 - Formulários, menus e navegação entre telas

Exercício 05: Menu principal

● Altere o nome da App, no arquivo strings.xml:

Page 35: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

35/51

Exercício 05: Menu principal

● Crie o arquivo XML: res/menu/menu_principal:

Page 36: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

36/51

Exercício 05: Menu principal

● Crie o arquivo XML: res/menu/menu_principal:É comum que apenas dois

Itens do Menu fiquemvisíveis e os demais, ocultos

Page 37: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

37/51

Exercício 05: Menu principal

● Crie o arquivo XML: res/menu/menu_principal:Define que o item pertence a

uma ActionBar, que surgiu no Android 3.0

Page 38: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

38/51

Exercício 05: Menu principal

● Crie o arquivo XML: res/menu/menu_principal:

Devices com Android 2.xtrocam a ActionBar por

OptionMenu

Define que o item pertence a uma ActionBar, que surgiu no Android 3.0

Page 39: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

39/51

Exercício 05: Menu principal (cont...)

Page 40: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

40/51

Exercício 05: Menu principal

● Altere o método onCreateOptionsMenu(Menu menu) da classe ListaAlunosActivity:

Page 41: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

41/51

Exercício 05: Execute a sua App

Page 42: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

Exercício 06: Eventos de click

● Para monitorar o click, precisaremos implementar o método onOptionsItemSelected da ListaAlunosActivity

● Por ora, exibiremos apenas uma mensagem num Toast, quando o usuário clicar no item NOVO:

Page 43: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

43/51

Exercício 06: Clique no item NOVO

Page 44: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

44/51

Navegação entre telas da nossa App

● Agora que temos configurada a ActionBar, podemos continuar incrementando nossa App

● Vamos fazer com que o clique no menu NOVO faça surgir a tela de Formulário

● Para isso, usamos objetos do tipo Intent, que recebem um contexto e uma Activity que deve ser exibida

● Depois de configurada nossa Intenção, podemos iniciar a nova tela (startActivity)

Page 45: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

45/51

Exercício 07: Abrir o Formulário

● Método de clique da ListaAlunosActivity:

Page 46: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

46/51

Exercício 07: Abrir o Formulário

● Método de clique da ListaAlunosActivity:

Page 47: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

47/51

Exercício 08: Fechar o Formulario

Page 48: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

48/51

Exercício 08: Fechar o Formulario

Page 49: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

49/51

O que vem a seguir?

● Persistência com SQLite

● Intents

● Câmera e arquivos

● LayoutInflater

● Serviços de background

● Integração via JSON

Page 50: Capítulo 03 - Formulários, menus e navegação entre telas

M.Sc. Márcio Palheta

50/51

Referências

● www.caelum.com.br● d.android.com● LECHETA, Ricardo. Google Android, 3a edição,

Novatec, São Paulo, 2013● Código fonte completo:

https://github.com/marciopalheta/cursosandroid

Page 51: Capítulo 03 - Formulários, menus e navegação entre telas

Capítulo 03: Formuários e menus