【FastDev4Android框架開發】CardView完全解析與RecyclerView結合使用(三十二)

轉載請標明出處：

http://blog.csdn.net/developer_jiangqq/article/details/50000733

本文出自:【江清清的博客】

(一).前言:   

        【好消息】個人網站已經上線運行,後面博客以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org

        作爲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
 * 郵箱：[email protected]
 * 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
 * 郵箱：[email protected]
 * 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 同時歡迎大家star和fork整個開源快速開發框架項目~

           本人錄製AA(Android Annotations)注入框架的視頻教程已經上線了,歡迎大家前往觀看。http://www.cniao5.com/course/10074

         

         

尊重原創，轉載請註明：From Sky丶清（http://blog.csdn.net/developer_jiangqq） 侵權必究！

關注我的訂閱號,每天分享移動開發技術(Android/IOS),項目管理以及博客文章!

關注我的微博，可以獲得更多精彩內容