Android自學曆程—RecyclerView的使用，androidrecycler

Android自學曆程—RecyclerView的使用，androidrecycler

　　在網上看見有關RecyclerView的介紹，說是ListView的進階版，官方推薦，便找來資料，耍耍。

首先掛上官方的教程，官方是最具權威和最讓人信服的第一手資料。

https://developer.android.com/training/material/lists-cards.html

• To create complex lists and cards with material design styles in your apps, you can use the RecyclerView andCardView widgets.
  • • 從這裡我們能看出是為了 建立 material design styles 的風格，所以提供了 RecyclerView and CardView widgets.
• The RecyclerView widget is a more advanced and flexible version of ListView. This widget is a container for displaying large data sets that can be scrolled very efficiently by maintaining a limited number of views. Use the RecyclerView widget when you have data collections whose elements change at runtime based on user action or network events.
  
  • • 具體的沒有太多感悟，不好亂寫，總之比 ListView更加 先進和靈活。
• The RecyclerView class simplifies the display and handling of large data sets by providing: 
  • Layout managers for positioning items
  • Default animations for common item operations, such as removal or addition of items
    • RecyclerView這個類通過如下2種方式簡化了顯示和處理大量資料集。1:Layout managers 用來管理items的顯示 2:預設的animation用來運行普通的item，例如 刪除和添加 items。
• You also have the flexibility to define custom layout managers and animations for RecyclerView widgets.
  
  • • 說實話 不懂，是指自己定義自己的Recyclerview嗎？從來沒幹過這等事。

　　說什麼都不片來的形象。

　　　　

 

　　還有源碼就不寫了，以後有空再來補補。

說完這等子事，來寫寫代碼，官方給的源碼自己看著寫，能如大概的瞭解。

　　下面是我自己寫的Demo，先下。

　　　　　　

第一次Gif圖不太會截。第一張圖是可以下拉的。

 

The activity_ main.xml Layout

就如ListView一樣我們，我們需要先建立布局。這裡的RecyclerView可以看作是容器。

　　需要我們先匯入Jar包，

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2     xmlns:tools="http://schemas.android.com/tools" 3     android:layout_width="match_parent" 4     android:layout_height="match_parent" 5     tools:context=".MainActivity"> 6  7     <android.support.v7.widget.RecyclerView 8         android:id="@+id/recyclerView" 9         android:scrollbars="vertical"10         android:layout_width="match_parent"11         android:layout_height="match_parent"12         android:background="#CCCC"/>13 14 </RelativeLayout>

Creating our data class

ColorDateItem.java

 1 package com.ryan.recyclerviewdemo01; 2  3 import android.graphics.Color; 4  5 /** 6  * Created by air on 15-8-17. 7  */ 8 public class ColorDateItem { 9     private String name;10     private int color;11 12     public ColorDateItem(String name, String color) {13         this.color = Color.parseColor((color));14         this.name = name;15     }16 17     public int getColor() {18         return color;19     }20 21     public String getName() {22         return name;23     }24 }

 

 The data layout

 這個布局是給ColorDataItem物件服務的。 就是我們我們想展示我們的資料到螢幕上的樣子。

 

 1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3     android:layout_width="match_parent" 4     android:layout_height="match_parent"> 5     <View 6         android:layout_width="match_parent" 7         android:layout_height="150dp" 8         android:id="@+id/colorBlock" 9         android:background="#CCCCCC"/>10 11     <TextView12         android:layout_width="match_parent"13         android:layout_height="wrap_content"14         android:id="@+id/colorName"15         android:text="name"16         android:textColor="@android:color/white"17         android:textSize="22dp"18         android:layout_margin="10dp"/>19 20 </RelativeLayout>

 

 

Creating the Adapter 

我們的adaper必須繼承RecyclerView，並且必須複寫3個方法。

　　onCreateViewHolder()

1     @Override2     public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {3         //create a new view4         View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout,null);5         //set the view's size , margins , padding and layout parameters6         //……7         MyViewHolder vh = new MyViewHolder(v);8         return vh;9     }

　　　　　　　　這裡 Layoutflater ， inflate還不太會用

　　

　　onBindVIewHolder()

 1     @Override 2     public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) { 3         // - get element from your dataset(資料集) at this position 4         // - replace the contents of the view with that element 5         ColorDateItem dateItem = dateItems.get(position); 6         /** casting the viewHolder to MyViewHolder so i could interface with the views */ 7         MyViewHolder myViewHolded = (MyViewHolder) holder; 8         myViewHolded.colorBlock.setBackgroundColor((dateItem.getColor())); 9         myViewHolded.colorName.setText(dateItem.getName());10     }

　　

　　getItemCount()

1     @Override2     public int getItemCount() {3         return dateItems.size();4     }

　　

　　MyViweHolder class

 

 1     /** this is our ViewHolder class */ 2     public static class MyViewHolder extends RecyclerView.ViewHolder{ 3         public TextView colorName; 4         public View colorBlock; 5  6         public MyViewHolder(View itemView) { 7             super(itemView); /** Must call super()first */ 8             colorName = (TextView) itemView.findViewById(R.id.colorName); 9             colorBlock = itemView.findViewById(R.id.colorBlock);10         }11     }

 

總體效果

　　MyAdapter.class

 

 1 package com.ryan.recyclerviewdemo01; 2  3 import android.support.v7.widget.RecyclerView; 4 import android.view.LayoutInflater; 5 import android.view.View; 6 import android.view.ViewGroup; 7 import android.widget.TextView; 8  9 import java.util.List;10 11 /**12  * Created by air on 15-8-17.13  */14 public class Myadapter extends RecyclerView.Adapter {15 16     private List<ColorDateItem> dateItems;17 18     public Myadapter(List<ColorDateItem> dateItems) {19         this.dateItems = dateItems;20     }21 22 23 24     /** this is our ViewHolder class */25     public static class MyViewHolder extends RecyclerView.ViewHolder{26         public TextView colorName;27         public View colorBlock;28 29         public MyViewHolder(View itemView) {30             super(itemView); /** Must call super()first */31             colorName = (TextView) itemView.findViewById(R.id.colorName);32             colorBlock = itemView.findViewById(R.id.colorBlock);33         }34     }35 36 37 38     //39     @Override40     public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {41         //create a new view42         View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout,null);43         //set the view's size , margins , padding and layout parameters44         //……45         MyViewHolder vh = new MyViewHolder(v);46         return vh;47     }48 49 50     //replace the contents of the view (invoked by the layout manager)51     @Override52     public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {53         // - get element from your dataset(資料集) at this position54         // - replace the contents of the view with that element55         ColorDateItem dateItem = dateItems.get(position);56         /** casting the viewHolder to MyViewHolder so i could interface with the views */57         MyViewHolder myViewHolded = (MyViewHolder) holder;58         myViewHolded.colorBlock.setBackgroundColor((dateItem.getColor()));59         myViewHolded.colorName.setText(dateItem.getName());60     }61 62 63     //return item的數量64     @Override65     public int getItemCount() {66         return dateItems.size();67     }68 }

 

The layoutManager

如之前所說，LayoutManager主要負責資料怎樣展示在螢幕上。我們還有三種選擇：LinerlayoutManager，GridLayoutManager and StaggeredGirdLayoutManager。我們也可以創造我們自己的LayoutManager如果我們需要的話。在第一個測試中，我們使用的是LingerLayout，實現方式恒簡單。

　

mLayoutManage = new LinearLayoutManager(this);        mRecyclerView.setLayoutManager(mLayoutManage);

　　　　　　　　　　　　　　　　　　　　　　

第二種LayoutManager

        mLayoutManage = new GridLayoutManager(this,2);        mRecyclerView.setLayoutManager(mLayoutManage);

　　　　　　　　　　　　　　　　　　　　　

 

HandLing item click evens

RecycleView沒有onItemClickListener，相反的是，我們需要實現onClickListener 在我們的ViewHolder。

有許多的方法實現這一步，我將會案例一個簡單的方式。

我們點擊事件，將會列印item的顏色名字

 

    public static class MyViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener{        public TextView colorName;        public View colorBlock;        public MyViewHolder(View itemView) {            super(itemView); /** Must call super()first */            colorName = (TextView) itemView.findViewById(R.id.colorName);            colorBlock = itemView.findViewById(R.id.colorBlock);            itemView.setOnClickListener(this);        }        @Override        public void onClick(View v) {            Log.d("MyViewHolder", "Item click:"+colorName.getText().toString());        }    }

 

值得注意的是 

itemView.setOnClickListener(this);

View itemView 實際上是我們的 item main layout。

 

這隻是冰上一角，RecyclerView真真強大的在於定製不同的組建，……。

人們很容易形容RecycleView作為一個更加個人化，靈活的ListView但這或與有點誤導，儘管RecyclerView允許ListView相同的功能，但他們的核心或甚至理念是不同的。