CardView是一個(gè)視圖容器替蔬,繼承自FrameLayout,CardView像一張卡片相嵌,有陰影和圓角腿时,這些屬性也可以添加到其他視圖組中况脆。
CardView提供的可定制性包括CornerRadius,Elevation批糟,MaxElevation格了,ContentPadding,CompatPadding跃赚,PreventCornerOverlap和專(zhuān)用CardBackgroundColor笆搓,可以使用下面的代碼片段看一下效果:
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="250dp"
app:cardBackgroundColor="@android:color/white"
app:cardCornerRadius="0dp"
app:cardMaxElevation="1dp"
app:cardElevation="0.7dp"
app:contentPadding="10dp"
app:contentPaddingBottom="0dp"
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="true"
android:id="@+id/cardView">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:id="@+id/img"
android:src="@drawable/joshua_sortino"
android:contentDescription="CardImageViewDesc" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/img"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:fontFamily="sans-serif"
android:gravity="center_vertical"
android:text="Joshua Sortino - Via Unsplash"
android:textSize="18sp" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:background="?attr/selectableItemBackgroundBorderless"
android:src="@drawable/ic_favorite_border"
android:layout_below="@id/img"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp"
android:contentDescription="FavButtonDesc" />
</RelativeLayout>
</android.support.v7.widget.CardView>
添加CardView到項(xiàng)目中
添加如下的依賴(lài)項(xiàng)到build.gradle文件中
compile 'com.android.support:cardview-v7:26.0.0'
如果使用的是AndroidStudio 3.0以及以上,需要添加下面這個(gè)依賴(lài)項(xiàng)
implementation 'com.android.support:cardview-v7:26.0.0'
CardView 設(shè)置背景顏色
app:cardBackgroundColor="@android:color/white"
cardView.setCardBackgroundColor(Color.WHITE);
卡片圓角半徑
app:cardCornerRadius="0dp"
cardView.setRadius(0);
Card Elevation
卡片高度只是將卡片在z軸上的視圖提升到與所處傳值相同的高度纬傲,以前版本中是通過(guò)陰影來(lái)實(shí)現(xiàn)該效果满败,為內(nèi)容的邊添加padding
maxCardElevation + (1 - cos45) * cornerRadius
上下使用:
maxCardElevation * 1.5 + (1 - cos45) * cornerRadius
然后將陰影應(yīng)用于該空間,如果沒(méi)有手動(dòng)設(shè)置的話叹括,MaxCardElevation屬性將等于CardElevation算墨。
app:cardElevation="0.7dp"
app:cardMaxElevation="1dp"
cardView.setCardElevation(2.1f);
cardView.setMaxCardElevation(3f);
卡片內(nèi)容padding
如前所述,正常的CardView的padding用來(lái)創(chuàng)建繪制陰影的空間汁雷,因此我們使用content padding在邊和子視圖之間增加填充净嘀。
app:contentPadding="10dp"
app:contentPaddingBottom="0dp"
cardView.setContentPadding(30, 30, 30, 0);
卡片使用兼容填充
一個(gè)與填充有關(guān)的屬性,由于CardViews在Lollipop之前使用填充來(lái)繪制陰影侠讯,因此內(nèi)容區(qū)域在Lollipop之前和之后的平臺(tái)上會(huì)發(fā)生變化挖藏,為了確保所有平臺(tái)上的內(nèi)容區(qū)域保護(hù)不變,使用了兼容的Padding厢漩,他只是在Lollipop和之后的版本添加內(nèi)部填充膜眠。
app:cardUseCompatPadding="true"
cardView.setUseCompatPadding(true);
CardPreventCornerOverlap 避免角重疊
app:cardPreventCornerOverlap="true"
cardView.setPreventCornerOverlap(true);
用Java代碼代替上面的xml的代碼:
CardView cardView = (CardView) findViewById(R.id.cardView);
cardView.setUseCompatPadding(true);
cardView.setContentPadding(30, 30, 30, 0);
cardView.setPreventCornerOverlap(true);
cardView.setCardBackgroundColor(Color.WHITE);
cardView.setCardElevation(2.1f);
cardView.setRadius(0);
cardView.setMaxCardElevation(3f);
cardView.setCardElevation(dpToPx(0.7f));
和下面的效果一樣
cardView.setCardElevation(2.1f);