Android L——RecyclerView,CardView導入和使用（Demo）

這篇文章是ANDROID L——Material Design詳解（UI控件）的一個補充或者說是應用實例，如果有時間建議大家稍微瀏覽一下上篇文章。

本文主要介紹Android L新增加的兩個UI控件RecyclerView，CardView的導入和使用。

RecyclerView是ListView的升級版

CardView則是Google提供的一個卡片式視圖組件

本例就是使用RecyclerView來展示多個CardView的一個小例子，先看下效果圖：

導入RecyclerView,CardView

由於RecyclerView,CardView是放在support library v7包中，所以我們想要使用就必須要導包。

下面就介紹下在Eclipse和Android Studio中是如何導入這兩個包的。

Eclipse：

第一步：通過SDK manager下載/更新Android Support Libraries（5.0版本最新爲21）

第二步：導入CardView和RecyclerView項目（都在support v7中）

1.在Eclipse中點擊Import，導入Android項目

2.導入CardView和RecycleView，路徑爲your sdk path\extras\android\support\v7\cardview（RecycleView則爲相同目錄下的recyclerview）

3.導入時記得將工程copy到本地並建議重命名，這樣方便以後管理例如：

第三步：設置Library

1..將兩個工程設置爲Library

2..在主工程中引入這兩個Library例如：

通過這三步就可以將這兩個包導入進來了。

Android Studio

Android Stuido相對於Eclipse簡單的多：

第一步：

首先要確保已經將Android Support Libraries升級到最新.

第二步：

打開項目中的build.gradle文件，在dependencies中添加如下代碼。

dependencies {
    compile 'com.android.support:recyclerview-v7:21.+'
    compile 'com.android.support:cardview-v7:21.+'
}

第三步：

重新Build一下工程。

Build完成後就會發現這兩個包就已經導入進來了

代碼介紹：

主題：

首先這個黑色基調的主題是使用了Material.Dark.ActionBar樣式。

設置方法：修改values-v21文件夾下styles.xml文件：

<resources>
    <style name="AppTheme" parent="android:ThemeOverlay.Material.Dark.ActionBar">
    </style>
</resources>

佈局文件：

recycler_view.xml（RecyclerView佈局文件）:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".MyActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MyActivity" />
</FrameLayout>

FrameLayout裏包含了RecyclerView控件

card_view.xml（CardView佈局文件）：

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="5dp"
    android:orientation="horizontal"
    card_view:cardBackgroundColor="@color/cardview_dark_background"
    card_view:cardCornerRadius="5dp" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:padding="5dp" >

        <ImageView
            android:id="@+id/pic"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:scaleType="centerCrop" />

        <TextView
            android:clickable="true"
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="10dp"
            android:layout_marginRight="10dp"
            android:gravity="right|bottom"
            android:textColor="@android:color/white"
            android:textSize="24sp" />
    </RelativeLayout>

</android.support.v7.widget.CardView>

CardView視圖中包含了一個ImageView和一個TextView分別顯示圖片和文字信息

唯一需要介紹的就是在佈局文件中使用了，如下兩個屬性：

 card_view:cardBackgroundColor="@color/cardview_dark_background"
    card_view:cardCornerRadius="5dp"

他倆的作用分別是設置CardView的背景顏色和外圍的圓角大小（注意要使用card_view命名空間）

代碼：

Actor類（封裝數據的Model類）：

public class Actor
{
    String name;

    String picName;

    public Actor(String name, String picName)
    {
        this.name = name;
        this.picName = picName;
    }

    public int getImageResourceId( Context context )
    {
        try
        {
            return context.getResources().getIdentifier(this.picName, "drawable", context.getPackageName());

        }
        catch (Exception e)
        {
            e.printStackTrace();
            return -1;
        }
    }
}

封裝了演員的名字和圖片名，getImageResourceId()方法的作用就是根據圖片命找到系統資源

MyActivity(程序主控制Activity)

public class MyActivity
    extends Activity
{

    private RecyclerView mRecyclerView;

    private MyAdapter myAdapter;

    private List<Actor> actors = new ArrayList<Actor>();

    private String[] names = { "朱茵", "張柏芝", "張敏", "鞏俐", "黃聖依", "趙薇", "莫文蔚", "如花" };

    private String[] pics = { "p1", "p2", "p3", "p4", "p5", "p6", "p7", "p8" };

    @Override
    protected void onCreate( Bundle savedInstanceState )
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.recycler_view);

        actors.add(new Actor("朱茵", "p1"));
        getActionBar().setTitle("那些年我們追的星女郎");

        // 拿到RecyclerView
        mRecyclerView = (RecyclerView) findViewById(R.id.list);
        // 設置LinearLayoutManager
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        // 設置ItemAnimator
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());
        // 設置固定大小
        mRecyclerView.setHasFixedSize(true);
        // 初始化自定義的適配器
        myAdapter = new MyAdapter(this, actors);
        // 爲mRecyclerView設置適配器
        mRecyclerView.setAdapter(myAdapter);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch(item.getItemId()) {
            // 當點擊actionbar上的添加按鈕時，向adapter中添加一個新數據並通知刷新
            case R.id.action_add:
                if (myAdapter.getItemCount() != names.length) {
                    actors.add(new Actor(names[myAdapter.getItemCount()], pics[myAdapter.getItemCount()]));
                    mRecyclerView.scrollToPosition(myAdapter.getItemCount() - 1);
                    myAdapter.notifyDataSetChanged();
                }
                return true;
            // 當點擊actionbar上的刪除按鈕時，向adapter中移除最後一個數據並通知刷新
            case R.id.action_remove:
                if (myAdapter.getItemCount() != 0) {
                    actors.remove(myAdapter.getItemCount()-1);
                    mRecyclerView.scrollToPosition(myAdapter.getItemCount() - 1);
                    myAdapter.notifyDataSetChanged();
                }
                return true;
        }
        return super.onOptionsItemSelected(item);
    }

}

MyAdapter（自定義適配器類）

public class MyAdapter
    extends RecyclerView.Adapter<MyAdapter.ViewHolder>
{

    private List<Actor> actors;

    private Context mContext;

    public MyAdapter( Context context , List<Actor> actors)
    {
        this.mContext = context;
        this.actors = actors;
    }

    @Override
    public ViewHolder onCreateViewHolder( ViewGroup viewGroup, int i )
    {
        // 給ViewHolder設置佈局文件
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.card_view, viewGroup, false);
        return new ViewHolder(v);
    }

    @Override
    public void onBindViewHolder( ViewHolder viewHolder, int i )
    {
        // 給ViewHolder設置元素
        Actor p = actors.get(i);
        viewHolder.mTextView.setText(p.name);
        viewHolder.mImageView.setImageDrawable(mContext.getDrawable(p.getImageResourceId(mContext)));
    }

    @Override
    public int getItemCount()
    {
        // 返回數據總數
        return actors == null ? 0 : actors.size();
    }

    // 重寫的自定義ViewHolder
    public static class ViewHolder
        extends RecyclerView.ViewHolder
    {
        public TextView mTextView;

        public ImageView mImageView;

        public ViewHolder( View v )
        {
            super(v);
            mTextView = (TextView) v.findViewById(R.id.name);
            mImageView = (ImageView) v.findViewById(R.id.pic);
        }
    }
}

所有代碼介紹完畢了，可以總結爲以下兩點：

RecyclerView：

理解爲之前的ListView，不過需要設置LinearLayoutManager（目前資料不多我也有點迷糊以後再補充）和ItemAnimator（爲每個條目設置操作動畫）兩個新屬性

RecyclerView.Adapter：

理解爲默認自帶和基於ViewHolder的新的適配器，只不過回調方法稍有不同，但本質都是一樣的。

代碼下載地址：https://github.com/a396901990/AndroidDemo

寫在最後：

最近在寫一個ANDROID L——Material Design詳解的系列文章。

主題和佈局——ANDROID L——Material Design詳解（主題和佈局）

視圖和陰影——ANDROID L——Material Design詳解（視圖和陰影）

UI控件——ANDROID L——Material Design詳解（UI控件）

動畫