Android學習整理 - 系列

目錄：

• 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

  
  
  10dp的陰影Elevation.png

30dp的Elevation（陰影）.png

• app:contentPadding CardView子布局與CardView邊界

ContentPadding為10dp效果 背景為紅

• app:cardUseCompatPadding 設置內邊距

  
  
  cardUseCompatPadding="true".png

cardUseCompatPadding_false.png

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>

不同安卓版本的效果：

Android7.0.png

Android4.4.png

• 可以看出很明顯API19(4.4)出現很大的問題：雖然有圓角效果，但是圖片四周是方的

解決方法：

• 在CardView布局里添加cardPreventCornerOverlap（默認是true）屬性，值為false

cardPreventCornerOverlap官方文檔的意思是說在API20及更低版本中添加內邊距，其實這個屬性是為了防止卡片內容和邊角的重疊

加了之后變成了這樣：

cardPreventCornerOverlap為false

！！！！預警

這和以前竟然不一樣了，以前是圖片的直角壓在了卡片圓角上，而且直角還是在CardView外面，好吧，估計是Android官方優化了一下，現在是卡片效果但是會多出一條白邊，啊哈哈哈哈哈啊

大召喚術。。。。借用一張圖---------

以前的效果

如果遇到這個問題去CardView在API 21以下的圓角效果處理

本篇完