CardView Card view,

CardView Card view,

Another newly added control of Android 5.0, CardView

1. Add the CardView package dependency to Gradle:

compile 'com.android.support:cardview-v7:21.0.+'

2. Basic usage:

CardView is a newly added UI control. First, we define a CardView variable in the code, and then check the source code to see what this is. Source code first:

public class CardView extends FrameLayout implements CardViewDelegate {              ...  } 

From the source code, CardView inherits FrameLayout, so CardView is a ViewGroup. We can add some controls in it for layout. Since CardView inherits FrameLayout, and Android already has the FrameLayout layout, why do we still use the CardView layout control? Let's take a look at the official website's comments on this category:

A FrameLayout with a rounded corner background and shadow.

3. added the following attributes for CardView:

• CardView_cardBackgroundColor: Set the background color.
• CardView_cardCornerRadius
• CardView_cardElevation
• CardView_cardMaxElevation: set the maximum zaxis height.
• CardView_cardUseCompatPadding whether CompadPadding is used
• CardView_cardPreventCornerOverlap whether to use PreventCornerOverlap
• Padding of CardView_contentPadding content
• Left padding of CardView_contentPaddingLeft content
• CardView_contentPaddingTop content on padding
• Right padding of CardView_contentPaddingRight content
• Bottom padding of CardView_contentPaddingBottom content

Card_view: cardUseCompatPadding sets the padding. The V21 + version and the previous version still have the same calculation method.

Card_view: cardPreventConrerOverlap adds padding in V20 and earlier versions to prevent overlap between content and corners

4. Use:
1. Common Use Effect

<Android. support. v7.widget. cardView android: layout_width = "match_parent" android: layout_height = "wrap_content"> <TextView android: layout_width = "match_parent" android: layout_height = "70dp" android: text = "normal use effect" android: gravity = "center_horizontal | center_vertical" android: textColor = "#000000" android: textSize = "20sp" android: padding = "10dp" android: layout_margin = "10dp"/> </android. support. v7.widget. cardView>

:

2. Add the background color and rounded corner. Note that the background attribute is ineffective at this time:

<android.support.v7.widget.CardView          android:layout_width="match_parent"          android:layout_height="wrap_content"          app:cardBackgroundColor="#669900"          app:cardCornerRadius="10dp">          ...  </android.support.v7.widget.CardView>  

:

3. Set the zaxis shadow.

<android.support.v7.widget.CardView    android:layout_width="match_parent"    android:layout_height="wrap_content"    app:cardBackgroundColor="#669900"    app:cardElevation="20dp"    app:cardCornerRadius="10dp">    ...</android.support.v7.widget.CardView>

:

4. ListView and RecyclerView must also have good results. Now we will use: first, define the layout of RecyclerView items:

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"          xmlns:app="http://schemas.android.com/apk/res-auto"          app:cardBackgroundColor="#80cbc4"          app:cardCornerRadius="10dp"          app:cardPreventCornerOverlap="true"          app:cardUseCompatPadding="true"          android:layout_width="match_parent"          android:layout_height="wrap_content">          <RelativeLayout              android:layout_width="match_parent"              android:layout_height="100dp"              android:padding="5dp">              <ImageView                  android:id="@+id/picture"                  android:layout_width="match_parent"                  android:layout_height="match_parent"                  android:layout_centerInParent="true"                  android:scaleType="centerCrop" />              <TextView                  android:clickable="true"                  android:id="@+id/name"                  android:layout_width="match_parent"                  android:layout_height="match_parent"                  android:layout_marginBottom="10dp"                  android:layout_marginRight="10dp"                  android:gravity="right|bottom"                  android:textColor="@android:color/white"                  android:textSize="24sp" />          </RelativeLayout>    </android.support.v7.widget.CardView>