Material Design之CardView的使用

本文介绍CardView这个控件的使用,CardView继承至FrameLayout类,是support-v7包下的一个类,使用时必须引入cardview依赖包,可在下载的sdk文件夹中找到。。。

使用CardView可以实现卡片式布局效果,非常好看,卡片还可以包含圆角、阴影、背景。CardView是一个ViewGroup,布局时包含其它的View从而实现优雅界面效果。

首先来看看个界面效果:

Material Design之CardView的使用_第1张图片


是不是很漂亮啊!其实使用起来很简单,把它作为一个普通的Layout使用即可。如下:

 
        
    
这个对应的效果就是刚刚图片上的第一个效果。

其它的亦是如此,就不多说了,这里为了看看CardView效果就只简单的加了一个TextView作为演示。

整个布局activity_main.xml:



    
        
    

    
        
    

    
        
    




 
  设置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"
效果:

Material Design之CardView的使用_第2张图片


cardUseCompatPadding 

设置:

app:cardUseCompatPadding="true"
效果:

Material Design之CardView的使用_第3张图片

我们从布局预览中可以看出,设置这个后布局往里面缩小了一点,即有一点填充。



好了,CardView就是那么简单!!!




你可能感兴趣的:(Android,5.x,Material,Design,使用,符合Material,Design的设计小栈)