Android基础学习笔记之-ListView进阶用法（item圆角效果实现）

今天简单用缓存优化方式实现了listview的功能，下面让我们实现一下上篇文章留下来的改进方案：

    1）.实现item布局的圆角效果

    2）.对listview的item进行监听

首先，我们考虑一下该如何实现listview中item的圆角效果呢？

 1. 想法一：通过最普遍的方式-- shape属性定义来实现

这种方式需要在drawable目录下创建shape类型的xml文件来对圆角相关属性进行设置，说到做到，那么让我们来试一下看看吧：

先创建shape属性文件item_shape.xml：

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:Android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">

    <corners android:radius="12dp"

              />

    <solid android:color="#ff77"/>

    <stroke android:color="#22ddff"/>

 

</shape>

至于shape的相关属性如果不熟悉可以百度一下，设置好角度，填充颜色和线条之后，我们就放在布局当中用一下吧：

只需要在listview_item的布局文件最上面的父容器中加上

android:background="@drawable/item_shape"

即可，运行一下，发现item的间隔色彩影响美感，所以需要将listview的属性android:divider="#ffffff"就ok

关于listview的常用属性，大家可以看一下这个文章：http://blog.csdn.NET/avenleft/article/details/7334060

接下来运行一把看看效果吧：

感觉比之前文章中的效果好看了很多，看来这种shape方法是可以实现listview的item圆角效果的。

2.想法二：通过CardView来实现listview中item的圆角效果

首先让我们来认识一下CardView吧：

CardView是android5.0之后的新控件，如其名，像卡片一样的控件。

1. public class CardView extends FrameLayout implements CardViewDelegate {  
2.             ...  
3.     }  

从代码来看，CardView继承自FrameLayout，所以CardView是一个ViewGroup，里面可以添加多个控件。下面来看看它有哪些基本属性：

app:cardBackgroundColor这是设置背景颜色 
app:cardCornerRadius这是设置圆角大小 
app:cardElevation这是设置z轴的阴影 
app:cardMaxElevation这是设置z轴的最大高度值 
app:cardUseCompatPadding是否使用CompatPadding 
app:cardPreventCornerOverlap是否使用PreventCornerOverlap 
app:contentPadding 设置内容的padding 
app:contentPaddingLeft 设置内容的左padding 
app:contentPaddingTop 设置内容的上padding 
app:contentPaddingRight 设置内容的右padding 
app:contentPaddingBottom 设置内容的底padding

从属性来看，可以惊喜地发现里面含有设置圆角的相关属性，对，这就是我们为什么用cardview的原因，让我们来看看该如何将它应用到listview当中吧：

 首先导入CardView的控件包，以android studio为例，从project stucpture中点击加号，然后找到support.v7.widget.CardView包，等待依赖就好了。

然后新建一个listview_item_cardview布局文件，在里面添加相关属性，上面都有，这里直接上代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.CardView
        android:id="@+id/card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="#fedd99"
        app:cardCornerRadius="10dp"
        android:foreground="?attr/selectableItemBackground"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        app:cardElevation="10dp">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:orientation="horizontal">
            <ImageView
                android:id="@+id/img"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@mipmap/icon_withdraw_id_card"
                android:layout_marginLeft="12dp"
                android:layout_marginRight="12dp"/>
            <LinearLayout
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp">
                <TextView
                    android:id="@+id/name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="像风一样"
                    android:textSize="22sp"
                    />
                <TextView
                    android:id="@+id/message"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="今天有空吗？我们一起去游玩吧"
                    android:textSize="16sp"
                    />

            </LinearLayout>
        </LinearLayout>

其中

android:foreground="?attr/selectableItemBackground"表示点击cardview产生类似涟漪效果

下面就很简单了，由于依旧使用的上次的适配格式和数据，所以，只要把getview（）中的布局改成cardview布局的名字就可以了：

convertView = mInflater.inflate(R.layout.listview_item_cardview, null);
下面就来看看运行效果吧：

是不是有一种悬浮的卡片效果，比上一次运行效果好多了，而且使用还比用shape方便。

3.其他想法：

可以通过自定义view实现

4.实现listview的item响应效果

思路：为每个item增加点击菜单

实现：可以使用我们前面讲的ContextView实现item长按点击跳出菜单

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {//item点击设置
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        registerForContextMenu(view);//为item注册上下文菜单

    }
});
关于contextview的基本用法可以参考我前面的文章：http://blog.csdn.net/s1674521/article/details/60324163

那么让我们看看效果吧：

点击菜单项后大家可以增加对于item的操作内容，这里我只用Toast了一下：

好了，最终效果已经实现，感觉listview + cardview + menu 的组合用法可以用在后面的项目中

5.小结：

 1）.listview中的item内容可以更加丰富多彩一些，思考一下，如果涉及item实现不同页面效果该如何做？

 2）.CardView的立体卡片效果很不错，简单用法这边也已经基本实现，后面可以研究一下进阶方面的技巧

 3）.后面继续对listview的item中各个view进行操作和动态改变数据

补充：本文只用于记录日常学习过程以及供大家参考借鉴，不足之处和意见希望大家提出改正，谢谢大家。