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.

Xamarin - AppEtecFlix - Conteúdo de HTML Externo no App

28 views

Published on

✓Adicionar mais telas a um App
✓Adicionar Imagens ao Projeto
✓Usar estilos comuns em todo App
✓Usar botões de Imagens
✓Abrir uma tela HTML no APP

Published in: Software
  • Be the first to comment

  • Be the first to like this

Xamarin - AppEtecFlix - Conteúdo de HTML Externo no App

  1. 1. EtecFlixApp: Conteúdo HTML no Xamarin Prof. Me. Tiago A. Silva Profª Esp. Nídia Castelli VERSÃO 2019 www.tiago.blog.br PROGRAMAÇÃO DE APLICATIVOS MOBILE I
  2. 2. PLANO DE AULA ▪ Nesta aula vamos aprender: ✓Adicionar mais telas a um App ✓Adicionar Imagens ao Projeto ✓Usar estilos comuns em todo App ✓Usar botões de Imagens ✓Abrir uma tela HTML no APP 2www.tiago.blog.br OBJETIVO: Criar um aplicativo que abra o trailer dos filmes!
  3. 3. QUAL É O OBJETIVO DO NOSSO APP? • Desta vez o App terá várias telas. Nós vamos criar uma tela para: – Cada categoria de filme e cada tela de categoria terá os posters dos filmes – Após clicado no poster o App irá abrir uma tela com os detalhes sobre o filme, o trailer e a foto do poster! www.tiago.blog.br 3
  4. 4. COMO VAI FICAR O RESULTADO FINAL?
  5. 5. www.tiago.blog.br 5
  6. 6. PARTE I: CRIANDO A ESTRUTURA DO PROJETO
  7. 7. COMO FICARÁ A ESTRUTURA DA NOSSA SOLUÇÃO www.tiago.blog.br 7 Crie as pastas
  8. 8. COMO FICARÁ A ESTRUTURA DA NOSSA SOLUÇÃO www.tiago.blog.br 8 Altere as configurações “Ação de Compilação” e “Copiar para Diretório de Saída” Importe as imagens para as respectivas pastas.
  9. 9. COMO FICARÁ A ESTRUTURA DA NOSSA SOLUÇÃO www.tiago.blog.br 9 Não esquema de copiar as imagens dos posters também e modificar as configurações conforme o slide anterior. Crie as páginas Xamarin dentro das pastas.
  10. 10. PARTE II: AJUSTANDO A NAVEGAÇÃO E CRIANDO OS ESTILOS COMUNS
  11. 11. AJUSTANDO A NAVEGAÇÃO www.tiago.blog.br 11 Para habilitarmos a opção de trocar de tela, edite o arquivo App.xaml.cs Modifique o código conforme especificado
  12. 12. CRIADO OS ESTILOS COMUNS www.tiago.blog.br 12 Vamos criar os estilos no App.xaml, eles valerão pra todo o App!
  13. 13. CRIADO OS ESTILOS COMUNS www.tiago.blog.br 13
  14. 14. PARTE III: CRIANDO A MAINPAGE
  15. 15. 15www.tiago.blog.br
  16. 16. 16www.tiago.blog.br
  17. 17. 17www.tiago.blog.br
  18. 18. 18www.tiago.blog.br
  19. 19. 19www.tiago.blog.br
  20. 20. PARTE IV: CRIANDO A CATEGORIA AVENTURA
  21. 21. 21www.tiago.blog.br
  22. 22. 22www.tiago.blog.br
  23. 23. 23www.tiago.blog.br
  24. 24. 24www.tiago.blog.br
  25. 25. 25www.tiago.blog.br
  26. 26. PARTE V: CRIANDO UMA PÁGINA DE DETALHES
  27. 27. 27www.tiago.blog.br
  28. 28. 28www.tiago.blog.br
  29. 29. 29www.tiago.blog.br
  30. 30. Como adicionar o trailer do YouTube? • Encontre o vídeo desejado no YouTube • Vá na opção “Compartilhar” • Entre a opção “Incorporar” • Copie o código o iframe conforme o slide anterior • Troque as aspas duplas do código do iframe por aspas simples www.tiago.blog.br 30
  31. 31. EXERCÍCIO • Adicione mais categorias de filmes ao App • Adicione mais páginas de filmes, com os respectivos dados: – Título – Diretor – Data de lançamento – Trailer www.tiago.blog.br 31
  32. 32. OBRIGADO! tiago@tiago.blog.br www.tiago.blog.br

×