Projeto Avançado de Software II 6 – Popular Movies APP Eduardo de Lucena Falcão.

Apresentação em tema: "Projeto Avançado de Software II 6 – Popular Movies APP Eduardo de Lucena Falcão."— Transcrição da apresentação:

1 Projeto Avançado de Software II 6 – Popular Movies APP Eduardo de Lucena Falcão

2 Popular Movies APP You app will: – Present the user with a grid arrangement of movie posters upon launch. – Allow your user to change sort order via a setting: The sort order can be by most popular or by highest-rated – Allow the user to tap on a movie poster and transition to a details screen with additional information such as: original title movie poster image thumbnail A plot synopsis (called overview in the api) user rating (called vote_average in the api) release date 2

3 3

4 Passo 1 Criar a tela inicial: – Activitity que contém um fragment, e carrega um GridLayout O que precisaremos aprender? – Criar um novo adapter para atualizar a GridView com as imagens; Não existe um que satisfaça as nossas necessidades (como por exemplo o ArrayAdapter resolve para exibir uma lista de Strings) 4

5 Passo 1 1.Criar o layout activity_main.xml para MainActivity e carregar em AppCompatActivity (onCreate) 1.Estrutura: LinearLayout que contém um toolbar e faz referência a um fragment 2.Criar o layout do fragment, content_main.xml, e carregá-lo na MainActivity (pode ser via include no xml) 3.Criar o layout, fragment_main.xml, que contém o GridView 4.Criar um MainActivity que estende AppCompatActivity 5.Criar a classe MainActivityFragment que estende Fragment 5

6 Gabarito 6 1 - activity_main.xml 2 - content_main.xml

7 Gabarito 7 3 - fragment_main.xml 4 – MainActivity.java

8 Gabarito 8 4 – MainActivityFragment.java

9 Gabarito 9

10 Passo 2 – Criando um Adapter para o GridView Como carregar as imagens no GridView? Não existe uma classe Adapter para o GridView de modo que possamos carregar imagens. Devemos criar nosso próprio Adapter. Primeiro vamos criar um Adapter que carregue imagens na GridView. 1.Criar uma classe ImageAdapter que estende BaseAdapter 10

11 Criando a classe ImageAdapter 1.Criar uma classe ImageAdapter que estende BaseAdapter 1.Essa classe deve conter um array de inteiros para representar as imagens a serem exibidas 1.Todo resource é representado programaticamente através de um inteiro na classe R. Por isso, para representarmos um array de imagens, criamos um array de inteiros; 2.BaseAdapter é abstrata, logo devemos fornecer as implementações dos métodos abstratos; 11

12 12 Criando a classe ImageAdapter 1.Criar uma classe ImageAdapter que estende BaseAdapter 3.O construtor deve recebe o contexto (onde o gridview será inflado) e o array de inteiros representando as imagens; 4.Por último, fornecemos a implementação para getView 1.Devido ao esquema de reaproveitamento de Views que discutimos na lição 1, devemos fornecer uma implementação que reutilize objetos View, ao invés de sempre criar um novo

13 13 Testando ImageAdapter Nosso ImageAdapter está pronto. Adicionemos algumas imagens (http://developer.android.com/shareables/sample_images.zip) na pasta drawable e testemos no main se o nosso adapter está funcionando bem. Para isso, precisamos criar no nosso fragment um adapter e fazer o binding dele com a GridView (layout) e com os dados.

14 Melhorando nosso design Para fins de organização, seria interessante termos um layout (grid_item_movie.xml) para definir os atributos do ImageView. Do mesmo modo que fizemos no curso Udacity, criamos um layout só para armazenar um textView. É preciso alterar o adapter para ele inflar a partir deste xml. 14

15 Passo 3 – Usando o Picasso para carregar Imagens da Web 15

16 Passo 3 – Usando o Picasso para carregar Imagens da Web 16 1.Mudar de array de inteiros para array de Strings que guardarão as urls das imagens. 2.Utilizar o Picasso para carregar a imagem da Web a partir do método getView.

17 Passo 3 – Usando o Picasso para carregar Imagens da Web 17 3.Mudar o conteúdo do array para urls de imagens. 4.Adicionar a permissão de acesso a internet

18 18

19 Passo 4 – Criando a tela de configurações Os filmes exibidos na tela principal podem ser buscados pelo grau de popularidade ou pelo grau de avaliação. Devemos incluir isto numa tela de preferências. 1.Criar um layout de menu (menu_main.xml) que conterá a opção para nos levar à tela de preferências 2.Sobrescrever onCreateOptionsMenu, para inflar o botão de configurações 3.Sobrescrever onOptionsItemSelected e adicionar um intent que nos leva à classe SettingsActivity, ou seja, nos leva à tela de preferências. 19

20 Passo 4 – Criando a tela de configurações 4.Criar uma PreferenceScreen (pref_general.xml) para a tela de preferências, que contem uma ListPreference 5.Criar uma classe chamada SettingsActivity que estende de PreferenceActivity 6.Criar uma classe chamada SettingsFragment que estende de PreferenceFragment 20

21 Passo 5 – Usando a API MovieDB Criar AsyncTasks responsáveis por buscar a lista de filmes, seja pelo grau de popularidade ou pelo grau de avaliação. 21

22 Passos 4 e 5 serão descritos em um outro slide. 22