Wiki ADA

Projetos em Engenharia de Computação

Ferramentas do usuário

Ferramentas do site


android-recycler-view

Diferenças

Aqui você vê as diferenças entre duas revisões dessa página.

Link para esta página de comparações

Ambos lados da revisão anterior Revisão anterior
Próxima revisão
Revisão anterior
android-recycler-view [2019/10/04 09:58]
forfs [Configurando o Adapter e vinculando o ViewHolder a ele]
android-recycler-view [2019/10/05 09:23] (atual)
forfs
Linha 1: Linha 1:
 ====== Crie listas com RecyclerView ====== ====== Crie listas com RecyclerView ======
- 
-//Artigo em construção. Enquanto isso, você pode seguir [[https://​medium.com/​android-dev-br/​listas-com-recyclerview-d3f41e0d653c|esse artigo]].// 
  
 Em aplicativos [[Android]],​ é comum criar telas com listagens de diversas formas possíveis: horizontalmente,​ verticalmente,​ em forma de grade, entre outros exemplos. Existem casos que a quantidade de itens é **tão grande** que o aplicativo demora **vários segundos** para renderizar-los,​ causando **desconforto** no usuário. Dessa forma, entra em cena o //​**RecyclerView**//,​ componente padrão de //layout// de listagens do [[Android Studio]] para uso no desenvolvimento nativo de aplicativos [[Android]],​ o qual utiliza itens "​**recicláveis**"​ na respectiva //​[[https://​developer.android.com/​reference/​android/​view/​View|View]]//​ a ser desenvolvida. ​ Em aplicativos [[Android]],​ é comum criar telas com listagens de diversas formas possíveis: horizontalmente,​ verticalmente,​ em forma de grade, entre outros exemplos. Existem casos que a quantidade de itens é **tão grande** que o aplicativo demora **vários segundos** para renderizar-los,​ causando **desconforto** no usuário. Dessa forma, entra em cena o //​**RecyclerView**//,​ componente padrão de //layout// de listagens do [[Android Studio]] para uso no desenvolvimento nativo de aplicativos [[Android]],​ o qual utiliza itens "​**recicláveis**"​ na respectiva //​[[https://​developer.android.com/​reference/​android/​view/​View|View]]//​ a ser desenvolvida. ​
Linha 52: Linha 50:
 ===== Exemplo de implementação ===== ===== Exemplo de implementação =====
  
 +Numa situação de desenvolvimento de um aplicativo, é quase impossível não se deparar com um momento de criação de uma lista, ainda mais quando se trata de muito itens a serem mostrados na tela do usuário, como é o caso da maior parte das redes sociais. Neste exemplo, será mostrado uma situação de criação de uma lista simples, com alguns campos de texto por item.
 ==== Criando o RecyclerView dentro de sua Activity ou Fragment ==== ==== Criando o RecyclerView dentro de sua Activity ou Fragment ====
  
Linha 101: Linha 100:
 {{ :​recyclerview-example-1.png?​direct |}} {{ :​recyclerview-example-1.png?​direct |}}
  
-Para fins didáticos, excluiremos o //​TextView//​ presente no //layout// e adicionaremos o **RecyclerView** ao //layout//. Para isso, basta selecionar o componente **RecyclerView** em //Palette// e arrastar para a tela branca.+Para fins didáticos, excluiremos o //​TextView//​ presente no //layout// e adicionaremos o //**RecyclerView**// ao //layout//. Para isso, basta selecionar o componente ​//**RecyclerView**// em //Palette// e arrastar para a tela branca.
  
 {{ :​recyclerview-example-2-edit.png?​direct |}} {{ :​recyclerview-example-2-edit.png?​direct |}}
  
-Será aberto um aviso para confirmar a importação da biblioteca referente ao **RecyclerView**. Basta clicar em **OK** para continuar.+Será aberto um aviso para confirmar a importação da biblioteca referente ao //**RecyclerView**//. Basta clicar em **OK** para continuar.
  
 {{ :​recyclerview-example-3.png?​direct |}} {{ :​recyclerview-example-3.png?​direct |}}
  
-Dessa forma, o **RecyclerView** será importado ao projeto e adicionado ao seu //layout// que está conectado à sua //​Activity//​. Conectando as //​constraints//​ às laterais de sua tela branca e inserindo a //string// **recyclerViewExemplo** como //id// do **RecyclerView** adicionado, teremos como resultado a imagem abaixo.+Dessa forma, o //**RecyclerView**// será importado ao projeto e adicionado ao seu //layout// que está conectado à sua //​Activity//​. Conectando as //​constraints//​ às laterais de sua tela branca e inserindo a //string// **recyclerViewExemplo** como //id// do //**RecyclerView**// adicionado, teremos como resultado a imagem abaixo.
  
 {{ :​recyclerview-example-4.png?​direct |}} {{ :​recyclerview-example-4.png?​direct |}}
Linha 127: Linha 126:
     <​android.support.v7.widget.RecyclerView     <​android.support.v7.widget.RecyclerView
         android:​id="​@+id/​recyclerViewExemplo"​         android:​id="​@+id/​recyclerViewExemplo"​
-        android:​layout_width="​395dp+        android:​layout_width="​0dp
-        android:​layout_height="​715dp"+        android:​layout_height="​0dp"
         android:​layout_marginStart="​8dp"​         android:​layout_marginStart="​8dp"​
         android:​layout_marginTop="​8dp"​         android:​layout_marginTop="​8dp"​
Linha 142: Linha 141:
 ==== Instanciando o LayoutManager e vinculando-o ao RecyclerView ==== ==== Instanciando o LayoutManager e vinculando-o ao RecyclerView ====
  
-Nesse passo, primeiramente iremos referenciar o **RecyclerView** no código java através da classe representativa do componente e do método //​findViewById//​.+Nesse passo, primeiramente iremos referenciar o //**RecyclerView**// no código java através da classe representativa do componente e do método //​findViewById//​.
  
 <code java MainActivity.java>​ <code java MainActivity.java>​
Linha 171: Linha 170:
  
  
-Posteriormente,​ iremos instanciar o //​LayoutManager//​ configurando-o da forma que preferirmos e inserindo no **RecyclerView**. Nesse exemplo, configuraremos o //​LayoutManager//​ como sendo do tipo //​LinearLayoutManager//​ com orientação vertical.+Posteriormente,​ iremos instanciar o //​LayoutManager//​ configurando-o da forma que preferirmos e inserindo no //**RecyclerView**//. Nesse exemplo, configuraremos o //​LayoutManager//​ como sendo do tipo //​LinearLayoutManager//​ com orientação vertical.
  
 <code java MainActivity.java>​ <code java MainActivity.java>​
Linha 224: Linha 223:
 **Lembre-se**:​ o //layout// mais **externo** deve ter o atributo //​layout_height//​ com o valor **//​wrap_content//​**. Caso não seja feita essa verificação,​ há possibilidade dos itens possuírem um tamanho muito grande para o tamanho da tela. **Lembre-se**:​ o //layout// mais **externo** deve ter o atributo //​layout_height//​ com o valor **//​wrap_content//​**. Caso não seja feita essa verificação,​ há possibilidade dos itens possuírem um tamanho muito grande para o tamanho da tela.
  
-**Dica**: utilizar //​LinearLayout//​ ao invés de //​ConstraintLayout//​ traz resultados melhores nessa parte da configuração do **RecyclerView**,​ mas, por questões didáticas, será mantido o uso do segundo.+**Dica**: utilizar //​LinearLayout//​ ao invés de //​ConstraintLayout//​ traz resultados melhores nessa parte da configuração do //**RecyclerView**//, mas, como dito, por questões didáticas, será mantido o uso do segundo.
  
 {{ ::​recyclerview-example-7.png?​direct |}} {{ ::​recyclerview-example-7.png?​direct |}}
Linha 256: Linha 255:
         android:​layout_marginStart="​32dp"​         android:​layout_marginStart="​32dp"​
         android:​layout_marginTop="​8dp"​         android:​layout_marginTop="​8dp"​
 +        android:​layout_marginEnd="​8dp"​
         android:​layout_marginBottom="​8dp"​         android:​layout_marginBottom="​8dp"​
         android:​text="​Descrição"​         android:​text="​Descrição"​
-        android:​textSize="​24sp"+        android:​textSize="​18sp"
         app:​layout_constraintBottom_toBottomOf="​parent"​         app:​layout_constraintBottom_toBottomOf="​parent"​
 +        app:​layout_constraintEnd_toStartOf="​@+id/​textData"​
 +        app:​layout_constraintHorizontal_bias="​0.0"​
         app:​layout_constraintStart_toStartOf="​parent"​         app:​layout_constraintStart_toStartOf="​parent"​
         app:​layout_constraintTop_toBottomOf="​@+id/​textNumeroItem"​ />         app:​layout_constraintTop_toBottomOf="​@+id/​textNumeroItem"​ />
Linha 267: Linha 269:
         android:​layout_width="​wrap_content"​         android:​layout_width="​wrap_content"​
         android:​layout_height="​wrap_content"​         android:​layout_height="​wrap_content"​
 +        android:​layout_marginTop="​8dp"​
         android:​layout_marginEnd="​32dp"​         android:​layout_marginEnd="​32dp"​
         android:​text="​dia/​mês/​ano"​         android:​text="​dia/​mês/​ano"​
         app:​layout_constraintEnd_toEndOf="​parent"​         app:​layout_constraintEnd_toEndOf="​parent"​
-        app:layout_constraintTop_toBottomOf="@+id/​textNumeroItem" />+        app:layout_constraintTop_toTopOf="parent" />
 </​android.support.constraint.ConstraintLayout>​ </​android.support.constraint.ConstraintLayout>​
  
Linha 372: Linha 375:
 Primeiramente,​ vá até **java** > **nome.do.seu.pacote**,​ clique com o botão direito, vá até **New** > **Java Class**. Primeiramente,​ vá até **java** > **nome.do.seu.pacote**,​ clique com o botão direito, vá até **New** > **Java Class**.
  
 +{{ :​recyclerview-example-11.png?​direct |}}
  
 +No nome da classe, coloque o nome //​AdapterExemplo//​ e clique em **OK**.
 +
 +{{ :​recyclerview-example-12.png?​direct |}}
 +
 +O código estará assim no momento que a classe for criada.
 +
 +<code java AdapterExemplo.java>​
 +
 +package com.exemplo.recyclerview;​
 +
 +public class AdapterExemplo {
 +
 +
 +}
 +
 +</​code>​
 +
 +Agora, é necessário herdar de //​RecyclerView.Adapter<​ViewHolder>//​. Não esqueça de utilizar a sua classe //​ViewHolder//​ criada anteriormente. Neste exemplo, trata-se da //​MyViewHolder//​.
 +
 +<code java AdapterExemplo.java>​
 +
 +package com.exemplo.recyclerview;​
 +
 +import android.support.v7.widget.RecyclerView;​
 +
 +public class AdapterExemplo extends RecyclerView.Adapter<​MyViewHolder>​ {
 +
 +
 +}
 +
 +</​code>​
 +
 +Nesse momento, pode-se reparar que a declaração da classe está grifada em vermelho pelo próprio [[Android Studio]]. Isso ocorre porque é obrigatória a declaração dos métodos //​onCreateViewHolder//,​ //​onBindViewHolder//​ e //​getItemCount//​. Para isso, basta clicar uma vez em cima da declaração da classe, esperar a lâmpada vermelha aparecer, clicar nela e escolher a opção //​**Implement methods**//​.
 +
 +{{ :​recyclerview-example-13.png?​direct |}}
 +
 +Após isso, apenas selecione **OK**. Os métodos serão implementados automaticamente.
 +
 +{{ :​recyclerview-example-14.png?​direct |}}
 +
 +Após isso, a classe estará dessa maneira.
 +
 +<code java AdapterExemplo.java>​
 +
 +package com.exemplo.recyclerview;​
 +
 +import android.support.annotation.NonNull;​
 +import android.support.v7.widget.RecyclerView;​
 +import android.view.ViewGroup;​
 +
 +public class AdapterExemplo extends RecyclerView.Adapter<​MyViewHolder>​ {
 +
 +
 +    @NonNull
 +    @Override
 +    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
 +        return null;
 +    }
 +
 +    @Override
 +    public void onBindViewHolder(@NonNull MyViewHolder myViewHolder,​ int i) {
 +
 +    }
 +
 +    @Override
 +    public int getItemCount() {
 +        return 0;
 +    }
 +}
 +
 +</​code>​
 +
 +Para continuar a configuração do //​Adapter//,​ precisamos criar uma classe que represente cada item da lista a ser apresentada ao usuário. Neste exemplo, será criada uma classe generalista,​ sem motivações específicas. No entanto, numa aplicação real, poderia ser uma classe sobre produtos, usuários, ofertas, etc. Para isso, vá novamente em **java** > **nome.do.seu.pacote**,​ clique com o botão direito, vá até **New** > **Java Class**. Aqui, o nome da classe será somente //Item//.
 +
 +Após isso, serão adicionadas três //strings// representando o conteúdo presente em cada //​TextView//​ criado no //layout// exemplo construído anteriormente. Caso você possua imagens, você pode guardar o valor de seu //id// numa variável do tipo //int// ou a //url// dela numa variável do tipo //string// ou mesmo do tipo //​[[https://​developer.android.com/​reference/​java/​net/​URI|Uri]]//​.
 +
 +O código resultante, para este exemplo, está representado abaixo. Repare que já foram adicionados os //getters// e os //​setters//,​ além de seu construtor.
 +
 +<code java Item.java>​
 +
 +package com.exemplo.recyclerview;​
 +
 +public class Item {
 +
 +    private String textNumeroItem;​
 +    private String textDescricaoItem;​
 +    private String textData;
 +
 +    public Item(String textNumeroItem,​ String textDescricaoItem,​ String textData) {
 +        this.textNumeroItem = textNumeroItem;​
 +        this.textDescricaoItem = textDescricaoItem;​
 +        this.textData = textData;
 +    }
 +
 +    public String getTextNumeroItem() {
 +        return textNumeroItem;​
 +    }
 +
 +    public void setTextNumeroItem(String textNumeroItem) {
 +        this.textNumeroItem = textNumeroItem;​
 +    }
 +
 +    public String getTextDescricaoItem() {
 +        return textDescricaoItem;​
 +    }
 +
 +    public void setTextDescricaoItem(String textDescricaoItem) {
 +        this.textDescricaoItem = textDescricaoItem;​
 +    }
 +
 +    public String getTextData() {
 +        return textData;
 +    }
 +
 +    public void setTextData(String textData) {
 +        this.textData = textData;
 +    }
 +}
 +
 +</​code>​
 +
 +Após criar a classe base para cada item da lista, voltaremos ao //Adapter// e criaremos como atributo dentro dele uma lista de //Item//, além de um construtor que recebe como atributo também uma lista de //Item//. O construtor, nesse caso, serve para que, durante a configuração do //​**RecyclerView**//,​ o //Adapter// saiba quais itens serão apresentados na tela do aplicativo.
 +
 +<code java AdapterExemplo.java>​
 +
 +package com.exemplo.recyclerview;​
 +
 +import android.support.annotation.NonNull;​
 +import android.support.v7.widget.RecyclerView;​
 +import android.view.ViewGroup;​
 +
 +import java.util.List;​
 +
 +public class AdapterExemplo extends RecyclerView.Adapter<​MyViewHolder>​ {
 +
 +    private List<​Item>​ listaItens;
 +
 +    public AdapterExemplo(List<​Item>​ listaItens) {
 +        this.listaItens = listaItens;
 +    }
 +
 +    @NonNull
 +    @Override
 +    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
 +        return null;
 +    }
 +
 +    @Override
 +    public void onBindViewHolder(@NonNull MyViewHolder myViewHolder,​ int i) {
 +
 +    }
 +
 +    @Override
 +    public int getItemCount() {
 +        return 0;
 +    }
 +}
 +
 +</​code>​
 +
 +O primeiro método que podemos configurar é o //​getItemCount//,​ que retornará ao //​**RecyclerView**//​ o número de itens da lista a ser apresentada. No nosso exemplo, será justamente o tamanho da lista que o //Adapter// possui como atributo.
 +
 +<code java AdapterExemplo.java>​
 +
 +package com.exemplo.recyclerview;​
 +
 +import android.support.annotation.NonNull;​
 +import android.support.v7.widget.RecyclerView;​
 +import android.view.ViewGroup;​
 +
 +import java.util.List;​
 +
 +public class AdapterExemplo extends RecyclerView.Adapter<​MyViewHolder>​ {
 +
 +    private List<​Item>​ listaItens;
 +
 +    public AdapterExemplo(List<​Item>​ listaItens) {
 +        this.listaItens = listaItens;
 +    }
 +
 +    @NonNull
 +    @Override
 +    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
 +        return null;
 +    }
 +
 +    @Override
 +    public void onBindViewHolder(@NonNull MyViewHolder myViewHolder,​ int i) {
 +
 +    }
 +
 +    @Override
 +    public int getItemCount() {
 +        return listaItens.size();​
 +    }
 +}
 +
 +</​code>​
 +
 +O próximo método a ser configurado é o //​onCreateViewHolder//,​ que deverá inflar (leia-se criar e apresentar ao usuário) a //View// referente a cada item da lista e retornar ao //​ViewHolder//,​ para que este possa referenciar cada componente de //layout// daquele e configurar conforme o conteúdo de cada objeto presente na lista //​listaItens//​.
 +
 +<code java AdapterExemplo.java>​
 +
 +package com.exemplo.recyclerview;​
 +
 +import android.support.annotation.NonNull;​
 +import android.support.v7.widget.RecyclerView;​
 +import android.view.LayoutInflater;​
 +import android.view.View;​
 +import android.view.ViewGroup;​
 +
 +import java.util.List;​
 +
 +public class AdapterExemplo extends RecyclerView.Adapter<​MyViewHolder>​ {
 +
 +    private List<​Item>​ listaItens;
 +
 +    public AdapterExemplo(List<​Item>​ listaItens) {
 +        this.listaItens = listaItens;
 +    }
 +
 +    @NonNull
 +    @Override
 +    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
 +
 +        View view = LayoutInflater.from(viewGroup.getContext())
 +                .inflate(R.layout.adapter_itens,​ viewGroup, false);
 +
 +        return new MyViewHolder(view);​
 +    }
 +
 +    @Override
 +    public void onBindViewHolder(@NonNull MyViewHolder myViewHolder,​ int i) {
 +
 +    }
 +
 +    @Override
 +    public int getItemCount() {
 +        return listaItens.size();​
 +    }
 +}
 +
 +</​code>​
 +
 +Apesar de parecer bruxaria, é possível explicar o código surgido das trevas dentro do método. A ideia é **inflar** a //View// usando a classe //​[[https://​developer.android.com/​reference/​android/​view/​LayoutInflater|LayoutInflater]]//,​ dentro de um //​[[https://​developer.android.com/​reference/​android/​content/​Context|Context]]//​ o qual ele deve aparecer. Depois de dito onde deve ser inflado, deve-se indicar **qual é a fonte** que "​alimentará"​ a //View//, que é justamente o //layout// que foi criado anteriormente (e indicado pelo seu //id//, //​R.layout.adapter_itens//​). O atributo do tipo //​[[https://​developer.android.com/​reference/​android/​view/​ViewGroup|ViewGroup]]//​ é algo como um **//​container//​ de objetos** do tipo //View//, o qual servirá de base para apresentar todas as //View// na tela do usuário. Por fim, o último atributo booleano com valor //false// indica que a hierarquia inflada **não será vinculada** ao parâmetro raiz.
 +
 +**Obs**: a classe //Context// diz **qual é o contexto** no momento da execução de seu aplicativo, e esse contexto muda a **cada vez que é mudada a //​Activity//​ atual**. Uma forma fácil, porém incorreta, de entender esse conceito é pensar que cada //​Activity//​ possui seu //​Context//,​ então se caso precisamos utilizar o //Context// atual para algo, devemos entender que o código deseja entender em qual //​Activity//​ estamos. Esse pensamento só é incorreto porque a classe //​Activity//,​ na verdade, herda da classe //​Context//​.
 +
 +Finalmente, o último passo para a configuração do //Adapter// é implementar o método //​onBindViewHolder//​. Esse método deverá encontrar qual é o item correspondente a ser ligado à lista visível ao usuário e referenciar cada conteúdo do objeto a cada componente de //layout// presente na //View//.
 +
 +<code java AdapterExemplo.java>​
 +
 +package com.exemplo.recyclerview;​
 +
 +import android.support.annotation.NonNull;​
 +import android.support.v7.widget.RecyclerView;​
 +import android.view.LayoutInflater;​
 +import android.view.View;​
 +import android.view.ViewGroup;​
 +
 +import java.util.List;​
 +
 +public class AdapterExemplo extends RecyclerView.Adapter<​MyViewHolder>​ {
 +
 +    private List<​Item>​ listaItens;
 +
 +    public AdapterExemplo(List<​Item>​ listaItens) {
 +        this.listaItens = listaItens;
 +    }
 +
 +    @NonNull
 +    @Override
 +    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
 +
 +        View view = LayoutInflater.from(viewGroup.getContext())
 +                .inflate(R.layout.adapter_itens,​ viewGroup, false);
 +
 +        return new MyViewHolder(view);​
 +    }
 +
 +    @Override
 +    public void onBindViewHolder(@NonNull MyViewHolder myViewHolder,​ int i) {
 +
 +        Item item = listaItens.get(i);​
 +        ​
 +        myViewHolder.textNumeroItem.setText(item.getTextNumeroItem());​
 +        myViewHolder.textDescricaoItem.setText(item.getTextDescricaoItem());​
 +        myViewHolder.textData.setText(item.getTextData());​
 +        ​
 +    }
 +
 +    @Override
 +    public int getItemCount() {
 +        return listaItens.size();​
 +    }
 +}
 +
 +</​code>​
 +
 +Aqui, espera-se que não haja alguma feitiçaria dentro do método. É possível existir, mas fica por conta e risco do programador.
 ==== Concluindo a configuração do RecyclerView e teste ==== ==== Concluindo a configuração do RecyclerView e teste ====
  
 +Neste momento, as classes //Adapter// e //​ViewHolder//​ estão configuradas. Agora, precisaremos voltar para a //​Activity//​ principal de nosso projeto e configurar, finalmente, o tão amado //​**RecyclerView**//​. Primeiramente,​ será preciso de um banco de dados de itens para serem apresentados na lista. Numa aplicação real, essa lista será obtida através de um banco de dados na nuvem ou baixados através de uma API presente num servidor da aplicação. Como aqui se trata de um exemplo, será criado um banco de dados //​hardcoded//​.
  
 +<code java MainActivity.java>​
  
-<code java perae.java>+package com.exemplo.recyclerview;​
  
-public class Perae {+import android.support.v7.app.AppCompatActivity;​ 
 +import android.os.Bundle;​ 
 +import android.support.v7.widget.LinearLayoutManager;​ 
 +import android.support.v7.widget.RecyclerView;​
  
-    String message+import java.util.ArrayList; 
-     +import java.util.List;​ 
-    ​public Perae(){ + 
-        ​this.message ​"perae mano, jaja artigo fica pronto"​;+public class MainActivity extends AppCompatActivity { 
 + 
 +    ​//Variável global para referenciar o RecyclerView da interface 
 +    ​private RecyclerView recyclerViewExemplo;​ 
 + 
 +    //Lista de itens a serem apresentadas na lista 
 +    private List<​Item>​ listaItens = new ArrayList<>​(); 
 + 
 +    @Override 
 +    protected void onCreate(Bundle savedInstanceState) { 
 +        ​super.onCreate(savedInstanceState);​ 
 +        setContentView(R.layout.activity_main);​ 
 + 
 +        //​Conectando a classe representativa com o componente de layout 
 +        recyclerViewExemplo ​findViewById(R.id.recyclerViewExemplo);​ 
 + 
 +        //​Configurando ​LayoutManager e inserindo a configuração em nosso RecyclerView 
 +        RecyclerView.LayoutManager layoutManager = new LinearLayoutManager( 
 +                this, 
 +                LinearLayoutManager.VERTICAL,​ 
 +                false 
 +        ); 
 +        recyclerViewExemplo.setLayoutManager(layoutManager);​ 
 +         
 +        criarItens();
     }     }
-    ​ + 
-    ​public ​void aprenderRecyclerView(){ +    ​//Criando base de dados 
-        ​System.out.println(this.message);+    private ​void criarItens(){ 
 +        ​Item item; 
 + 
 +        item = new Item( 
 +                "​1",​ 
 +                "​Potato são potatos.", 
 +                "​04/​10/​2019"​ 
 +        ); 
 +        listaItens.add(item); 
 + 
 +        item = new Item( 
 +                "​2",​ 
 +                "​Talvez potatos sejam diferentes.", 
 +                "​05/​04/​2019"​ 
 +        ); 
 +        listaItens.add(item);​ 
 + 
 +        item = new Item( 
 +                "​3",​ 
 +                "Você disse potato?",​ 
 +                "​15/​06/​2019"​ 
 +        ); 
 +        listaItens.add(item);​ 
 + 
 +        item = new Item( 
 +                "​4",​ 
 +                "Adoro dizer potatos.",​ 
 +                "​08/​01/​2019"​ 
 +        ); 
 +        listaItens.add(item);
     }     }
  
Linha 394: Linha 756:
  
 </​code>​ </​code>​
 +
 +Agora, devemos instanciar um objeto do tipo //​AdapterExemplo//​ que criamos na seção anterior, inserindo como atributo de seu construtor a lista //​listaItens//​. Após a instanciação,​ podemos vincular o //Adapter// ao nosso //​**RecyclerView**//​.
 +
 +<code java MainActivity.java>​
 +
 +package com.exemplo.recyclerview;​
 +
 +import android.support.v7.app.AppCompatActivity;​
 +import android.os.Bundle;​
 +import android.support.v7.widget.LinearLayoutManager;​
 +import android.support.v7.widget.RecyclerView;​
 +
 +import java.util.ArrayList;​
 +import java.util.List;​
 +
 +public class MainActivity extends AppCompatActivity {
 +
 +    //Variável global para referenciar o RecyclerView da interface
 +    private RecyclerView recyclerViewExemplo;​
 +
 +    //Lista de itens a serem apresentadas na lista
 +    private List<​Item>​ listaItens = new ArrayList<>​();​
 +
 +    //Adapter a ser utilizado no RecyclerView
 +    private AdapterExemplo adapterExemplo;​
 +
 +    @Override
 +    protected void onCreate(Bundle savedInstanceState) {
 +        super.onCreate(savedInstanceState);​
 +        setContentView(R.layout.activity_main);​
 +
 +        //​Conectando a classe representativa com o componente de layout
 +        recyclerViewExemplo = findViewById(R.id.recyclerViewExemplo);​
 +
 +        //​Configurando o LayoutManager e inserindo a configuração em nosso RecyclerView
 +        RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(
 +                this,
 +                LinearLayoutManager.VERTICAL,​
 +                false
 +        );
 +        recyclerViewExemplo.setLayoutManager(layoutManager);​
 +
 +        criarItens();​
 +
 +        //​Instanciando o Adapter e vinculando-o ao RecyclerView
 +        adapterExemplo = new AdapterExemplo(listaItens);​
 +        recyclerViewExemplo.setAdapter(adapterExemplo);​
 +    }
 +
 +    //Criando base de dados
 +    private void criarItens(){
 +        Item item;
 +
 +        item = new Item(
 +                "​1",​
 +                "​Potato são potatos.",​
 +                "​04/​10/​2019"​
 +        );
 +        listaItens.add(item);​
 +
 +        item = new Item(
 +                "​2",​
 +                "​Talvez potatos sejam diferentes.",​
 +                "​05/​04/​2019"​
 +        );
 +        listaItens.add(item);​
 +
 +        item = new Item(
 +                "​3",​
 +                "Você disse potato?",​
 +                "​15/​06/​2019"​
 +        );
 +        listaItens.add(item);​
 +
 +        item = new Item(
 +                "​4",​
 +                "Adoro dizer potatos.",​
 +                "​08/​01/​2019"​
 +        );
 +        listaItens.add(item);​
 +    }
 +
 +}
 +
 +</​code>​
 +
 +Ao executar o aplicativo, podemos ver o resultado de toda a configuração realizada.
 +
 +{{ :​recyclerview-example-15.png?​direct |}}
 +
 +Pode-se adicionar mais itens até que seja necessário rolar a lista para baixo. **Não importa** a quantidade de itens que seja colocado, mesmo sendo **10**, **100** ou **1000**: o aplicativo executará **sem travamentos**.
 +
 +{{ :​recyclerview-example-16.png?​direct |}}
 +
 +----
 +
 +===== Complementos =====
 +
 +==== Evento de clique ====
 +
 +Além da configuração de um //​**RecyclerView**//​ para mostrar itens na tela do usuário, pode-se também configurar eventos de clique em cada item da lista. Isso é muito útil para aplicativos de redes sociais, //​marketplaces//,​ entre vários outros exemplos.
 +
 +Para isso, deve-se primeiro incluir essa classe dentro de seu projeto.
 +
 +<code java RecyclerItemClickListener.java>​
 +
 +package com.exemplo.recyclerview;​
 +
 +import android.content.Context;​
 +import android.support.v7.widget.RecyclerView;​
 +import android.view.GestureDetector;​
 +import android.view.MotionEvent;​
 +import android.view.View;​
 +import android.widget.AdapterView;​
 +
 +/**
 + * Created by Jamilton on 01/11/2017.
 + * RecyclerView não possui o método OnItemClickListener para identificar o clique do item.
 + * Você precisa escrever sua própria classe que se estende RecyclerView.OnItemTouchListener.
 + */
 +
 +public class RecyclerItemClickListener implements RecyclerView.OnItemTouchListener {
 +
 +    private OnItemClickListener mListener;
 +    GestureDetector mGestureDetector;​
 +
 +    @Override
 +    public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {
 +        View childView = rv.findChildViewUnder(e.getX(),​ e.getY());
 +        if (childView != null && mListener != null && mGestureDetector.onTouchEvent(e)) {
 +            mListener.onItemClick(childView,​ rv.getChildAdapterPosition(childView));​
 +            return true;
 +        }
 +        return false;
 +    }
 +
 +    @Override
 +    public void onTouchEvent(RecyclerView rv, MotionEvent e) {
 +
 +    }
 +
 +    @Override
 +    public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {
 +
 +    }
 +
 +    public interface OnItemClickListener extends AdapterView.OnItemClickListener {
 +        public void onItemClick(View view, int position);
 +
 +        public void onLongItemClick(View view, int position);
 +    }
 +
 +    public RecyclerItemClickListener(Context context, final RecyclerView recyclerView,​ OnItemClickListener listener) {
 +        mListener = listener;
 +        mGestureDetector = new GestureDetector(context,​ new GestureDetector.SimpleOnGestureListener() {
 +            @Override
 +            public boolean onSingleTapUp(MotionEvent e) {
 +                return true;
 +            }
 +
 +            @Override
 +            public void onLongPress(MotionEvent e) {
 +                View child = recyclerView.findChildViewUnder(e.getX(),​ e.getY());
 +                if (child != null && mListener != null) {
 +                    mListener.onLongItemClick(child,​ recyclerView.getChildAdapterPosition(child));​
 +                }
 +            }
 +        });
 +
 +    }
 +}
 +
 +</​code>​
 +
 +Após isso, dentro de sua //​Activity//,​ configure o //​**RecyclerView**//​ com o pedaço de código abaixo.
 +
 +<code java>
 +
 +recyclerViewExemplo.addOnItemTouchListener(new RecyclerItemClickListener(
 +                this,
 +                recyclerViewExemplo,​
 +                new RecyclerItemClickListener.OnItemClickListener() {
 +                    @Override
 +                    public void onItemClick(View view, int position) {
 +                        Item item = listaItens.get(position);​
 +                        Toast.makeText(
 +                                MainActivity.this, ​
 +                                "Você clicou no item número " + item.getTextNumeroItem(),​
 +                                Toast.LENGTH_SHORT
 +                        ).show();
 +                    }
 +
 +                    @Override
 +                    public void onLongItemClick(View view, int position) {
 +
 +                    }
 +
 +                    @Override
 +                    public void onItemClick(AdapterView<?>​ parent, View view, int position, long id) {
 +
 +                    }
 +                }
 +        ));
 +
 +</​code>​
 +
 +Após essa configuração,​ a cada vez que clicar em um item da lista, será mostrado uma mensagem com o atributo "​número"​ do item.
 +
 +==== Animações ====
 +
 +É possível criar animações no momento que cada item da lista é carregado na tela do usuário. Você pode implementar isso [[https://​medium.com/​better-programming/​android-recyclerview-with-beautiful-animations-5e9b34dbb0fa|seguindo esse tutorial]].
 +
 +==== Exemplos ====
 +
 +  * Um //chat// entre duas pessoas pode (e deve) ser implementado utilizando um //​**RecyclerView**//​. A ideia é que, no método //​onCreateViewHolder//,​ seja feito uma verificação e decidido se o balão será referente ao usuário que utiliza o aplicativo (balão verde) ou ao outro usuário (balão branco), mudando o //layout// base em cada situação.
 +
 +{{ :​recyclerview-example-17.png?​direct |}}
 +
 +  * Um aplicativo de gerenciamento de despesas **tem obrigação** de ter um histórico de gastos. Um exemplo disso é o aplicativo [[https://​www.organizze.com.br/​|Organizze]],​ que consegue mostrar de forma clara todos os seus gastos. Ao desenvolver um aplicativo semelhante que necessita desse histórico, o uso do //​**RecyclerView**//​ é uma boa opção.
 +
 +{{ :​recyclerview-example-18.png?​direct |}}
  
 ---- ----
 ===== Referências externas ===== ===== Referências externas =====
  
 +Você pode acessar o código completo do exemplo desenvolvido aqui no [[https://​github.com/​ADA-EC/​Wiki|repositório da ADA]] no GitHub. Outros //links// utilizados como base de desenvolvimento desse artigo estão elencados abaixo.
 +
 +  * [[https://​www.udemy.com/​course/​curso-de-desenvolvimento-android-oreo/​|Udemy | Desenvolvimento Android Completo - Aprenda a criar 18 Apps]]
 +  * [[https://​medium.com/​better-programming/​android-recyclerview-with-beautiful-animations-5e9b34dbb0fa|Medium | Android RecyclerView with beautiful animations]]
   * [[https://​developer.android.com/​reference/​androidx/​recyclerview/​widget/​RecyclerView.html|Android Developers | RecyclerView documentation]]   * [[https://​developer.android.com/​reference/​androidx/​recyclerview/​widget/​RecyclerView.html|Android Developers | RecyclerView documentation]]
   * [[https://​developer.android.com/​guide/​topics/​ui/​layout/​recyclerview|Android Developers | Create a List with RecyclerView]]   * [[https://​developer.android.com/​guide/​topics/​ui/​layout/​recyclerview|Android Developers | Create a List with RecyclerView]]
-  * [[https://www.udemy.com/course/curso-de-desenvolvimento-android-oreo/|Udemy Desenvolvimento ​Android ​Completo - Aprenda a criar 18 Apps]]+  * [[https://developer.android.com/reference/android/support/​v7/​widget/​RecyclerView.LayoutManager|Android Developers | RecyclerView.LayoutManager]] 
 +  * [[https://​developer.android.com/​reference/​android/​widget/​Adapter|Android ​Developers | RecyclerView.Adapter]] 
 +  * [[https://​developer.android.com/​reference/​android/​support/​v7/​widget/​RecyclerView.ViewHolder|Android Developers | RecyclerView.ViewHolder]] 
 +  * [[https://​developer.android.com/​reference/​android/​view/​ViewGroup|Android Developers | ViewGroup]] 
 +  * [[https://​developer.android.com/​reference/​android/​view/​View|Android Developers | View]] 
 +  * [[https://​developer.android.com/​reference/​android/​support/​v7/​widget/​LinearLayoutManager|Android Developers | LinearLayoutManager]] 
 +  * [[https://​developer.android.com/​reference/​android/​support/​v7/​widget/​GridLayoutManager|Android Developers | GridLayoutManager]] 
 +  * [[https://​developer.android.com/​reference/​android/​support/​v7/​widget/​StaggeredGridLayoutManager|Android Developers | StaggeredGridLayoutManager]] 
 +  * [[https://​developer.android.com/​reference/​android/​view/​LayoutInflater|Android Developers | LayoutInflater]] 
 +  * [[https://​developer.android.com/​reference/​android/​content/​Context|Android Developers | Context]] 
 +  * [[https://​developer.android.com/​reference/​java/​net/​URI|Android Developers | URI]]
android-recycler-view.1570193919.txt.gz · Última modificação: 2019/10/04 09:58 por forfs