Android布局實現陰影效果

最近某個模塊的UI，設計想要卡片式陰影效果。之前查閱過資料，用傳統的xml方式作為布局的background

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 陰影圖片，android:left表示陰影圖片左邊到背景圖片左邊的距離
    android:top表示陰影圖片上邊到背景圖片上邊的距離-->
    <item   android:left="5dp"
        android:top="5dp">
        <shape>
            <corners android:radius="25dp"/>
            <solid android:color="#60000000"/>
        </shape>
    </item>
    <!-- 背景圖片，android:right表示陰影圖片右邊到背景圖片右邊的距離
    android:bottom表示陰影圖片下邊到背景圖片下邊的距離-->
    <item   android:bottom="5dp"
        android:right="5dp">
        <shape>
            <corners android:radius="25dp"/>
            <solid android:color="#000000"/>
        </shape>
    </item>
</layer-list>

　　但是這樣有一個缺陷，細看就會發現這個陰影是實邊的，沒有虛化的效果，影響用戶體驗，非設計師想要的UI效果。

      所以換第二種方法，改用MaterialDesign設計理念的CardView實現。CardView繼承至FrameLayout類，是support-v7包下的一個類，使用時必須引入cardview依賴包。

 

<android.support.v7.widget.CardView
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_below="@+id/v_margin_top"
   app:cardCornerRadius="4dp"
   app:cardElevation="3dp"
   app:cardUseCompatPadding="true">
   <---你的布局--->

</android.support.v7.widget.CardView>

　以下是CardView的一些常用屬性：

> 1、android:cardCornerRadius 在xml文件中設置card圓角的大小 > 2、CardView.setRadius在代碼中設置card圓角的大小 > 3、android:cardBackgroundColor 在xml文件中設置card背景顏色 > 4、card_view:cardElevation在xml文件中設置陰影的大小 > 5、card_view:cardMaxElevation 在xml文件中設置陰影最大高度 > 6、card_view:cardCornerRadius 在xml文件中設置卡片的圓角大小 > 7、card_view:contentPadding 在xml文件中設置卡片內容於邊距的間隔 > 8、card_view:contentPaddingBottom 在xml文件中設置卡片內容於下邊距的間隔 > 9、card_view:contentPaddingTop 在xml文件中設置卡片內容於上邊距的間隔 > 10、card_view:contentPaddingLeft 在xml文件中設置卡片內容於左邊距的間隔 > 11、card_view:contentPaddingRight 在xml文件中設置卡片內容於右邊距的間隔 > 12、card_view:contentPaddingStart 在xml文件中設置卡片內容於邊距的間隔起始 > 13、card_view:contentPaddingEnd 在xml文件中設置卡片內容於邊距的間隔終止 > 14、card_view:cardUseCompatPadding 在xml文件中設置內邊距，V21+的版本和之前的版本仍舊具有一樣的計算方式 > 15、card_view:cardPreventCornerOverlap 在xml文件中設置內邊距，在V20和之前的版本中添加內邊距，這個屬性為了防止內容和邊角的重疊

 

　　需要注意的是cardElevation設置好陰影后相當於為布局上下左右增加了margin，所以寫一些列表式布局時要注意修改列表間距。

   By  LiYing