Capítulo 03: Formulários e menus
Instrutor
●

Programador desde 2000

●

Aluno de doutorado

●

●

●

●

Mestre em informática pelo
ICOMP/UFAM
Especialista em aplicações
WEB – FUCAPI
marcio.palheta@gmail.com
sites.google.com/site/marcio
palheta
M.Sc. Márcio Palheta
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

M.Sc. Márcio Palheta

3/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
M.Sc. Márcio Palheta

4/51
Exercício 01: Tela de dados do Aluno
●

Ctrl+N / Android / Android Activity

M.Sc. Márcio Palheta

5/51
Exercício 01: Tela de dados do Aluno
●

Configure os dados da nova Activity

M.Sc. Márcio Palheta

6/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
M.Sc. Márcio Palheta

7/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

M.Sc. Márcio Palheta

8/51
Exercício 02: Formulário de cadastro
●

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

M.Sc. Márcio Palheta

9/51
GroupView que,
Exercício 02: Formulário de cadastro na a
falta de espaço, permite
rolagem da tela
●

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

M.Sc. Márcio Palheta

10/51
Exercício 02: Formulário de cadastro
●

Início do arquivo: /res/layout/formulario.xml
GroupView para agrupamento de
componentes do formulario

M.Sc. Márcio Palheta

11/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

M.Sc. Márcio Palheta

12/51
Exercício 02: Formulário de cadastro
●

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

Local de armazenamento
da imagem

M.Sc. Márcio Palheta

13/51
Exercício 02: Nome e Telefone

M.Sc. Márcio Palheta

14/51
Exercício 02: Site e E-mail

M.Sc. Márcio Palheta

15/51
Exercício 02: Endereço e Nota

M.Sc. Márcio Palheta

16/51
Exercício 02: Botão para salvar
●

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

M.Sc. Márcio Palheta

17/51
Exercício 03: Baixa de imagens
●

Baixando imagens direto do
repositório do nosso curso:
https://github.com/marciop
alheta/cursosandroid/tree/
master/CadastroAluno/res
Baixe as imagens das pastas:
–

●

–

drawable-(hdpi, mdpi e
xhdpi)

M.Sc. Márcio Palheta

18/51
AndroidManifest.xml

M.Sc. Márcio Palheta
AndroidManifest.xml
Definições da
nossa App

M.Sc. Márcio Palheta
AndroidManifest.xml

Definições da
Tela de Listagem

M.Sc. Márcio Palheta
AndroidManifest.xml

Define a Activity ListaAlunos
como tela inicial da aplicação

M.Sc. Márcio Palheta
AndroidManifest.xml

Definições da
Tela de Formulário

M.Sc. Márcio Palheta
Exercício 04: Alteração de tela inicial
●

Altere o AndroidManifest para que o formulário seja a
tela inicial da nossa App
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
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 Formulario
como tela inicial
Execute a App

27/51
Antes de continuar...
●

Torne novamente a ListaAlunosActivity a tela inicial da
nossa aplicação:
Definições da
Tela de Listagem
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

29/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:
<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"/>

●

O método Activity.onCreateOptionsMenu retorna true para
indicar que o menu deve ser exibido na tela
30/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
31/51
Exercício 05: Menu principal
●

Altere o nome da App, no arquivo strings.xml:
Exercício 05: Menu principal
●

Altere o nome da App, no arquivo strings.xml:
Exercício 05: Menu principal
●

Altere o nome da App, no arquivo strings.xml:
Exercício 05: Menu principal
●

Crie o arquivo XML: res/menu/menu_principal:

M.Sc. Márcio Palheta

35/51
Exercício 05: Menu principal
●

Crie o arquivo XML:

É comum que apenas dois
Itens do Menu fiquem
res/menu/menu_principal: demais, ocultos
visíveis e os

M.Sc. Márcio Palheta

36/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

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

Devices com Android 2.x
trocam a ActionBar por
OptionMenu

M.Sc. Márcio Palheta

38/51
Exercício 05: Menu principal (cont...)

M.Sc. Márcio Palheta

39/51
Exercício 05: Menu principal
●

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

M.Sc. Márcio Palheta

40/51
Exercício 05: Execute a sua App

M.Sc. Márcio Palheta

41/51
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:

M.Sc. Márcio Palheta
Exercício 06: Clique no item NOVO

M.Sc. Márcio Palheta

43/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)

M.Sc. Márcio Palheta

44/51
Exercício 07: Abrir o Formulário
●

Método de clique da ListaAlunosActivity:

M.Sc. Márcio Palheta

45/51
Exercício 07: Abrir o Formulário
●

Método de clique da ListaAlunosActivity:

M.Sc. Márcio Palheta

46/51
Exercício 08: Fechar o Formulario

M.Sc. Márcio Palheta

47/51
Exercício 08: Fechar o Formulario

M.Sc. Márcio Palheta

48/51
O que vem a seguir?
●

Persistência com SQLite

●

Intents

●

Câmera e arquivos

●

LayoutInflater

●

Serviços de background

●

Integração via JSON

M.Sc. Márcio Palheta

49/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

M.Sc. Márcio Palheta

50/51
Capítulo 03: Formuários e menus

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

  • 1.
  • 2.
    Instrutor ● Programador desde 2000 ● Alunode doutorado ● ● ● ● Mestre em informática pelo ICOMP/UFAM Especialista em aplicações WEB – FUCAPI marcio.palheta@gmail.com sites.google.com/site/marcio palheta M.Sc. Márcio Palheta
  • 3.
    Agenda ● ● Activity para Formulariode 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 M.Sc. Márcio Palheta 3/51
  • 4.
    Incrementando o cadastro ● ● ● ● PrecisamosCadastrar 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 M.Sc. Márcio Palheta 4/51
  • 5.
    Exercício 01: Telade dados do Aluno ● Ctrl+N / Android / Android Activity M.Sc. Márcio Palheta 5/51
  • 6.
    Exercício 01: Telade dados do Aluno ● Configure os dados da nova Activity M.Sc. Márcio Palheta 6/51
  • 7.
    Passo-a-passo ● ● ● ● ● Altere o arquivode 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 M.Sc. Márcio Palheta 7/51
  • 8.
    Exercício 02: Formuláriode 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 M.Sc. Márcio Palheta 8/51
  • 9.
    Exercício 02: Formuláriode cadastro ● Início do arquivo: /res/layout/formulario.xml M.Sc. Márcio Palheta 9/51
  • 10.
    GroupView que, Exercício 02:Formulário de cadastro na a falta de espaço, permite rolagem da tela ● Início do arquivo: /res/layout/formulario.xml M.Sc. Márcio Palheta 10/51
  • 11.
    Exercício 02: Formuláriode cadastro ● Início do arquivo: /res/layout/formulario.xml GroupView para agrupamento de componentes do formulario M.Sc. Márcio Palheta 11/51
  • 12.
    Exercício 02: Formuláriode cadastro ● Início do arquivo: /res/layout/formulario.xml Exibe um arquivo de imagem com a foto do aluno M.Sc. Márcio Palheta 12/51
  • 13.
    Exercício 02: Formuláriode cadastro ● Início do arquivo: /res/layout/formulario.xml Local de armazenamento da imagem M.Sc. Márcio Palheta 13/51
  • 14.
    Exercício 02: Nomee Telefone M.Sc. Márcio Palheta 14/51
  • 15.
    Exercício 02: Sitee E-mail M.Sc. Márcio Palheta 15/51
  • 16.
    Exercício 02: Endereçoe Nota M.Sc. Márcio Palheta 16/51
  • 17.
    Exercício 02: Botãopara salvar ● Final do arquivo: /res/layout/formulario.xml M.Sc. Márcio Palheta 17/51
  • 18.
    Exercício 03: Baixade imagens ● Baixando imagens direto do repositório do nosso curso: https://github.com/marciop alheta/cursosandroid/tree/ master/CadastroAluno/res Baixe as imagens das pastas: – ● – drawable-(hdpi, mdpi e xhdpi) M.Sc. Márcio Palheta 18/51
  • 19.
  • 20.
  • 21.
    AndroidManifest.xml Definições da Tela deListagem M.Sc. Márcio Palheta
  • 22.
    AndroidManifest.xml Define a ActivityListaAlunos como tela inicial da aplicação M.Sc. Márcio Palheta
  • 23.
    AndroidManifest.xml Definições da Tela deFormulário M.Sc. Márcio Palheta
  • 24.
    Exercício 04: Alteraçãode tela inicial ● Altere o AndroidManifest para que o formulário seja a tela inicial da nossa App
  • 25.
    Exercício 04: Alteraçãode tela inicial ● Altere o AndroidManifest para que o formulário seja a tela inicial da nossa App Definições da Tela de Formulário
  • 26.
    Exercício 04: Alteraçãode 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 Formulario como tela inicial
  • 27.
  • 28.
    Antes de continuar... ● Tornenovamente a ListaAlunosActivity a tela inicial da nossa aplicação: Definições da Tela de Listagem
  • 29.
    Navegação entre telas ● Agoraque 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 29/51
  • 30.
    Estratégia para definiçãode Menus ● Apesar de ser possível a definição de Menus a partir de objetos Java, é mais comum o uso de arquivos XML: <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"/> ● O método Activity.onCreateOptionsMenu retorna true para indicar que o menu deve ser exibido na tela 30/51
  • 31.
    Estratégias para definiçãode 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 31/51
  • 32.
    Exercício 05: Menuprincipal ● Altere o nome da App, no arquivo strings.xml:
  • 33.
    Exercício 05: Menuprincipal ● Altere o nome da App, no arquivo strings.xml:
  • 34.
    Exercício 05: Menuprincipal ● Altere o nome da App, no arquivo strings.xml:
  • 35.
    Exercício 05: Menuprincipal ● Crie o arquivo XML: res/menu/menu_principal: M.Sc. Márcio Palheta 35/51
  • 36.
    Exercício 05: Menuprincipal ● Crie o arquivo XML: É comum que apenas dois Itens do Menu fiquem res/menu/menu_principal: demais, ocultos visíveis e os M.Sc. Márcio Palheta 36/51
  • 37.
    Exercício 05: Menuprincipal ● Crie o arquivo XML: res/menu/menu_principal: Define que o item pertence a uma ActionBar, que surgiu no Android 3.0 M.Sc. Márcio Palheta 37/51
  • 38.
    Exercício 05: Menuprincipal ● Crie o arquivo XML: res/menu/menu_principal: Define que o item pertence a uma ActionBar, que surgiu no Android 3.0 Devices com Android 2.x trocam a ActionBar por OptionMenu M.Sc. Márcio Palheta 38/51
  • 39.
    Exercício 05: Menuprincipal (cont...) M.Sc. Márcio Palheta 39/51
  • 40.
    Exercício 05: Menuprincipal ● Altere o método onCreateOptionsMenu(Menu menu) da classe ListaAlunosActivity: M.Sc. Márcio Palheta 40/51
  • 41.
    Exercício 05: Executea sua App M.Sc. Márcio Palheta 41/51
  • 42.
    Exercício 06: Eventosde 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: M.Sc. Márcio Palheta
  • 43.
    Exercício 06: Cliqueno item NOVO M.Sc. Márcio Palheta 43/51
  • 44.
    Navegação entre telasda 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) M.Sc. Márcio Palheta 44/51
  • 45.
    Exercício 07: Abriro Formulário ● Método de clique da ListaAlunosActivity: M.Sc. Márcio Palheta 45/51
  • 46.
    Exercício 07: Abriro Formulário ● Método de clique da ListaAlunosActivity: M.Sc. Márcio Palheta 46/51
  • 47.
    Exercício 08: Fecharo Formulario M.Sc. Márcio Palheta 47/51
  • 48.
    Exercício 08: Fecharo Formulario M.Sc. Márcio Palheta 48/51
  • 49.
    O que vema seguir? ● Persistência com SQLite ● Intents ● Câmera e arquivos ● LayoutInflater ● Serviços de background ● Integração via JSON M.Sc. Márcio Palheta 49/51
  • 50.
    Referências ● www.caelum.com.br ● d.android.com ● ● LECHETA, Ricardo. GoogleAndroid, 3a edição, Novatec, São Paulo, 2013 Código fonte completo: https://github.com/marciopalheta/cursosandroid M.Sc. Márcio Palheta 50/51
  • 51.