使用CardView實現圓角或圓形的效果
前言
CardView是Android 5.0 中一種全新的控制元件,可以實現圓角和陰影效果。
新增依賴
compile ‘com.android.support:cardview-v7:23.4.0’
開始使用
CardView是一個新增的UI控制元件。我們通過原始碼可以看出:
public class CardView extends FrameLayout{…}
它繼承了FrameLayout佈局,所以我們可以把它當成一個容器來使用。
常用屬性
CardView_cardBackgroundColor:設定背景色
CardView_cardCornerRadius:設定圓角角度大小
CardView_cardElevation:設定z軸陰影大小
CardView_cardMaxElevation:設定z軸最大高度值
CardView_cardUseCompatPadding:是否使用CompadPadding,設定內邊距,v21+的版本和之前的版本仍舊具有一樣的計算方式
CardView_cardPreventCornerOverlap:是否使用PreventCornerOverlap,在v20和之前的版本中新增內邊距,這個屬性是為了防止卡片內容和邊角的重疊
CardView_contentPadding:內容的padding
CardView_contentPaddingLeft:內容的左padding
CardView_contentPaddingTop:內容的上padding
CardView_contentPaddingRight:內容的右padding
CardView_contentPaddingBottom:內容的底padding
佈局檔案
<android.support.v7.widget.CardView
android:layout_width="@dimen/margin_84"
android:layout_height="@dimen/margin_68"
app:cardCornerRadius="@dimen/margin_5"
app:cardElevation="0dp"
app:cardUseCompatPadding="false" >
<ImageView
android:id="@+id/voucher_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="@drawable/loadingimage" />
</android.support.v7.widget.CardView>
簡單實現圓形ImageView
設定CardView寬高相等,CardView設定圓角的半徑為寬高的一半,就是一個圓形效果了。例如:
<android.support.v7.widget.CardView
android:id="@+id/cv_img_activity"
android:layout_width="200dp"
android:layout_height="200dp"
app:cardCornerRadius="100dp"
app:cardElevation="10dp"
app:cardPreventCornerOverlap="true">
<ImageView
android:id="@+id/iv_cv_img_activity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"/>
</android.support.v7.widget.CardView>