【FastDev4Android框架開發】CardView完全解析與RecyclerView結合使用(三十二)
轉載請標明出處:
(一).前言:
【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新,請大家關注收藏:http://www.lcode.org
作為Android L開始,Google更新的除了RecyclerView之外的另一控制元件就是CardView,其中Google官方應用GoogleNow就採用了CardView控制元件,下面我們詳細瞭解一下CardView和使用方法。
(二).基本介紹:
CardView繼承自FrameLayout,可以讓我們使用類似卡片佈局來顯示一致性效果的內容。同時卡片還可以包含圓角和陰影效果。CardView是一個Layout
在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:contentPadding | 卡片內容與左邊的間隔 |
card_view:contentPaddingRight | 卡片內容與右邊的間隔 |
card_view:contentPaddingStart | |
card_view:contentPaddingEnd |
(三).CardView元件引入:
我們知道CardView元件是Android L開始引入,同時Google也做了相容包在V7包裡邊了,具體我們來看一下專案存在的路徑:
使用AndroidStudioIDE進行開發的話,我們只需要進行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實現列表功能了,現在我們把ItemView採用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或者下載瀏覽:
關注我的訂閱號,每天分享移動開發技術(Android/IOS),專案管理以及部落格文章!
關注我的微博,可以獲得更多精彩內容
相關推薦
【FastDev4Android框架開發】CardView完全解析與RecyclerView結合使用(三十二)
轉載請標明出處:(一).前言: 【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新,請大家關注收藏:http://www.lcode.org作為Android L開始,Google更新的除了RecyclerView之外的另一控制元件
【FastDev4Android框架開發】Volley完全解析之基礎使用(二十六)
轉載請標明出處:(一).前言: 【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新,請大家關注收藏:http://www.lcode.org對於網路框架這
CardView完全解析與RecyclerView結合使用
轉載請標明出處: (一).前言: 【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新,請大家關注收藏:http://www.lcode.org 作為Android L開始,Google更新的除
【FastDev4Android框架開發】RecyclerView完全解析之打造新版類Gallery效果(二十九)
轉載請標明出處:(一).前言: 【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新,請大家關注收藏:http://www.lcode.org 話說RecyclerView已經面市很久,也在很多應用中得到廣泛的使
【FastDev4Android框架開發】HorizontalScrollView,Fragment,FragmentStatePagerAdapter打造網易新聞Tab及滑動頁面效果(三十六)
轉載請標明出處:(一).前言: 【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新,請大家關注收藏:http://www.lcode.org 仿36Kr客戶端開發過程中,因為他們網站上面的新聞文章分類比較多,所以我
【FastDev4Android框架開發】重寫WebView網頁載入以及JavaScript注入詳解(二十三)
轉載請標明出處: (一).前言: 【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新,請大家關注收藏:http://www.lcode.org 今天我們來學習一下重寫WebView元件來實現網頁的載入,以及我們平時AP
【FastDev4Android框架開發】非常漂亮的進度指示器AVLoadingIndicatorView的使用講解(十八)
轉載請標明出處: (一).前言: 【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新,請大家關注收藏:http://www.lcode.org 今天我們的專案繼續更新,今天主要要加入一個非常漂亮的進度指示器AVLoading
【FastDev4Android框架開發】訊息匯流排EventBus的基本使用(二十)
轉載請標明出處: (一).前言: 【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新,請大家關注收藏:http://www.lcode.org 今天我們的
【FastDev4Android框架開發】AndroidAnnnotations注入框架使用之最佳實踐SharedPreferences(十七)
轉載請標明出處: (一).前言: 前面我們已經對於AndroidAnnotations使用Adapters和lists做了講解,今天我們開始具體學習一下使用DI框架SharedPrefe
【鏈塊技術50期】區塊鏈技術基礎語言(三十二):Go語言網路程式設計(下)
原文連結:區塊鏈技術基礎語言(三十二):Go語言網路程式設計(下) 本文緊接上文所述,講解socket程式設計和HTTP程式設計。 一、socket程式設計 在上一節我們介紹了網路體系的五層模型,介紹了每層模型所遵守的協議。TCP/IP是一個協議族,它由網路層的IP協議
【ARM-Linux開發】U-Boot啟動過程--詳細版的完全分析
----------------------------------------------------------------------------------------------------------------------------------------
【Android 多媒體開發】 MediaPlayer 狀態機 介面 方法 解析
作者 : 韓曙亮一. MediaPlayer 狀態機 介紹Android MediaPlayer 狀態即圖例 : 1. Idle (閒置) 狀態 和 End (結束) 狀態MediaPlayer 物件宣告週期 : 從 Idle 到 End 狀態就是 MediaPlayer 整
【ASP.NET開發】.NET三層架構簡單解析
這篇文章本來應該很早就寫出來的,但是一直苦於自己的精神能力有限,而且已經到了我們學校的考試周,所以時間上還是有點緊迫。關鍵的一點就是,找不到合理的思路來寫,思路沒有的話,就算是再好的素材,也寫不來大家喜歡的文章。 之前已經寫過關於.NET三層架的兩篇文章了,一篇是《【ASP
【 專欄 】- Picasso完全解析
Picasso完全解析 圖片載入利器之Picasso(一)初識 圖片載入利器之Picasso(二)基本用法 圖片載入利器之Picasso(三)進階 圖片載入利器之Picasso(四)原始碼解析 圖片載入利器之Picasso
【框架基礎】:全面解析Java註解(一)
Java註解概述 要了解Java註解要先知道Java的反射,反射是執行時獲取類的成員,註解也是類的成員,以此達到動態編碼的效 果,多用在框架,或者使用框架時候添加註解讓框架
【大數據開發】你知道大數據語言的工具與框架嗎?
新節點 java 學習曲線 定義 onf 團隊 工具 cal 儀表盤 為了解大數據的當前和未來狀態,我們采訪了來自28個組織的31位IT技術主管。我們問他們,“你在數據提取,分析和報告中使用的最流行的語言,工具和框架是什麽?” 以下的文章是他們告訴我們的記錄,經過總結如下。
【iOS越獄開發】怎樣將應用打包成.ipa文件
ria font 配置文件 例如 方法 col stat pack 應該 在項目開發中。我們經常須要將project文件打包成.ipa文件。提供給越獄的iphone安裝。 以下是一種方法: 1、首先應該給project安裝好配置文件(這裏不再敖述),在ios de
【微信開發】02.搭建一個屬於自己的微信公眾平臺
tro 投票 新浪 關系 blank 訂閱 logs name 開發者 閱讀目錄 【網站開發】在新浪SAE上搭建一個博客 概述 公司年會上同事開發了一個微信企業號,包含了投票,抽獎,祝福墻功能,還開了一個Session,跟我們講了下公司的企業號開發過程和抽獎中獎
【Android 應用開發】 ActionBar 樣式具體解釋 -- 樣式 主題 簡單介紹 Actionbar 的 icon logo 標題 菜單樣式改動
detail sub str 進度條 代碼分析 extc dst 模式 html 作者 : 萬境絕塵 ([email protected]/* */)轉載請著名出處 : http://blog.csdn.net/shulianghan/article/deta
【React Native開發】React Native控件之ProgressBarAndroid進度條解說(12)
ice 發現 來講 top 文章 func dev all ios 轉載請標明出處:http://blog.csdn.net/developer_jiangqq/article/details/50596367本文出自:【江清清的博客】(一)前言 【好消息】