ANDROID L——RecyclerView,CardView進口和使用（Demo）

標籤：

轉載請註明本文出自大苞米的部落格（http://blog.csdn.net/a396901990），謝謝支援！

簡單介紹：

這篇文章是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） 

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYTM5NjkwMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" >

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

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

2.匯入CardView和RecycleView，路徑為your sdk path\extras\android\support\v7\cardview（RecycleView則為同樣檔案夾下的recyclerview）

3.匯入時記得將projectcopy到本地並建議重新命名，這樣方便以後管理比如：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYTM5NjkwMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" >

第三步：設定Library

1..將兩個project設定為Library

2..在主project中引入這兩個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一下project。

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上的加入button時。向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上的刪除button時，向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控制項）

動畫——ANDROID L——Material Design具體解釋（動畫篇）

眼下僅僅差最後一個動畫部分了。原計劃是等動畫篇寫完之後再分別寫它們的使用Demo，可是上一篇UI控制項感覺寫的不夠具體，所以先把UI控制項的Demo寫出來。

視圖陰影和動畫的使用Demo等最後動畫篇寫完後再更新，敬請期待。。。

已經寫完連結：ANDROID L——Material Design綜合應用（Demo）

著作權聲明：本文博主原創文章。部落格，未經同意不得轉載。

ANDROID L——RecyclerView,CardView進口和使用（Demo）