CardView簡介
- CardView繼承自FrameLayout類。
- CardView是一種卡片視圖从媚，主要是以卡片形式顯示內容综液。
CardView功能
- CardView實現(xiàn)在一個卡片布局中顯示相同的內容蓖墅，卡片布局可以設置圓角和陰影，還可以布局其他的View巴元。
- CardView即可作為一般的布局使用，也可以作為ListView和RecyclerView的Item使用驮宴。
CardView何時使用
- 需要顯示層次性的內容逮刨，可以考慮使用。
- 需要顯示列表或網(wǎng)格時堵泽，可以考慮使用修己。
CardView位置
- 包名：android.support.v7.widget.CardView
- 文件地址有兩個
- android-sdk/extras/android/m2repository/com/android/support/cardview-v7
- android-sdk/extras/android/support/v7/cardView
CardView引用
Android Studio
dependencies {
compile 'com.android.support:cardview-v7:23.1.1'
}
Eclipse
- 在android-sdk/extras/android/support/v7/cardview目錄下面有l(wèi)ibs，里面有jar包迎罗，引用此jar包睬愤。
- 在android-sdk/extras/android/m2repository/com/android/support/cardview-v7目錄下根據(jù)版本號23.1.1目錄可以找到一個名為cardview-v7-23.1.1.aar的文件。解壓此文件里面有classes.jar纹安，引用此jar包尤辱。
- 針對找不到目錄，可以打開Android SDK Manager把最新的資源更新下來即可厢岂。
在此推薦使用Android Studio開發(fā)Android項目
開發(fā)中值得注意的細節(jié)
-
對低版本SDK的兼容（低于Android L版本）
- 針對Android L以下的版本光督，對CardView添加了一個Elevation的元素，即XML中的app:cardElevation和代碼中的setCardElevation咪笑。
- 對于在低版本中可帽，設置了CardElevation后，CardView會自動留出空間供陰影顯示窗怒，但對于Android L版本映跟，就需要手動設置Margin邊距來預留空間，這樣的結果就是在Android 5.0以上的手機上可以正常顯示扬虚，但對于Android 4.4.x的手機上就發(fā)現(xiàn)邊距很大努隙，導致浪費了屏幕空間。
- 解決上面問題辜昵，需要我們做適配荸镊。可以在/res/value和/res/value-v21分別創(chuàng)建dimens.xml文件，在dimens.xml里躬存，隨意命名张惹，對于Android 5.0以上的設置數(shù)值0dp，對于Android 5.0以下的設置數(shù)值（根據(jù)實際需求）岭洲。這樣就解決低版本中邊距過大或者視覺效果不好的問題了宛逗。
-
對低版本SDK的兼容（低于Android L版本）setElevation的問題
- 由于缺少一些系統(tǒng)API（如 RenderThread），CardView中的Elevation兼容實現(xiàn)并不完美盾剩，和真正的實現(xiàn)方法還是有較大的差距（不是指效果）雷激，所以調用 setCardElevation也不能隨心所欲地傳入一個Float型，在低版本系統(tǒng)使用時應當處理一下傳入的數(shù)值或加上try-catch（不推薦）告私。
CardView屬性介紹
- android:cardCornerRadius
- 在xml文件中設置card圓角的大小
- CardView.setRadius
- 在代碼中設置card圓角的大小
- android:cardBackgroundColor
- 在xml文件中設置card背景顏色
- android:elevation
- 在xml文件中設置陰影的大小
- card_view:cardElevation
- 在xml文件中設置陰影的大小
- card_view:cardMaxElevation
- 在xml文件中設置陰影最大高度
- card_view:cardCornerRadius
- 在xml文件中設置卡片的圓角大小
- card_view:contentPadding
- 在xml文件中設置卡片內容于邊距的間隔
- card_view:contentPaddingBottom
- 在xml文件中設置卡片內容于下邊距的間隔
- card_view:contentPaddingTop
- 在xml文件中設置卡片內容于上邊距的間隔
- card_view:contentPaddingLeft
- 在xml文件中設置卡片內容于左邊距的間隔
- card_view:contentPaddingRight
- 在xml文件中設置卡片內容于右邊距的間隔
- card_view:contentPaddingStart
- 在xml文件中設置卡片內容于邊距的間隔起始
- card_view:contentPaddingEnd
- 在xml文件中設置卡片內容于邊距的間隔終止
- card_view:cardUseCompatPadding
- 在xml文件中設置內邊距屎暇，V21+的版本和之前的版本仍舊具有一樣的計算方式
- card_view:cardPreventConrerOverlap
- 在xml文件中設置內邊距，在V20和之前的版本中添加內邊距驻粟，這個屬性為了防止內容和邊角的重疊
波紋點擊效果
- 默認情況根悼，CardView是不可點擊的，并且沒有任何的觸摸反饋效果蜀撑。
- 觸摸反饋動畫在用戶點擊CardView時可以給用戶以視覺上的反饋番挺。
- 實現(xiàn)這種行為，你必須提供一下屬性:android:clickable和android:foreground屯掖。
<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:clickable="true"
android:foreground="?android:attr/selectableItemBackground">
...
</android.support.v7.widget.CardView>
實例代碼
引入的包
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.android.support:cardview-v7:23.1.1'
compile 'com.android.support:recyclerview-v7:21.0.0'
compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.3'
}
MainActivity.java
package com.cienet.android;
import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import com.cienet.android.adapter.MyAdapter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
public class MainActivity extends Activity {
private RecyclerView mRecyclerView;
private MyAdapter myAdapter;
private List<HashMap<String, String>> mList = new ArrayList<HashMap<String, String>>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getPicUrls();
// 獲取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, mList);
// 為mRecyclerView設置適配器
mRecyclerView.setAdapter(myAdapter);
}
private void getPicUrls() {
List<HashMap<String, String>> list = new ArrayList<HashMap<String, String>>();
HashMap<String, String> map1 = new HashMap<String, String>();
map1.put("A", "http://img3.hao123.com/data/1_8583424a3f55c06ebeafce438a637c0d_0");
list.add(map1);
HashMap<String, String> map2 = new HashMap<String, String>();
map2.put("A", "http://img0.hao123.com/data/1_981ee6e65d3f13ec691804ab82f2a0ab_510");
list.add(map2);
HashMap<String, String> map3 = new HashMap<String, String>();
map3.put("A", "http://img3.hao123.com/data/desktop/4926b79748d1c9d4db328e1a8b7a7794_1280_800");
list.add(map3);
HashMap<String, String> map4 = new HashMap<String, String>();
map4.put("A", "http://img5.hao123.com/data/1_7793be4df6fd23d63ca321b205ba083b_510");
list.add(map4);
HashMap<String, String> map5 = new HashMap<String, String>();
map5.put("A", "http://img3.hao123.com/data/1_c46275cc6b24a480ecec31b3b5ec3c39_510");
list.add(map5);
mList = list;
}
}
MyAdapter.java
package com.cienet.android.adapter;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import com.cienet.android.R;
import com.nostra13.universalimageloader.core.ImageLoader;
import java.util.HashMap;
import java.util.List;
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
private Context mContext;
private List<HashMap<String, String>> mList;
public MyAdapter(Context context, List<HashMap<String, String>> list) {
this.mContext = context;
this.mList = list;
}
@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設置元素
ImageLoader.getInstance().displayImage(mList.get(i).get("A"), viewHolder.mImageView);
}
@Override
public int getItemCount() {
// 返回數(shù)據(jù)總數(shù)
return mList == null ? 0 : mList.size();
}
// 重寫的自定義ViewHolder
public static class ViewHolder extends RecyclerView.ViewHolder {
public ImageView mImageView;
public ViewHolder(View v) {
super(v);
mImageView = (ImageView) v.findViewById(R.id.pic);
}
}
}
card_view.xml
<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:orientation="horizontal"
card_view:cardBackgroundColor="@android:color/black"
card_view:cardCornerRadius="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:padding="1dp">
<ImageView
android:id="@+id/pic"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:scaleType="centerCrop" />
</RelativeLayout>
</android.support.v7.widget.CardView>
main_activity.xml
<?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>
