Post on 11-Jun-2015
description
Capítulo 03: Formulários e menus
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
● marcio.palheta@gmail.com
● sites.google.com/site/marciopalheta
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
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
M.Sc. Márcio Palheta
5/51
Exercício 01: Tela de dados do Aluno
● Ctrl+N / Android / Android Activity
M.Sc. Márcio Palheta
6/51
Exercício 01: Tela de dados do Aluno
● Configure os dados da nova Activity
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
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
M.Sc. Márcio Palheta
9/51
Exercício 02: Formulário de cadastro
● 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 que, na falta de espaço, permite a
rolagem da tela
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
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
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
M.Sc. Márcio Palheta
14/51
Exercício 02: Nome e Telefone
M.Sc. Márcio Palheta
15/51
Exercício 02: Site e E-mail
M.Sc. Márcio Palheta
16/51
Exercício 02: Endereço e Nota
M.Sc. Márcio Palheta
17/51
Exercício 02: Botão para salvar
● Final do arquivo: /res/layout/formulario.xml
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)
M.Sc. Márcio Palheta
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 ListaAlunoscomo tela inicial da aplicação
M.Sc. Márcio Palheta
AndroidManifest.xml
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
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 Formulariocomo tela inicial
27/51
Execute a App
Antes de continuar...
● Torne novamente a ListaAlunosActivity a tela inicial da nossa aplicação:
Definições da Tela de Listagem
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
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"/>
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
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:
M.Sc. Márcio Palheta
35/51
Exercício 05: Menu principal
● Crie o arquivo XML: res/menu/menu_principal:
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
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
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
M.Sc. Márcio Palheta
39/51
Exercício 05: Menu principal (cont...)
M.Sc. Márcio Palheta
40/51
Exercício 05: Menu principal
● Altere o método onCreateOptionsMenu(Menu menu) da classe ListaAlunosActivity:
M.Sc. Márcio Palheta
41/51
Exercício 05: Execute a sua App
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:
M.Sc. Márcio Palheta
43/51
Exercício 06: Clique no item NOVO
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)
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 07: Abrir o Formulário
● Método de clique da ListaAlunosActivity:
M.Sc. Márcio Palheta
47/51
Exercício 08: Fechar o Formulario
M.Sc. Márcio Palheta
48/51
Exercício 08: Fechar o Formulario
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
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
Capítulo 03: Formuários e menus