在Android設備上使用RecyclerView和CardView組合

原文：https://code.tutsplus.com/zh-...
原做：Ashraff Hathibelagal
翻譯：做繭自縛

若是您有興趣構建一個利用列表顯示數據的Android應用程序，Android Lollipop具備兩個新的輕鬆構建該類應用的小部件：RecyclerView和CardView。 使用這些小部件，很容易讓您的應用程序的外觀和感受符合Google材料設計規範中說起的準則。

前提條件

構建這樣的程序，您應該使用最新版本的Android Studio。 你能夠從 Android 開發者網站得到。

1)支持舊版本

在寫做的時候，小於 2%的 Android 設備運行 Android Lollipop系統。 然而，幸好v7 支持庫(Support Library)，您能夠在運行舊版本Android的設備上使用RecyclerView和CardView小部件，方法是將如下代碼添加到項目build.grade文件中的依賴項(dependencies)部分：

compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'

2.建立CardView

CardView 是一個ViewGroup。像任何其餘ViewGroup同樣，它可使用佈局XML文件添加到您的Activity或Fragment中。

要建立一個空的CardView，您必須將如下代碼添加到佈局XML中，以下代碼片斷所示：

<android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
 
</android.support.v7.widget.CardView>

做爲一個更真實的例子，讓咱們如今建立一個LinearLayout並在其中放置一個CardView。 例如，CardView能夠表明一我的，包含如下內容：

• 一個TextView顯示的人的名字

• 一個TextView顯示該人的年齡

• 一個ImageView 來顯示人的照片

XML會是下面這樣子

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:padding="16dp"
    >
 
    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/cv"
        >
 
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            >
 
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/person_photo"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginRight="16dp"
                />
 
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/person_name"
                android:layout_toRightOf="@+id/person_photo"
                android:layout_alignParentTop="true"
                android:textSize="30sp"
                />
 
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/person_age"
                android:layout_toRightOf="@+id/person_photo"
                android:layout_below="@+id/person_name"
                />
 
        </RelativeLayout>
 
    </android.support.v7.widget.CardView>
 
</LinearLayout>

若是此XML佈局文件用做一個Activity的佈局，將TextView和ImageView 填充上有意義的值，那麼在Android設備上選而後以下：

3.建立 RecyclerView

步驟 1： 在佈局中定義它

使用RecyclerView 實例稍微更復雜一點。 然而，在佈局XML文件中定義它是至關簡單的 您能夠在佈局中定義它，以下所示：

<android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/rv"
    />

要在Activity中獲取句柄，請使用如下代碼段：

RecyclerView rv = (RecyclerView)findViewById(R.id.rv);

若是您肯定RecyclerView的(item)數目不會改變，您能夠添加如下內容來改善性能：

rv.setHasFixedSize(true);

步驟 2： 使用 LayoutManager

與ListView不一樣，RecyclerView須要一個LayoutManager來管理其條目(item)的位置。 您能夠經過擴展RecyclerView.LayoutManager類來定義本身的LayoutManager。 可是，在大多數狀況下，您能夠簡單地使用一個預約義的LayoutManager子類：

• LinearLayoutManager

• GridLayoutManager

• StaggeredGridLayoutManager

在本教程中，將使用LinearLayoutManager。 默認狀況下，此LayoutManager子類將使您的RecyclerView看起來像一個ListView。

LinearLayoutManager llm = new LinearLayoutManager(context);
rv.setLayoutManager(llm);

步驟3：定義數據

就像ListView同樣，RecyclerView須要一個適配器來訪問它的數據。 但在建立適配器以前，讓咱們建立可使用的數據。 建立一個簡單的類來表示一我的，而後編寫一個初始化Person對象List的方法：

class Person {
    String name;
    String age;
    int photoId;
 
    Person(String name, String age, int photoId) {
        this.name = name;
        this.age = age;
        this.photoId = photoId;
    }
}
 
private List<Person> persons;
 
// This method creates an ArrayList that has three Person objects
// Checkout the project associated with this tutorial on Github if
// you want to use the same images.
private void initializeData(){
    persons = new ArrayList<>();
    persons.add(new Person("Emma Wilson", "23 years old", R.drawable.emma));
    persons.add(new Person("Lavery Maiss", "25 years old", R.drawable.lavery));
    persons.add(new Person("Lillie Watts", "35 years old", R.drawable.lillie));
}

步驟4：建立適配器

要建立RecyclerView可使用的適配器，必須擴展RecyclerView.Adapter。 該適配器遵循視圖支架(view holder)設計模式，這意味着您能夠自定義擴展RecyclerView.ViewHolder的類。 此模式最大限度地減小了對昂貴的findViewById方法的調用次數。

在本教程前面，咱們已經爲表明一我的的CardView定義了XML佈局。 如今咱們將重用那個佈局。 在自定義ViewHolder的構造函數內，初始化屬於RecyclerView條目的視圖。

public class RVAdapter extends RecyclerView.Adapter<RVAdapter.PersonViewHolder>{
 
    public static class PersonViewHolder extends RecyclerView.ViewHolder {      
        CardView cv;
        TextView personName;
        TextView personAge;
        ImageView personPhoto;
 
        PersonViewHolder(View itemView) {
            super(itemView);
            cv = (CardView)itemView.findViewById(R.id.cv);
            personName = (TextView)itemView.findViewById(R.id.person_name);
            personAge = (TextView)itemView.findViewById(R.id.person_age);
            personPhoto = (ImageView)itemView.findViewById(R.id.person_photo);
        }
    }
 
}

接下來，向自定義適配器添加構造函數，以便它具備RecyclerView顯示數據的句柄。 因爲咱們的數據是Person對象的List，請使用如下代碼：

List<Person> persons;
 
RVAdapter(List<Person> persons){
    this.persons = persons;
}

RecyclerView.Adapter有三個咱們必須覆蓋的抽象方法。 讓咱們從getItemCount方法開始。 它應該返回數據中現存的條目(item)數。 因爲咱們的數據是List的形式，咱們只須要調用List對象的size方法：

@Override
public int getItemCount() {
    return persons.size();
}

接下來，覆蓋onCreateViewHolder方法。 顧名思義，當須要初始化自定義ViewHolder時調用此方法。 咱們指定RecyclerView每一個條目應使用的佈局。 這是經過使用LayoutInflater來填充(inflate)佈局來完成的，將輸出傳遞給自定義ViewHolder的構造函數。

覆蓋onBindViewHolder以指定RecyclerView的每一個項目的內容。 此方法與ListView適配器的getView方法很是類似。 在咱們的示例中，您必須在此方法內設置CardView的名稱，年齡和照片字段的值。

@Override
public void onBindViewHolder(PersonViewHolder personViewHolder, int i) {
    personViewHolder.personName.setText(persons.get(i).name);
    personViewHolder.personAge.setText(persons.get(i).age);
    personViewHolder.personPhoto.setImageResource(persons.get(i).photoId);
}

最後，您須要重寫onAttachedToRecyclerView方法。 如今，咱們能夠簡單地使用這個方法的超類實現，以下所示。

@Override
public void onAttachedToRecyclerView(RecyclerView recyclerView) {
    super.onAttachedToRecyclerView(recyclerView);
}

步驟5：使用適配器

如今適配器準備就緒，將如下代碼添加到Activity中以經過調用適配器的構造函數和RecyclerView的setAdapter方法來初始化並使用適配器：

RVAdapter adapter = new RVAdapter(persons);
rv.setAdapter(adapter);

步驟 6:編譯並運行

當您在Android設備上運行RecyclerView示例時，應該會看到相似於如下結果的內容。

結論

在本教程中，您已經學會了如何使用Android Lollipop中引入的CardView和RecyclerView小部件。 您還看到了如何在Material Design應用程序中使用這些小部件的示例。 請注意，儘管RecyclerView幾乎能夠完成ListView能夠執行的全部操做，但對於小型數據集，使用ListView仍然是可取的，由於它須要較少的代碼行。

有關CardView和RecyclerView類的更多信息，您能夠查閱Android開發人員參考。

關於Envato藝雲臺

Envato藝雲臺是數據資產和創造性人才匯聚的全球領先市場平臺。全球數百萬人都選擇經過咱們的市場平臺、工做室和課程來購買文件、選聘自由職業者，或者學習建立網站、製做視頻、應用、製圖等所需的技能。咱們的子網站包括Envato藝雲臺Tuts+ 網絡，全球最大的H五、PS、插圖、代碼和攝影教程資源庫，以及Envato藝雲臺市場，其中的900多萬類數字資產均經過如下七大平臺進行銷售 - CodeCanyon、ThemeForest、GraphicRiver、VideoHive、PhotoDune、AudioJungle和3DOcean。