當前位置:編程學習大全網 - 源碼下載 - 01 CardView-使用

01 CardView-使用

Material Design中有壹種很個性的設計概念:卡片式設計(Cards),Cards擁有自己獨特的UI特征,關於Cards的設計規範可以參考官網介紹: cards-usage Google在v7包中引進了壹種全新的控件CardView,用來實現這種 Cards UI 的設計.

CardView繼承自FrameLayout,它是壹個帶 圓角 背景和 陰影 的FrameLayout. CardView官方文檔

壹、簡單使用

使用前添加依賴:

compile 'com.android.support:cardview-v7:25.3.1'

1、使用

CardView本質上屬於FrameLayout,不同的是,它多了很多"特效"(圓角、陰影等).

可以看見,被CardView包裹的ImageView有明顯的圓角和陰影,這就是CardView最重要的兩條屬性了.

app:cardCornerRadius=" " 圓角的半徑,效果就是上面四個角的弧度

app:cardElevation=" " 陰影大小

2、關於Z軸的概念

Android5.0 引入了Z軸的概念,可以讓組件呈現3D效果.看下面這幅圖:

圖中的FAB( FloatingActionButton )很明顯是浮在界面上的,這就是Z軸的效果.

Z屬性 可以通過elevation和translationZ進行修改 Z= elevation+translationZ

android:elevation=" " 設置該屬性使控件有壹個陰影,感覺該控件像是“浮”起來壹樣,達到3D效果

android:translationZ="" 設置該組件陰影在Z軸(垂直屏幕方向)上的位移

5.0之前 ,我們如果想給View添加陰影效果,以體現其層次感,通常的做法是給View設置壹個帶陰影的背景圖片.在 5.0之後 ,我們只需要簡單的修改View的 Z屬性 ,就能讓其具備陰影的層次感,不過要求版本至少5.0 Lollipop,也就是API21.

Android Design Support Library support -v7 中壹些組件已經封裝好了Z屬性,不需要5.0 就可以使用.

像 FloatingActionButton 就可以通過app:elevation=" "使用Z屬性,CardView可以通過app:cardElevation=" " 來使用.關於Z軸的更多介紹,可以觀看 官方:定義陰影與裁剪視圖 .

二、CardView的常用屬性

1、設置背景顏色

app:cardBackgroundColor=" "

2、設置padding

app:contentPadding=" "app:contentPaddingTop=" "app:contentPaddingBottom=" "app:contentPaddingLeft=" "app:contentPaddingRight=" "

Tips: 上面是CardView設置背景顏色和padding的方式,如果妳直接通過android:padding=" " 和android:background=" "設置,是無效的.

3、設置Z軸的最大高度

app:cardMaxElevation=" "

4、點擊之後的漣漪效果

android:clickable="true"android:foreground="?android:attr/selectableItemBackground"Tips:如果妳給CardView設置了點擊事件,就不需要設置android:clickable="true"了

如果妳的CardView是可點擊的,可以通過foreground屬性使用系統定義好的RippleDrawable: selectableItemBackground ,從而達到在5.0及以上版本系統中實現點擊時的漣漪效果(Ripple),如圖:

這個漣漪效果在5.0以上版本中才能展示,在低版本上是壹個普通的點擊變暗的效果.

三、兼容性問題

1、邊距問題

看下面兩幅圖:

在5.0之前的版本中設置了 app:cardElevation=" "後 CardView 會自動留出空間供陰影顯示,而5.0之後的版本中沒有預留空間. 官網也介紹了這種情況:

Before Lollipop, CardView adds padding to its content and draws shadows to that area. This padding amount is equal to maxCardElevation + (1 - cos45) * cornerRadius on the sides and maxCardElevation * 1.5 + (1 - cos45) * cornerRadius on top and bottom.

所以給CardView設置 Margin時需要兼容壹下,否則在低版本上每個卡片之間的距離會特別大,浪費屏幕空間. 解決方法1: 在res/values/dimens中設置壹個0dp的margin,這是為5.0之前版本使用的

<dimen name="cardview_margin">0dp</dimen>

在res/values-v21/dimens中設置壹個適合的margin,為陰影預留空間,這是為5.0之後版本使用的

<dimen name="cardview_margin">12dp</dimen>

最後,給CardView設置外邊距 android:layout_margin="@dimen/cardview_margin" ,這樣就解決了低版本中邊距過大浪費屏幕空間的問題了. 解決方法2: 直接給CardView設置該屬性:

app:cardUseCompatPadding="true" 讓CardView在不同系統中使用相同的padding值,為陰影預留空間

2、圓角問題

看下面兩幅圖:

>=5.0(Lollipop API 21)的版本 ,CardView會直接裁剪內容元素滿足圓角的需求.在 <5.0(Lollipop API 21)的版本 ,CardView為了使內容元素不會覆蓋CardView的圓角,會添加壹個 padding ,這樣壹來,如果CardView設置了背景顏色,就很難看了. 解決方法: 給CardView設置該屬性:

app:cardPreventCornerOverlap="false"這條屬性的意思是:是否阻止圓角被覆蓋,默認為true設為false後,padding效果就不存在了,同時圓角也被覆蓋了該屬性對5.X設備沒什麽影響.

四、小結

總的來說,如果在高版本中使用CardView還是很舒服的,很容易實現各種效果,低版本上兼容性還不是很好.

  • 上一篇:醫療保險藥房系統源代碼
  • 下一篇:如何炒股詳細步驟?
  • copyright 2024編程學習大全網