CardView

简介

Android 5.0版本中新增了CardView,CardView继承自FrameLayout类,可以在一个卡片布局中一致性的显示内容,卡片可以包含圆角和阴影。也可以布局其他View。Google用一句话介绍了CardView:一个带圆角和阴影背景的FrameLayout。
请注意:CardView被包装为一种布局,并且经常在ListView和RecyclerView的Item布局中,作为一种容器使用。
在AndroidStudio配置android.support.v7包:
在Gradle中添加CardView包的依赖即可进行使用:
compile 'com.android.support:cardview-v7:21.0.+'

1.CardView常用属性
card_view:cardElevation 阴影的大小(设置z轴阴影)
card_view:cardMaxElevation 阴影最大高度(设置z轴最大高度值)
card_view:cardBackgroundColor 卡片的背景色
card_view:cardCornerRadius 卡片的圆角大小(半径)
card_view:contentPadding 卡片内容于边距的间隔
card_view:contentPaddingBottom 卡片内容与底部的边距
card_view:contentPaddingTop 卡片内容与顶部的边距
card_view:contentPaddingLeft 卡片内容与左边的边距
card_view:contentPaddingRight 卡片内容与右边的边距
card_view:contentPaddingStart 卡片内容于边距的间隔起始
card_view:contentPaddingEnd 卡片内容于边距的间隔终止
card_view:cardUseCompatPadding 设置内边距,V21+的版本和之前的版本仍旧具有一样的计算方式(是否使用CompadPadding)
card_view:cardPreventConrerOverlap 在V20和之前的版本中添加内边距,这个属性为了防止内容和边角的重叠(是否使用PreventCornerOverlap)

使用

1)普通使用效果


        


2)增加背景色和圆角的效果,注意我们此时使用background属性是没效果的:


        


3)设置z轴阴影


        


4)Ripple效果:点击时的涟漪效果


        


5)lift_on_touch:Cards、Button等视图应该有一个触摸抬起(lift-on-touch)的交互效果,也就是在三维立体空间上的Z轴发生位移,从而产生一个阴影加深的效果,与Ripple效果共同使用.
//tools:targetApi写不写都行
        


  @drawable/lift_on_touch:在res/drawable目录下创建lift_on_touch.xml文件,代码如下:


    
        
            
        
    
    
        
            
        
    


注意

lift-on-touch效果实现:
    即通过属性动画动态改变translationZ值,沿着Z轴,从0dp到6dp变化。然后将其赋值给 android:stateListAnimator 属性即可。由于 stateListAnimator 属性只适用于Lollipop及以上版本,为了隐藏xml中的版本警告,可以指定 tools:targetApi="lollipop" 。
    关于这个功能,需要补充说明一点。这里的 lift_on_touch.xml ,严格意义上来讲,属于anim资源,同时适用于API 21及以上版本,所以按道理上来讲应该将其放置在 res/anim-v21 目录下,然后使用 @anim/lift_on_touch 赋值给 stateListAnimator 属性,而不是例子中的 @drawable/lift_on_touch 方法。但是放置在 res/anim-v21 目录下会产生一个“错误”提示:
    XML file should be in either “animator” or “drawable”,not “anim”
    虽然这个“错误”不影响编译运行,但是对于追求完美主义的程序员们来说还是碍眼,所以本例中我选择将其放在了 res/drawable 目录下,大家可以自行斟酌使用。

下面是具体实现效果
主布局写

package com.example.mycardview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.BaseAdapter;
import android.widget.ListView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.HashMap;

public class MainActivity extends AppCompatActivity {

  ListView listView;
  ArrayList> arrayList = new ArrayList<>();

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
//    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_main);
    init();
  }

  void init() {
    for (int i = 0; i < 20; i++) {
      HashMap map = new HashMap<>();
      map.put("title", "我是标题" + i);
      map.put("data", "我是内容" + i);
      arrayList.add(map);
    }
    listView = (ListView) findViewById(R.id.listview);
    listView.setAdapter(new MyAdapter());
  }

  class MyAdapter extends BaseAdapter {

    @Override
    public int getCount() {
      return arrayList.size();
    }

    @Override
    public Object getItem(int i) {
      return arrayList.get(i);
    }

    @Override
    public long getItemId(int i) {
      return 0;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
      View v = View.inflate(MainActivity.this,R.layout.adapter,null);
      TextView txTitle = v.findViewById(R.id.textView);
      txTitle.setText(arrayList.get(i).get("title"));
      TextView txData = v.findViewById(R.id.textView2);
      txData.setText(arrayList.get(i).get("data"));
      return v;
    }
  }
}

主xml写




  


重点是适配器



  

    
      
      
        
        
      
    
  

CardView_第1张图片
cardview和RecylerView效果图.png
CardView_第2张图片
cv设置z轴阴影效果图.png
CardView_第3张图片
cv增加背景色和圆角的效果.png

你可能感兴趣的:(CardView)