Android控件之CardView

CardView简介

CardView是Android 5.0引入的新控件，它被包装为一种布局，并且经常在ListView和RecyclerView的Item布局中，作为一种容器使用。

效果如下（获取了知乎日报的标题和图片）：

注：CardView适用于操作多于两种的场合（见此链接），本文的Demo操作只有一种，严格来说并不太适合，权且当做学习。

使用
首先添加依赖并Sync

dependencies{compile'com.android.support:appcompat-v7:25.2.0'compile'com.android.support:cardview-v7:25.2.0'}

layout/activity_main.xml代码如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.hust_twj.cardviewdemo.activity.MainActivity">    <ListView        android:id="@+id/id_listView"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:divider="@null"        android:dividerHeight="4dp" >    </ListView></LinearLayout>

可以在xml中设置CardView的各种属性，比如圆角半径cardCornerRadius，阴影cardElevation等，CardView作为容器的item.xml如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    xmlns:app="http://schemas.android.com/apk/res-auto">    <android.support.v7.widget.CardView        android:id="@+id/id_cardView"        android:layout_width="match_parent"        android:layout_height="80dp"        android:layout_marginLeft="10dp"        android:layout_marginRight="10dp"        android:layout_marginTop="5dp"        android:layout_marginBottom="5dp"        app:cardCornerRadius="5dp">        <LinearLayout            android:orientation="horizontal"            android:layout_width="match_parent"            android:layout_height="match_parent">            <ImageView                android:id="@+id/id_imageView"                android:layout_width="80dp"                android:layout_height="80dp" />            <TextView                android:id="@+id/id_textView"                android:gravity="center_vertical|left"                android:layout_width="0dp"                android:layout_height="80dp"                android:layout_weight="1"                android:textSize="16sp"                android:layout_marginLeft="10dp"/>        </LinearLayout>    </android.support.v7.widget.CardView></LinearLayout>

其他的与普通的ListView用法很类似，即创建Adapter，并重写getView()，然后设置ListView的Adapter。
MainActivity .java代码如下：

package com.example.hust_twj.cardviewdemo.activity;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.CardView;import android.widget.ListView;import com.example.hust_twj.cardviewdemo.R;import com.example.hust_twj.cardviewdemo.adapter.NewsAdapter;import com.example.hust_twj.cardviewdemo.network.LoadNewsTask;import com.example.hust_twj.cardviewdemo.network.NetworkState;public class MainActivity extends AppCompatActivity {    private ListView listView;    private CardView cardView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        listView = (ListView) findViewById(R.id.id_listView);        cardView = (CardView) findViewById(R.id.id_cardView);        NewsAdapter adapter = new NewsAdapter(this,R.layout.item);        listView.setAdapter(adapter);        if (NetworkState.checkNetworkConnection(this) == true){            new LoadNewsTask(adapter).execute();        }else {            NetworkState.noNetworkAlert(this);        }    }}

Adapter代码：

package com.example.hust_twj.cardviewdemo.adapter;import android.content.Context;import android.support.annotation.LayoutRes;import android.support.annotation.NonNull;import android.support.annotation.Nullable;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ArrayAdapter;import android.widget.ImageView;import android.widget.TextView;import com.bumptech.glide.Glide;import com.example.hust_twj.cardviewdemo.R;import com.example.hust_twj.cardviewdemo.javaBeans.News;import java.util.List;/** * Adapter * Created by hust_twj on 2017/3/9. */public class NewsAdapter extends ArrayAdapter<News>{    private LayoutInflater mLayoutInflater;    private  int resourceId;    public NewsAdapter(@NonNull Context context, @LayoutRes int resource) {        super(context, resource);        mLayoutInflater = LayoutInflater.from(context);        resourceId = resource;    }    public NewsAdapter(@NonNull Context context, @LayoutRes int resource, @NonNull List<News> objects) {        super(context, resource, objects);        mLayoutInflater = LayoutInflater.from(context);        resourceId = resource;    }    @NonNull    @Override    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {        ViewHolder viewHolder;        if (convertView == null){            viewHolder = new ViewHolder();            convertView = mLayoutInflater.inflate(R.layout.item, null);            viewHolder.imageView = (ImageView) convertView.findViewById(R.id.id_imageView);            viewHolder.textView = (TextView) convertView.findViewById(R.id.id_textView);            convertView.setTag(viewHolder);        }else {            viewHolder = (ViewHolder) convertView.getTag();        }        News news = getItem(position);        viewHolder.textView.setText(news.getTitle());        //viewHolder.imageView.setImageResource(news.getImage());        Glide                .with(viewHolder.imageView.getContext())                .load(news.getImage())                .into(viewHolder.imageView); //使用Glide加载图片        return convertView;    }    class  ViewHolder{        ImageView imageView;        TextView textView;    }}

参考：
1、http://www.25xt.com/appdesign/13221.html
2、https://material.io/guidelines/components/cards.html#
3、http://blog.csdn.net/program_developer/article/details/54583550