【翻譯】Android RecyclerView CardView

Android L最新支持包推出兩個UI控件RecycleView和CardView。RecyclerView是更先進，更靈活的ListView，這是一個很大的進步，因為ListView是UI組件中最常用的控件之一。此外，CardView控件是一個全新的組件。在這篇教程中將解釋如何使用這兩個控件以及如何混合使用它們，首先來來深入了解一下RecyclerView。

RecyclerView

正如前面說RecyclerView是更加靈活的ListView，盡管它引進了一些復雜的東西。我們都知道如何在app中使用ListView，並且如果想要提高ListView的性能，那麼可以使用一種叫ViewHolder的模式。這個模式由一個簡單類組成，它持有ListView中每一行所包含的UI組件的引用。這種模式避免列表顯示的時候總是查找那些UI組件。盡管該模式引進了這點好處但我們仍可以不使用這種模式來實現ListView。而RecyclerView強制我們使用ViewHolder模式來提高系統的性能。為了說明如何使用RecyclerView，我們可以創建一個簡單的app來顯示通訊錄卡片列表。第一件事就是創建主布局文件，RecyclerView很像ListView，我們可以用相同的方式來使用它們。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  android:paddingBottom="@dimen/activity_vertical_margin"
  tools:context=".MyActivity">
  <android.support.v7.widget.RecyclerView
         android:id="@+id/cardList"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
   />    
</RelativeLayout>

你應該注意到上面的layout了，RecycleView位於Android支持庫中，所以我們要修改bulid.gradle文件來包含該依賴。

dependencies {
   ...    
   compile 'com.android.support:recyclerview-v7:21.0.0-rc1'
}

現在就可以在onCreate方法中我們來獲取RecycleView的引用並且配置它。

@Override
protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_my);
      RecyclerView recList = (RecyclerView) findViewById(R.id.cardList);
      recList.setHasFixedSize(true);
      LinearLayoutManager llm = new LinearLayoutManager(this);
      llm.setOrientation(LinearLayoutManager.VERTICAL);
      recList.setLayoutManager(llm);
}

你會注意到ReclerView與ListView的區別，RecycleView需要一個布局管理器，這個組件把列表項視圖放到了行裡面，來決定什麼時候去循環視圖。這個庫提供了一個默認的布局管理器叫做LinearLayoutManager。

CardView

CardView UI組件在卡片裡面顯示更多信息。可以自定義它的圓角、陰影等效果。現在用這個組件來展示通訊信息。卡片將作為RecyclerView的行，稍後我們能看到如何集成這兩個組件，現在來定義該卡片的布局。

<android.support.v7.widget.CardView
  xmlns:card_view="http://schemas.android.com/apk/res-auto"
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/card_view"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  card_view:cardCornerRadius="4dp"
  android:layout_margin="5dp">

<RelativeLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">

 <TextView
     android:id="@+id/title"
     android:layout_width="match_parent"
     android:layout_height="20dp"
     android:background="@color/bkg_card"
     android:text="contact det"
     android:gravity="center_vertical"
     android:textColor="@android:color/white"
     android:textSize="14dp"/>

<TextView
    android:id="@+id/txtName"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Name"
    android:gravity="center_vertical"
    android:textSize="10dp"
    android:layout_below="@id/title"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="5dp"/>

<TextView
    android:id="@+id/txtSurname"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Surname"
    android:gravity="center_vertical"
    android:textSize="10dp"
    android:layout_below="@id/txtName"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="5dp"/>

<TextView
    android:id="@+id/txtEmail"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Email"
    android:textSize="10dp"
    android:layout_marginTop="10dp"
    android:layout_alignParentRight="true"
    android:layout_marginRight="150dp"
    android:layout_alignBaseline="@id/txtName"/>

</RelativeLayout>

正如你所看到的，CardView使用非常簡單，這個組件在另外一個支持庫中，現在來添加依賴：

dependencies {
    compile 'com.android.support:cardview-v7:21.0.0-rc1'
    compile 'com.android.support:recyclerview-v7:21.0.0-rc1'
}

RecyclerView: Adapter

適配器組件提供數據信息，UI組件渲染這些信息，換而言之，一個適配器告訴UI顯示哪些信息。因此如果我們想顯示通訊信息，我們需要給RecyclerView一個適配器。該適配器必須繼承RecyclerView.Adapter。傳遞MyHolder類實現ViewHolder模式。

public class MyAdapter extends RecyclerView.Adapter<MyHolder> { ..... }

現在我們需要覆蓋兩個方法以至於能實現我們的邏輯。onCreateViewHolder會在新的ViewHolder實例創建的時候被調用，onBindViewHolder在SO試圖綁定數據的時候調用，換句話說，數據顯示在UI中時調用。

在這個案例中，適配器幫我們把RecyclerView和CardView結合，之前我們定義的卡片布局將作為RecyclerView的通訊錄列表的行。在做這個之前，我們需要定義好數據模型（例如：哪些信息需要顯示），為了達到這個目的，我們可以定義一個簡單類：

public class ContactInfo {
  protected String name;
  protected String surname;
  protected String email;
  protected static final String NAME_PREFIX = "Name_";
  protected static final String SURNAME_PREFIX = "Surname_";
  protected static final String EMAIL_PREFIX = "email_";
}

最後，准備創建適配器，如果你還記得之前說過的ViewHolder模式的話，我們需要編寫代碼來實現它。

public static class ContactViewHolder extends RecyclerView.ViewHolder {
 protected TextView vName;
 protected TextView vSurname;
 protected TextView vEmail;
 protected TextView vTitle;

 public ContactViewHolder(View v) {
      super(v);
      vName =  (TextView) v.findViewById(R.id.txtName);
      vSurname = (TextView)  v.findViewById(R.id.txtSurname);
      vEmail = (TextView)  v.findViewById(R.id.txtEmail);
      vTitle = (TextView) v.findViewById(R.id.title);
  }
}

從代碼中看出，在類的構造方法中，我們獲取到了定義在卡片布局的試圖的引用，現在編寫適配器代碼：

public class ContactAdapter extends RecyclerView.Adapter<ContactAdapter.ContactViewHolder> {

    private List<ContactInfo> contactList;

    public ContactAdapter(List<ContactInfo> contactList) {
            this.contactList = contactList;
    }

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

    @Override
    public void onBindViewHolder(ContactViewHolder contactViewHolder, int i) {
        ContactInfo ci = contactList.get(i);
        contactViewHolder.vName.setText(ci.name);
        contactViewHolder.vSurname.setText(ci.surname);
        contactViewHolder.vEmail.setText(ci.email);
        contactViewHolder.vTitle.setText(ci.name + " " + ci.surname);
   }

   @Override
   public ContactViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View itemView = LayoutInflater.
                    from(viewGroup.getContext()).
                    inflate(R.layout.card_layout, viewGroup, false);

        return new ContactViewHolder(itemView);
   }

  public static class ContactViewHolder extends RecyclerView.ViewHolder {
      ...
  }
}

在代碼實現中，綁定數據給試圖的時候我們覆蓋了onBindViewHolder。注意我們再沒有去查找UI組件只是簡單地引用存儲在CcontactViewHolder中的信息。在onCreateViewHolder返回了ContactViewHolder填充布局的行（這個例子中的CardView）。

運行app，你會看到如下結果：

完整代碼可以在github中查看

原文：A Guide to Android RecyclerView and CardView

更多Android相關信息見Android 專題頁面 http://www.linuxidc.com/topicnews.aspx?tid=11