"Android" 10.4 card View

Category: C #, Android, VS2015;

Date Created: 2016-02-19 I. INTRODUCTION

Android starts with 5.0 with a brand new card view widget, which defaults to a white card with rounded corners and slight shading, called a card view.

1. Need to install Xamarin.Android.Support.v7.CardView package

CardView is provided by the Android support V7 supporting library, and when you write an android application in C #, the Xamarin.Android.Support.v7.CardView package must be included in the project to use CardView.

See section 10.2 For details on how to add a package.

2. Common Properties of CardView

(1) Layout properties

You can set its padding, elevation, fillet radius, background color, and other properties to specify the layout of the CardView. Each property can also dynamically change the layout by calling the corresponding CardView method. Note These properties accept dimension values in addition to the background color, for example, 11.5DP specifies 11.5 density-independent pixels.

(2) Padding

The CardView provides five padding properties to locate the inner margin of a card. You can set it in an XML layout, or you can call a similar method in your code:

(3) Elevation

The CardView provides two elevation attributes:

Where cardelevation represents the z-axis shadow size of CardView, cardmaxelevation represents the maximum z-axis shadow for CardView.

Elevation (elevation) means that when you increase the value of cardelevation to make the shadow larger, the CardView appears to hover over the shadow background. The Cardelevation property can also determine the drawing order in the overlapping view, and a larger value of Cardelevation overrides the cardelevation of the smaller value.

Cardmaxelevation is useful for dynamically changing cardelevation, which prevents shadows from expanding to a higher limit than the maximum value.

(4) Fillet radius and background color

You can use the fillet radius and background color to control the overall style of the CardView:

These properties are as follows:

cardcornerradius--the CardView fillet radius of each corner.

The background color of the Cardbackgroundcolor--cardview.

For example, set Cardcornerradius to 10DP and Cardbackgroundcolor to "#FFFFCC" (yellowish color).

3. You must specify a namespace for CardView in XML

Because CardView is provided by the Android Support V7 Library, it is not possible to get or set its properties directly from the Android namespace. In other words, you must customize an XML namespace as a prefix for the CardView property. For example, the following code declares a namespace named "CardView":

xmlns:cardview= "Http://schemas.android.com/apk/res-auto"

The name of the namespace is your own, and the scope of this namespace is limited to this file.

After you specify a namespace, you can modify the properties of the CardView by this prefix:

<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"

xmlns:card_view= "Http://schemas.android.com/apk/res-auto"

......>

<android.support.v7.widget.cardview

Android:layout_width= "Fill_parent"

android:layout_height= "245DP"

Android:layout_gravity= "Center_horizontal"

cardview:cardelevation= "4DP"

cardview:cardcornerradius= "5DP"/>

</linearlayout>

4. Use Cadview under Androd 4.4.2 (Api 19)

There are slightly different behaviors when using CardView on devices that are less than API21:

• You need to add extra padding to let the CardView render shadows.
• CardView does not cut a child view that intersects with the CardView fillet.

To address these compatibility differences, CardView provides two additional properties:

• cardpreventcorneroverlap– This property to true to implement a shadow fill in an application running on a version that is lower than api21, which prevents cardview content from intersecting cardview fillets.
• cardusecompatpadding– you need to set this property to True if you want to use CardView on a device that is lower than Android 5.0 and want it to look the same as if it was running on Android 5.0 or later. When this property is enabled, CardView adds extra padding to the lower version of the device to draw shadows, which helps to overcome the differences in the shading effects of different versions of the fill.

In addition to these differences, other design steps are the same as the design steps under Android 6.0. Second, example-ch1002cardviewdemo

1. Operation

2. Main design Steps

(1) Installing the Xamarin.Android.Support.v7.CardView package

See section 10.2 for specific installation methods.

(2) Add Ch1002_cardviewdemo.axml file

Add the file under the Resources/layout folder.

<?XML version= "1.0" encoding= "Utf-8"?><LinearLayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Xmlns:cardview= "Http://schemas.android.com/apk/res-auto"Android:paddingbottom= "16DP"Android:paddingtop= "16DP"Android:paddingleft= "16DP"Android:paddingright= "16DP"android:orientation= "vertical"Android:layout_width= "Fill_parent"Android:layout_height= "Fill_parent">    <Android.support.v7.widget.CardViewAndroid:id= "@+id/cardview1"Android:layout_width= "Fill_parent"Android:layout_height= "Wrap_content"cardview:cardelevation= "100DP"Cardview:cardpreventcorneroverlap= "true"Cardview:cardbackgroundcolor= "#71C3DE"Cardview:cardcornerradius= "8DP"Android:layout_margintop= "48DP"Android:layout_marginleft= "32DP"Android:layout_marginright= "32DP">        <TextViewAndroid:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"Android:layout_margin= "16DP"Android:text= "\ n This is the CardView widget, which can display the appearance of a card with rounded corners and shadows. \ n " />    </Android.support.v7.widget.CardView>    <LinearLayoutAndroid:layout_width= "Fill_parent"Android:layout_height= "Wrap_content"Android:layout_margintop= "32DP"android:orientation= "Horizontal">        <TextViewAndroid:layout_width= "70DP"Android:layout_height= "Wrap_content"android:layout_gravity= "Center_vertical"Android:text= "Radius" />        <SeekBarAndroid:id= "@+id/seekbarradius"Android:layout_width= "Fill_parent"Android:layout_height= "Wrap_content"Android:layout_margin= "16DP" />    </LinearLayout>    <LinearLayoutAndroid:layout_width= "Fill_parent"Android:layout_height= "Wrap_content"android:orientation= "Horizontal">        <TextViewAndroid:layout_width= "70DP"Android:layout_height= "Wrap_content"android:layout_gravity= "Center_vertical"Android:text= "Elevation" />        <SeekBarAndroid:id= "@+id/seekbarelevation"Android:layout_width= "Fill_parent"Android:layout_height= "Wrap_content"Android:layout_margin= "16DP" />    </LinearLayout></LinearLayout>

(3) Add Ch1002CardviewDemo.cs file

Add the file under the Srcdemos folder.

usingAndroid.app;usingAndroid.os;usingAndroid.widget;usingAndroid.Support.V7.Widget;namespacemydemos.srcdemos{[Activity (Label=""Example 10-2" card View basic usage")]     Public classch1002cardviewdemo:activity {protected Override voidOnCreate (Bundle savedinstancestate) {Base.            OnCreate (savedinstancestate);            Setcontentview (Resource.Layout.ch1002_CardviewDemo); varCardView = findviewbyid<cardview>(RESOURCE.ID.CARDVIEW1); varSeekbarradius = findviewbyid<seekbar>(Resource.Id.seekbarRadius); Seekbarradius.progresschanged+ = (s, e) = ={CardView. Radius=e.progress;            }; varSeekbarelevation = findviewbyid<seekbar>(Resource.Id.seekbarElevation); Seekbarelevation.progresschanged+ = (s, e) = ={CardView. Elevation=e.progress;        }; }    }}

"Android" 10.4 card View