## (一).前言: 作為Android?L開始，Google更新的除了RecyclerView之外的另一控件就是CardView，其中Google官方應用Google?Now就采用了CardView控件，下面我們詳細了解一下CardView和使用方法。 ## (二).基本介紹: CardView繼承自FrameLayout，可以讓我們使用類似卡片布局來顯示一致性效果的內容。同時卡片還可以包含圓角和陰影效果。CardView是一個Layout，同時在里邊布局其他View控件。如果我們需要創建帶有一個陰影效果的卡片，那么可以使用card_view:cardElevation屬性。 在API21（Android L）等級以上擁有屬性elevation，意為CardView的Z軸陰影，只有L平臺有效。只能通過xml中的elevation屬性指定；另外我們還可以使用以下的屬性來自定義CardView布局: 使用card_view:cardCornerRadius來設置布局的圓角。同樣可以使用代碼如下的代碼設置圓角:CardView.setRadius。對于卡片的背景可以使用card_view:cardBackgroundColor設置。 CardView的其他屬性以及作用如下: | card_view:cardElevation| 陰影的大小| |--|--| | card_view:cardMaxElevation| 陰影最大值| |card_view:cardBackgroundCollor|卡片的背景色| | card_view:cardCornerRadius|卡片的圓角大小| | card_view:contentPadding| 卡片內容與邊距的間隔| | card_view:contentPaddingBottom| 卡片內容與底部的間隔| | card_view:contentPaddingTop|卡片內容與頂部的間隔| |card_view:contentPaddingLeft| 卡片內容與左邊的間隔| | card_view:contentPaddingRight | 卡片內容與右邊的間隔| | card_view:contentPaddingStart| | | card_view:contentPaddingEnd| | ## (三).CardView組件引入: 我們知道CardView組件是Android?L開始引入，同時Google也做了兼容包在V7包里邊了，具體我們來看一下項目存在的路徑: 使用Android?Studio?IDE進行開發的話，我們只需要進行dependencies引入依賴即可:  ~~~ dependencies { compile fileTree(dir: 'libs', include:['*.jar']) ……. compile'com.android.support:cardview-v7:23.1.1' } ~~~ ## (四).CardView基本使用: 下面我們來具體來使用一下,根據上面的講解我們知道CardView也是一個Layout，那么里邊我們也可以加入其他布局，請看實例Demo布局文件,比較簡單一看就會了: ~~~ <?xmlversion="1.0" encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <includelayout="@layout/common_top_bar_layout"/> <android.support.v7.widget.CardView android:layout_marginTop="3dp" android:layout_marginLeft="3dp" android:layout_marginRight="3dp" android:id="@+id/card_view_one" android:layout_gravity="center" android:layout_width="match_parent" android:layout_height="100dp" card_view:cardCornerRadius="5dp"> <TextView android:id="@+id/info_text_one" android:text="CardView1測試" android:textSize="16sp" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" /> </android.support.v7.widget.CardView> <android.support.v7.widget.CardView android:layout_marginTop="3dp" android:layout_marginLeft="3dp" android:layout_marginRight="3dp" android:id="@+id/card_view_two" android:layout_gravity="center" android:layout_width="match_parent" android:layout_height="100dp" card_view:cardCornerRadius="5dp" card_view:cardBackgroundColor="#FFE4B5"> <TextView android:id="@+id/info_text_two" android:text="CardView2測試" android:textSize="16sp" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" /> </android.support.v7.widget.CardView> <android.support.v7.widget.CardView android:layout_marginTop="3dp" android:layout_marginLeft="3dp" android:layout_marginRight="3dp" android:id="@+id/card_view_three" android:layout_gravity="center" android:layout_width="match_parent" android:layout_height="100dp" card_view:cardCornerRadius="5dp" card_view:cardBackgroundColor="#CAE1FF"> <TextView android:id="@+id/info_text_three" android:text="CardView3測試" android:textSize="16sp" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" /> </android.support.v7.widget.CardView> <android.support.v7.widget.CardView android:layout_marginTop="3dp" android:layout_marginLeft="3dp" android:layout_marginRight="3dp" android:id="@+id/card_view_four" android:layout_gravity="center" android:layout_width="match_parent" android:layout_height="100dp" card_view:cardCornerRadius="5dp" card_view:cardBackgroundColor="#7CCD7C" card_view:cardElevation="5dp" card_view:cardMaxElevation="5dp"> <TextView android:id="@+id/info_text_four" android:text="CardView4測試" android:textSize="16sp" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" /> </android.support.v7.widget.CardView> </LinearLayout> ~~~ 這邊定義了四個CardView,同時設置了圓角以及相關背景顏色，其他第四個CardView還設置了陰影效果,具體運行效果如下:  ## (五).CardView結合RecyclerView: 前面我們實現了RecyclerView實現列表功能了，現在我們把Item?View采用CardView來實現,???? 1.首先我們來看下Item?布局文件: ~~~ <?xmlversion="1.0" encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:orientation="vertical"android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.CardView android:id="@+id/item_cardview" android:layout_gravity="center" android:layout_width="match_parent" android:layout_height="100dp" card_view:cardCornerRadius="5dp" card_view:cardBackgroundColor="#7CCD7C" card_view:cardElevation="3dp" card_view:cardMaxElevation="5dp"> <TextView android:id="@+id/item_tv" android:text="CardView測試" android:textSize="16sp" android:textColor="#FFFFFF" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" /> </android.support.v7.widget.CardView> </LinearLayout> ~~~ 這個布局比較簡單，定義一個CardView，內部包含了一個TextView。 2.自定義的Adapter如下,主要加載布局然后綁定數據: ~~~ packagecom.chinaztt.fda.test.CardView; importandroid.content.Context; importandroid.support.v7.widget.CardView; importandroid.support.v7.widget.RecyclerView; importandroid.text.Layout; importandroid.view.LayoutInflater; importandroid.view.View; importandroid.view.ViewGroup; importandroid.widget.TextView; importcom.chinaztt.fda.entity.CardDataUtils; importcom.chinaztt.fda.entity.CardViewBean; importcom.chinaztt.fda.ui.R; importjava.util.List; /** * 當前類注釋:CardView結合RecyclerView 自定義Adapter * 項目名：FastDev4Android * 包名：com.chinaztt.fda.test.CardView * 作者：江清清 on 15/11/23 19:41 * 郵箱：jiangqqlmj@163.com * QQ： 781931404 * 公司：江蘇中天科技軟件技術有限公司 */ public class CardViewAdapter extends RecyclerView.Adapter<CardViewAdapter.ItemCardViewHolder>{ private List<CardViewBean> beans; private LayoutInflater mInflater; private Context mContext; public CardViewAdapter(Context context){ this.mContext=context; beans=CardDataUtils.getCardViewDatas(); mInflater=LayoutInflater.from(context); } @Override public ItemCardViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { Viewview=mInflater.inflate(R.layout.item_cardview_layout,parent,false); return new ItemCardViewHolder(view); } @Override public void onBindViewHolder(ItemCardViewHolder holder, int position) { holder.item_cardview.setCardBackgroundColor(mContext.getResources().getColor(beans.get(position).getColor())); holder.item_tv.setText(beans.get(position).getTitle()); } @Override public int getItemCount() { return beans.size(); } public static class ItemCardViewHolder extends RecyclerView.ViewHolder{ private CardView item_cardview; private TextView item_tv; public ItemCardViewHolder(ViewitemView) { super(itemView); item_cardview=(CardView)itemView.findViewById(R.id.item_cardview); item_tv=(TextView)itemView.findViewById(R.id.item_tv); } } } ~~~ 3.數據提供我這邊采用一個類，在內邊進行構造的: ~~~ public class CardDataUtils { public static List<CardViewBean> getCardViewDatas(){ List<CardViewBean> beans=new ArrayList<CardViewBean>(); int[] colors=newint[]{R.color.color_0,R.color.color_1, R.color.color_2,R.color.color_3,R.color.color_4, R.color.color_5,R.color.color_6,R.color.color_7, R.color.color_8,R.color.color_9,R.color.color_10,}; for(int i=0;i<11;i++){ beans.add(new CardViewBean(colors[i],"CardView測試Item"+i)); } return beans; } } ~~~ 其中里面的11個顏色在,colors文件中定義了: ~~~ <!--cardView 實例中的顏色--> <color name="color_0">#FFF0F5</color> <color name="color_1">#FFE1FF</color> <color name="color_2">#E6E6FA</color> <color name="color_3">#C1FFC1</color> <color name="color_4">#B22222</color> <color name="color_5">#836FFF</color> <color name="color_6">#68228B</color> <color name="color_7">#5CACEE</color> <color name="color_8">#43CD80</color> <color name="color_9">#00EE00</color> <color name="color_10">#708090</color> ~~~ 4.主布局文件的代碼就不貼了，和以前一樣，就是一個RecyclerView控件定義，然后主Activity使用方法代碼如下: ~~~ packagecom.chinaztt.fda.test.CardView; importandroid.os.Bundle; importandroid.support.v7.widget.LinearLayoutManager; importandroid.support.v7.widget.OrientationHelper; importandroid.support.v7.widget.RecyclerView; importandroid.view.View; importandroid.widget.LinearLayout; importandroid.widget.TextView; importcom.chinaztt.fda.ui.R; importcom.chinaztt.fda.ui.base.BaseActivity; /** * 當前類注釋:CardView結合RecyclerView使用實例 * 項目名：FastDev4Android * 包名：com.chinaztt.fda.test.CardView * 作者：江清清 on 15/11/23 19:34 * 郵箱：jiangqqlmj@163.com * QQ： 781931404 * 公司：江蘇中天科技軟件技術有限公司 */ public class CardViewRecyclerActivity extends BaseActivity { private LinearLayout top_bar_linear_back; private TextView top_bar_title; private RecyclerView recycler_cardview; @Override protected void onCreate(BundlesavedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.card_view_recycler_layout); top_bar_linear_back=(LinearLayout)this.findViewById(R.id.top_bar_linear_back); top_bar_linear_back.setOnClickListener(new CustomOnClickListener()); top_bar_title=(TextView)this.findViewById(R.id.top_bar_title); top_bar_title.setText("CardView結合RecyclerView使用實例"); recycler_cardview=(RecyclerView)this.findViewById(R.id.recycler_cardview); LinearLayoutManager linearLayoutManager=new LinearLayoutManager(this); linearLayoutManager.setOrientation(OrientationHelper.VERTICAL); recycler_cardview.setLayoutManager(linearLayoutManager); recycler_cardview.setAdapter(newCardViewAdapter(this)); } class CustomOnClickListener implements View.OnClickListener{ @Override public void onClick(View v) { CardViewRecyclerActivity.this.finish(); } } } ~~~ 5.運行效果如下:  ## (六).最后總結 今天我們對于CardView做了基本講解以及相關使用方法，同時也通過與RecyclerView的結合讓我們鞏固CardView的使用。CardView控件整體比較簡單，相信大家還是比較容易理解，以后的項目中大家就可以使用CardView控件了(例如在新聞列表功能中等)。 本次具體實例注釋過的全部代碼已經上傳到FastDev4Android項目中了。同時歡迎大家去Github站點進行clone或者下載瀏覽: [https://github.com/jiangqqlmj/FastDev4Android](https://github.com/jiangqqlmj/FastDev4Android)?同時歡迎大家star和fork整個開源快速開發框架項目~ 本人錄制AA(Android Annotations)注入框架的視頻教程已經上線了,歡迎大家前往觀看。[http://www.cniao5.com/course/10074](http://www.cniao5.com/course/10074) [](http://www.cniao5.com/course/10074)