Android 5.0 CardView+ListView 卡片布局应用

先看看效果图：

                

涉及技术点介绍

Android 5.0 CardView介绍：

public class CardView extends FrameLayout implements CardViewDelegate {}

CardView是一个ViewGroup，继承自FrameLayout类，可以在一个卡片布局中一致性的显示内容，卡片属性可以有设置圆角，设置卡片阴影，如上效果图。

怎样指定CardView的属性：
1、使用android:cardCornerRadius属性指定圆角半径
2、使用CardView.setRadius 设置圆角半径。
3、使用 android:cardBackgroundColor属性设置卡片颜色

4、使用card_view:cardElevation="10dp"设置阴影大小

5、使用cardView.setCardElevation(i);//shadow 阴影 设置阴影大小

android.widget.SeekBar类的使用

● 最大值的设置，调用setMax()方法。或者在布局文件设置：android:max="100"
● 现在进度值的设置，调用setProgress()方法。或者在布局文件设置：android:progress="60"
● 值变更事件处理的追加，调用setOnSeekBarChangeListener()方法，并传递OnSeekBarChangeListener()的实例。

● 设置一个缓冲的进度条：android:secondaryProgress 

核心代码如下：

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    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="com.troy.cardviews.CardActivity">

    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        card_view:cardCornerRadius="10dp"
        card_view:cardBackgroundColor="@android:color/white"
        card_view:cardElevation="10dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingBottom="@dimen/activity_vertical_margin"
            android:paddingTop="@dimen/activity_vertical_margin" >


            <ImageView
                android:id="@+id/img"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/b"
                android:layout_centerHorizontal="true"
                android:scaleType="fitCenter" />

            <TextView
                android:id="@+id/text_desc"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/img"
                android:layout_centerHorizontal="true"
                android:text="This is a card view"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>

    <SeekBar
        android:layout_below="@+id/card_view"
        android:id="@+id/seek1"
        android:layout_marginTop="10dp"
        android:layout_width="150dp"
        android:layout_height="30dp"
        android:max="100"
        android:layout_alignRight="@+id/card_view"
        android:layout_alignEnd="@+id/card_view"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <SeekBar
        android:layout_below="@+id/seek1"
        android:id="@+id/seek2"
        android:max="100"
        android:layout_marginTop="10dp"
        android:layout_width="150dp"
        android:layout_height="30dp"
        android:layout_alignRight="@+id/card_view"
        android:layout_alignEnd="@+id/card_view"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

</RelativeLayout>

SeekBar动态改变CardView的阴影大小和圆角：

 seek1.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                /**参数分别代表：触发操作的SeekBar，当前的进度值，是否为用户自触发*/
                if (b) {
                    cardView.setRadius(i);//圆角大小设置
                }
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                /**开始拖动时触发操作*/
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                /**结束拖动时触发操作*/
            }
        });

添加CardView到ListView中：

 /*ListView适配器**/
    public class ListViewAdapter extends BaseAdapter {
        ArrayList<Bean> beans = new ArrayList<Bean>();

        public ListViewAdapter(ArrayList<Bean> beans) {
            this.beans = beans;
        }

        public int getCount() {
            return beans.size();
        }

        public Object getItem(int position) {
            return beans.get(position);
        }

        public long getItemId(int position) {
            return position;
        }

        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder holder=null;
            LayoutInflater inflater = (LayoutInflater)ListActivity.this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            /*View复用*/
            if (convertView == null){
                convertView=inflater.inflate(R.layout.item_list, null);
                holder=new ViewHolder();
                // 通过findViewById()方法实例R.layout.item_list内各组件
                holder.text = (TextView) convertView.findViewById(R.id.title);
                holder.image = (ImageView) convertView.findViewById(R.id.img);
                convertView.setTag(holder);
            }
            holder=(ViewHolder)convertView.getTag();
            // 给holder中的控件进行赋值
            Bean bean=beans.get(position);
            holder.text.setText(bean.getTitle());
            holder.image.setImageResource(bean.getImgId());
            return convertView;
        }
    }

    class ViewHolder{
        ImageView image;
        TextView text;
    }

 源码下载