您的位置:首页 > 移动开发 > Android开发

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

2017-03-07 13:43 821 查看
今天简单用缓存优化方式实现了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之后的新控件,如其名,像卡片一样的控件。

public class CardView extends FrameLayout implements CardViewDelegate {  
            ...  
    }  

从代码来看,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进行操作和动态改变数据


补充:本文只用于记录日常学习过程以及供大家参考借鉴,不足之处和意见希望大家提出改正,谢谢大家。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: