Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

11,861 views

Published on

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 

Published in: Technology

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

  1. 1. Capítulo 03: Formulários e menus
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. Exercício 01: Tela de dados do Aluno ● Ctrl+N / Android / Android Activity M.Sc. Márcio Palheta 5/51
  6. 6. Exercício 01: Tela de dados do Aluno ● Configure os dados da nova Activity M.Sc. Márcio Palheta 6/51
  7. 7. 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
  8. 8. 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
  9. 9. Exercício 02: Formulário de cadastro ● Início do arquivo: /res/layout/formulario.xml M.Sc. Márcio Palheta 9/51
  10. 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. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. Exercício 02: Nome e Telefone M.Sc. Márcio Palheta 14/51
  15. 15. Exercício 02: Site e E-mail M.Sc. Márcio Palheta 15/51
  16. 16. Exercício 02: Endereço e Nota M.Sc. Márcio Palheta 16/51
  17. 17. Exercício 02: Botão para salvar ● Final do arquivo: /res/layout/formulario.xml M.Sc. Márcio Palheta 17/51
  18. 18. 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
  19. 19. AndroidManifest.xml M.Sc. Márcio Palheta
  20. 20. AndroidManifest.xml Definições da nossa App M.Sc. Márcio Palheta
  21. 21. AndroidManifest.xml Definições da Tela de Listagem M.Sc. Márcio Palheta
  22. 22. AndroidManifest.xml Define a Activity ListaAlunos como tela inicial da aplicação M.Sc. Márcio Palheta
  23. 23. AndroidManifest.xml Definições da Tela de Formulário M.Sc. Márcio Palheta
  24. 24. Exercício 04: Alteração de tela inicial ● Altere o AndroidManifest para que o formulário seja a tela inicial da nossa App
  25. 25. 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
  26. 26. 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
  27. 27. Execute a App 27/51
  28. 28. Antes de continuar... ● Torne novamente a ListaAlunosActivity a tela inicial da nossa aplicação: Definições da Tela de Listagem
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. Exercício 05: Menu principal ● Altere o nome da App, no arquivo strings.xml:
  33. 33. Exercício 05: Menu principal ● Altere o nome da App, no arquivo strings.xml:
  34. 34. Exercício 05: Menu principal ● Altere o nome da App, no arquivo strings.xml:
  35. 35. Exercício 05: Menu principal ● Crie o arquivo XML: res/menu/menu_principal: M.Sc. Márcio Palheta 35/51
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. Exercício 05: Menu principal (cont...) M.Sc. Márcio Palheta 39/51
  40. 40. Exercício 05: Menu principal ● Altere o método onCreateOptionsMenu(Menu menu) da classe ListaAlunosActivity: M.Sc. Márcio Palheta 40/51
  41. 41. Exercício 05: Execute a sua App M.Sc. Márcio Palheta 41/51
  42. 42. 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. 43. Exercício 06: Clique no item NOVO M.Sc. Márcio Palheta 43/51
  44. 44. 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
  45. 45. Exercício 07: Abrir o Formulário ● Método de clique da ListaAlunosActivity: M.Sc. Márcio Palheta 45/51
  46. 46. Exercício 07: Abrir o Formulário ● Método de clique da ListaAlunosActivity: M.Sc. Márcio Palheta 46/51
  47. 47. Exercício 08: Fechar o Formulario M.Sc. Márcio Palheta 47/51
  48. 48. Exercício 08: Fechar o Formulario M.Sc. Márcio Palheta 48/51
  49. 49. 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
  50. 50. 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
  51. 51. Capítulo 03: Formuários e menus

×