簡書博客文章遷移https://www.jianshu.com/u/43a04ef9d4c6
目錄:
- CardView簡介
- CardView基本屬性(xml文件中)
- 某些屬性使用效果
- CardView使用方法
- 高級效果 波紋點擊(像點擊Button那樣)
- 注意 對低版本的兼容處理
CardView簡介
- CardView是API21(Android5.0)發佈的卡片式控件。簡單的說就是卡片視圖,扁平化視圖。
- 繼承自FrameLayout
public class CardView extends FrameLayout
- CardView可以作爲根佈局使用,也可以作爲ReCycleView或者ListView的Item
CardView基本屬性(xml文件中)
- app:cardBackgroundColor這是設置背景顏色
app:cardCornerRadius這是設置圓角大小
app:cardElevation這是設置陰影(z軸),具體效果見下面
app:contentPadding 設置內容的padding CardView子佈局與CardView邊界
app:contentPaddingLeft 設置內容的左padding
app:contentPaddingTop 設置內容的上padding
app:contentPaddingRight 設置內容的右padding
app:contentPaddingBottom 設置內容的底padding
app:cardUseCompatPadding 是否使用CompatPadding, 官方說是設置內邊距,個人感覺不到什麼,具體效果見下面
app:cardPreventCornerOverlap 是否使用PreventCornerOverlap,設置內邊距(API20及以下中),通常該屬性爲了避免內容和邊角的重疊
某些屬性使用效果
- 陰影Elevation
- app:contentPadding CardView子佈局與CardView邊界
- app:cardUseCompatPadding 設置內邊距
CardView使用方法
當前IDE:Android Studio 2.2正式版
jdk1.8.102
compileSdkVersion 25
buildToolsVersion “25.0.2”
gradle 導包
dependencies {
...
compile 'com.android.support:cardview-v7:25.2.0'
}
CardView是通常是定義在佈局文件中:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical|center_horizontal"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.minminaya.cardview_learning.MainActivity">
<android.support.v7.widget.CardView
android:id="@+id/w"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="10dp"
app:cardElevation="10dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@mipmap/me"/>
</android.support.v7.widget.CardView>
</RelativeLayout>
通常情況下,只需要radius與elevation就可以達到很漂亮的卡片效果,甚至懸浮式的
當然,也可以在code中使用:
public void setRadius(float radius)
public void setContentPadding
public void setUseCompatPadding(boolean useCompatPadding)
public void setCardBackgroundColor(@ColorInt int color)
...
高級效果 波紋點擊(像點擊Button那樣)
- 默認CardView的android:clickable屬性是false的,也就是默認不可以點擊,沒有任何觸摸反饋
實現方法:
在CardView佈局文件節點添加
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
gif圖錄了看不出來就不放圖了QAQ
注意 對低版本的兼容處理
CardView在API 21以下,圓角效果會丟失:
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="25dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@mipmap/me"/>
</android.support.v7.widget.CardView>
不同安卓版本的效果:
- 可以看出很明顯API19(4.4)出現很大的問題:雖然有圓角效果,但是圖片四周是方的
解決方法:
- 在CardView佈局裏添加cardPreventCornerOverlap(默認是true)屬性,值爲false
cardPreventCornerOverlap官方文檔的意思是說在API20及更低版本中添加內邊距,其實這個屬性是爲了防止卡片內容和邊角的重疊
加了之後變成了這樣:
!!!!預警
這和以前竟然不一樣了,以前是圖片的直角壓在了卡片圓角上,而且直角還是在CardView外面,好吧,估計是Android官方優化了一下,現在是卡片效果但是會多出一條白邊,啊哈哈哈哈哈啊
大召喚術。。。。借用一張圖———
如果遇到這個問題去CardView在API 21以下的圓角效果處理
本篇完