Material Design之CardView的使用
Posted jzdwajue
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Material Design之CardView的使用相关的知识,希望对你有一定的参考价值。
本文介绍CardView这个控件的使用,CardView继承至FrameLayout类,是support-v7包下的一个类,使用时必须引入cardview依赖包。可在下载的sdk目录中找到。。
。
使用CardView能够实现卡片式布局效果,很好看。卡片还能够包括圆角、阴影、背景。
CardView是一个ViewGroup,布局时包括其他的View从而实现优雅界面效果。
首先来看看个界面效果:
是不是非常美丽啊!事实上使用起来非常easy。把它作为一个普通的Layout使用就可以。
例如以下:
<android.support.v7.widget.CardView android:id="@+id/card_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" app:cardBackgroundColor="#ffffff" app:cardCornerRadius="10dp" app:cardElevation="8dp"> <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="40dp" android:text="CardView" android:textSize="20sp" /> </android.support.v7.widget.CardView>这个相应的效果就是刚刚图片上的第一个效果。
其他的亦是如此,就不多说了。这里为了看看CardView效果就仅仅简单的加了一个TextView作为演示。
整个布局activity_main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <android.support.v7.widget.CardView android:id="@+id/card_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" app:cardBackgroundColor="#ffffff" app:cardCornerRadius="10dp" app:cardElevation="8dp"> <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="40dp" android:text="CardView" android:textSize="20sp" /> </android.support.v7.widget.CardView> <android.support.v7.widget.CardView android:id="@+id/card_view2" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" app:cardBackgroundColor="#303069" app:cardCornerRadius="10dp" app:cardElevation="8dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="40dp" android:text="CardView" android:textSize="20sp" /> </android.support.v7.widget.CardView> <android.support.v7.widget.CardView android:id="@+id/card_view3" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" app:cardBackgroundColor="#ffffff" app:cardCornerRadius="8dp" app:cardElevation="5dp"> <ImageView android:id="@+id/imageView" android:layout_width="match_parent" android:layout_height="wrap_content" android:scaleType="fitXY" android:src="@mipmap/bg" /> </android.support.v7.widget.CardView> </LinearLayout>
设置CardView的点击事件和其他控件一样:
CardView mCardView = (CardView) findViewById(R.id.card_view); mCardView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this,"点击了CardView",Toast.LENGTH_LONG).show(); } });
以下主要介绍一下在CardView中比較重要的经常使用属性:
app:cardElevation
阴影的高度app:cardMaxElevation
阴影最大高度app:cardBackgroundColor
卡片的背景色app:cardCornerRadius
卡片的圆角大小app:contentPadding
卡片内容于边距的间隔app:contentPaddingBottom
app:contentPaddingTop
app:contentPaddingLeft
app:contentPaddingRight
app:contentPaddingStart
app:contentPaddingEnd
app:cardUseCompatPadding
设置内边距。V21+的版本号和之前的版本号仍旧具有一样的计算方式app:cardPreventConrerOverlap
在V20和之前的版本号中加入内边距,这个属性为了防止内容和边角的重叠
contentPadding
这个意思我们来看一张效果图你就明确了:
设置:
app:contentPadding="20dp"效果:
cardUseCompatPadding
设置:
app:cardUseCompatPadding="true"效果:
我们从布局预览中能够看出。设置这个后布局往里面缩小了一点。即有一点填充。
好了,CardView就是那么简单!
。!
以上是关于Material Design之CardView的使用的主要内容,如果未能解决你的问题,请参考以下文章
Android Material Design控件使用——CardView和SnackBar使用
Android----Material Design之(FloatActionButton,CoordinatorLayout,CollapsingToolbarLayout,AppBarLayout
Android基础知识——Material Design实战