Android5.0 新特性--CardView

说明

CardView是一个新增加的UI控件，它继承自FrameLayout,所以CardView是一个ViewGroup，我们可以在里面添加一些控件进行布局。

1.环境配置
（1）新建一个Project。在Gradle Scripts目录下打开第二个build.gradle(Module:app),注意不是第一个build.gradle(Project:CardViewDemo).

第一个build.gradle(Project:CardViewDemo)是整个工作空间的gradle.

第二个build.gradle(Module:app)是你的项目的gradle.所以你要在自己的项目中进行设置。

。

（2）打开第二个build.gradle(Module:app)，在dependencies中加入：compile ‘com.android.support:cardview-v7:21.0.0’. 如图所示：
。

如果出现图中的错误，则改为下图所示：

（3）完成后，选择Build–>Rebuild Project. 重新刷新整个工作空间。这样webview依赖包就添加到你的项目中了。在External Libraries中可以看到增加了不少包，如何所示：

2.简单的使用
CardView是一个卡片布局，布局可以包含圆角和阴影，本质上CardView是一个FrameLayout，因此它作为一个布局容器，可以布局其他的View。

CardView中常用的属性有：

1、 cardElevation:设置阴影的大小

2、 cardBackgroundColor:卡片布局的背景演示

3、 cardCornerRadius：卡片布局的圆角的大小

4、 conentPadding：卡片布局和内容之间的距离
实际效果如下图所示：‘

编写布局文件：

 <android.support.v7.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_margin="8dp"
        android:clickable="true"
        android:foreground="?android:selectableItemBackground"
        app:cardElevation="10dp"
        app:contentPadding="10dp"
        app:cardCornerRadius="5dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_toRightOf="@id/imageView"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="13611111111"
                    android:textColor="@android:color/black"
                    android:textSize="16sp" />

                </LinearLayout>

        </RelativeLayout>

    </android.support.v7.widget.CardView>

3.MainActivity的类Java文件

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_card_view);
mCardView = (CardView)findViewById(R.id.cardView);
}

CardView单独的用法很简单，接下来我们看看在ListView中怎么运用CardView.
照例先放上效果图：

工程图：

1.布局文件

 <android.support.v7.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_margin="8dp"
        android:clickable="true"
        android:foreground="?android:selectableItemBackground"
        app:cardElevation="10dp"
        app:contentPadding="10dp"
        app:cardCornerRadius="5dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_toRightOf="@id/imageView"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@android:color/black"
                    android:textSize="16sp" />

            </LinearLayout>

            <Button
                android:id="@+id/button"
                android:layout_alignParentRight="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/button_name"/>

        </RelativeLayout>

    </android.support.v7.widget.CardView>

这里增加了一个按钮控件，让CardView更加多样化。

activity_main.xml：

 <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        </ListView>

2.自定义Adapter
首先我们自定义一个适配器继承自BaseAdapter.

package com.example.adapter;

import android.content.Context;
import android.support.v7.app.AlertDialog;
import android.support.v7.widget.ButtonBarLayout;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import com.example.cardviewtwo.R;

import java.util.List;
import java.util.Map;

/**
 * Created by Administrator on 2016/7/9 0009.
 */
public class MyAdapter extends BaseAdapter {

    private List<Map<String,Object>> date;//数据集合
    private LayoutInflater layoutInflater;//视图容器
    private Context context;//运行上下文

    public MyAdapter(Context context,List<Map<String,Object>> date){
        this.context = context;
        this.date = date;
        this.layoutInflater = LayoutInflater.from(context);

    }

    @Override
    public int getCount() {
        return date.size();
    }
    /** 
     * 获得某一位置的数据 
     */  
    @Override
    public Object getItem(int position) {
        return date.get(position);
    }
    /** 
     * 获得唯一标识 
     */  
    @Override
    public long getItemId(int position) {
        return position;
    }


    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder;
        if(convertView == null){
            viewHolder = new ViewHolder();
            //获得组件，实例化组件
            convertView = layoutInflater.inflate(R.layout.item,null);
            viewHolder.imageView = (ImageView) convertView.findViewById(R.id.imageView);
            viewHolder.textView = (TextView) convertView.findViewById(R.id.title);
            viewHolder.button = (Button) convertView.findViewById(R.id.button);
            convertView.setTag(viewHolder);
        }else{
            viewHolder = (ViewHolder) convertView.getTag();
        }
         //绑定数据 viewHolder.imageView.setBackgroundResource((Integer)date.get(position).get("imageView"));
        viewHolder.textView.setText((String)date.get(position).get("textView"));
        viewHolder.button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //点击事件，点击按钮，弹出一个对话框。
               new AlertDialog.Builder(context)
                       .setTitle("Button")
                       .setMessage("触发按钮点击事件")
                       .show();
            }
        });
        return convertView;
    }
    /** 
     * 组件集合，对应list.xml中的控件 
     * @author Administrator 
     */  
   final class ViewHolder{

       public ImageView imageView;
       public TextView textView;
       public Button button;

    }
}

代码很简单，就是平时自定义ListView的Adapter的常用方法。
关于上面LayoutInflater的使用：在实际开发种LayoutInflater这个类还是非常有用的。它的作用类似
于 findViewById()，不同点是LayoutInflater是用来找layout下xml布局文件，并且会实例化！。
getView()的三个参数：position表示将显示的是第几行，covertView是从布局文件中inflate来的布
局。我们用LayoutInflater的方法将定义好的list.xml文件提取成View实例用来显示。然后将xml文件
中的各个组件实例化，这样便可以将数据对应到各个组件上了。但是按钮为了响应点击事件，需要为
它添加点击监听器，这样就能捕获点击事件。

3.Mainctivity的类Java文件

public class MainActivity extends AppCompatActivity {
    private ListView listView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView = (ListView) findViewById(R.id.listView);
        List<Map<String,Object>> list = getDate();
        listView.setAdapter(new MyAdapter(this,list));
    }

    public List<Map<String,Object>> getDate(){
        List<Map<String,Object>> list = new ArrayList<Map<String,Object>>();
        for(int i = 0;i<10;i++){
            Map<String, Object> map=new HashMap<String, Object>();
            map.put("imageView", R.mipmap.ic_launcher);
            map.put("textView", "这是一个标题"+i);
            list.add(map);
        }

        return list;
    }