零、前言
[1].CardView extends FrameLayout [2].一個帶圓角和陰影的FrameLayout,FrameLayout怎麼用,它就怎麼用 [3].依賴implementation 'com.android.support:cardview-v7:26.1.0'
CardView.gif
一、使用:
1.屬性一覽:
app:cardBackgroundColor 背景顏色 app:cardCornerRadius 圓角大小 app:cardElevation z軸陰影高度 app:cardMaxElevation z軸最大高度值 app:contentPadding 內容與邊距的間隔 app:contentPaddingLeft 內容與左邊的間隔 app:contentPaddingTop 內容與頂部的間隔 app:contentPaddingRight 內容與右邊的間隔 app:contentPaddingBottom 內容與底部的間隔 app:paddingStart 內容與邊距的間隔起始 app:paddingEnd 內容與邊距的間隔終止 app:cardUseCompatPadding 設置內邊距,在API21及以上版本和之前的版本仍舊具有一樣的計算方式 app:cardPreventConrerOverlap 在API20及以下版本中添加內邊距,這個屬性爲了防止內容和邊角的重疊 注意:CardView中使用android:background設置背景顏色無效。
2.可在style裏抽一下常用的卡片樣式:
<!--cardView常用配置--> <style name="MyBaseCard" parent="@style/CardView.Light"> <item name="cardPreventCornerOverlap">false</item> <item name="cardUseCompatPadding">true</item> <item name="cardElevation">9dp</item> <item name="cardCornerRadius">6dp</item> <item name="android:foreground">?attr/selectableItemBackground</item> <item name="cardBackgroundColor">#A0BDF4</item> </style>
3.使用:
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.CardView android:id="@+id/id_cv" style="@style/MyBaseCard" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="15dp" android:layout_marginTop="8dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.441" app:layout_constraintStart_toStartOf="parent"> <LinearLayout android:layout_width="200dp" android:layout_height="230dp" android:orientation="vertical"> <ImageView android:layout_gravity="center" android:id="@+id/id_img" android:layout_width="wrap_content" android:layout_height="180dp" android:padding="5dp" android:src="@mipmap/c1"/> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:background="#E8E9EA" android:gravity="center" android:padding="8dp" android:text="紅紅戰士" android:textColor="#FF0000"/> </LinearLayout> </android.support.v7.widget.CardView> </android.support.constraint.ConstraintLayout>
4.Activity:
public class V02_CardActivity extends AppCompatActivity { @BindView(R.id.id_cv) CardView mIdCv; @BindView(R.id.id_img) ImageView mIdImg; int count = 0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.a2_card); ButterKnife.bind(this); mIdCv.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { runAnima(); } }); } private void runAnima() { mIdCv.animate().translationX(100 + count).setDuration(1000).start(); count += 10; } }
二、後記
1.陰影Padding
CardView會自動添加一些額外的padding空間來繪製陰影部分, 這也導致了以V21爲界的不同系統上CardView的尺寸大小不同 app:cardUseCompatPadding="true"適配
2.圓角覆蓋:剪裁情況
app:cardPreventCornerOverlap="false"適配
3.點擊漣漪
android:foreground="?android:attr/selectableItemBackground"
本文由張風捷特烈原創,轉載請註明 更多安卓技術歡迎訪問:https://www.jianshu.com/c/004f3fe34c94 張風捷特烈個人網站,編程筆記請訪問:http://www.toly1994.com 你的喜歡與支持將是我最大的動力