利用swipelistview完成qq聊天列表右滑删除功能
2015-11-27 11:00
393 查看
开启阅读模式
2014-11-23 18:35 2538人阅读 评论(4) 收藏 举报
![](http://static.blog.csdn.net/images/category_icon.jpg)
分类:
开源项目(1)
![](http://static.blog.csdn.net/images/arrow_triangle%20_down.jpg)
转载请注明出处:/article/8093717.html
前言:前段时间,由于自己比较悠闲,没有什么工作上的事情所做,所以当时就想,何不做一下qq聊天列表的item右滑出现后面的视图,然后我就开始着手自己做,之后无意间发现了可以利用一个github开源项目swiplistview完成,但是当我查看那些swiplistview的相关文档时,很不全面,github官网上下载的和之前他们写的文档已经有所不同,所以在这里我就重新来写一下怎么使用swiplistview的准备阶段。
之前的文档都是说,当从官网上下载下来后,有两个文件,一个是lib:android-swiplistview,另一个是例子:SwipListViewExampleActivity,但是现在下载后,解压后是这样的
![](http://img.blog.csdn.net/20141123201001750?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSGFycnlXZWFzbGV5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
显然已经和之前的不一样了,现在的官网上是用了gradle来构造Android程序,但我以前根本没有接触过gradle,所以只能自己去找以前的那个swiplistview。当时我也是纠结了很久,自己翻墙出去,各种Google,最后终于找到了,swiplistview,我之后会全部上传,共享给大家。
下面是qq的效果图:
![](http://img.blog.csdn.net/20141123200505553?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSGFycnlXZWFzbGV5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
下面是我这个项目的效果图:
![](http://img.blog.csdn.net/20141123200553180?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSGFycnlXZWFzbGV5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
现在我们进入正题:
我们一共需要两个jar包,一个swiplistview,如图所示:这三个下载地址http://download.csdn.net/detail/harryweasley/8190519
![](http://img.blog.csdn.net/20141123201827750?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSGFycnlXZWFzbGV5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
1. 引入android-swipelistview库:导入开源库,用Import选项,然后Android选项下的“Existing Android Code Into Workspace”引入库;在这里将“copy projects into workspace”前面打钩哦
2.引入android-swipelistview的依赖库nineoldandroids-2.4.0.jar:建立一个libs文件夹,将nineoldandroids-2.4.0.jar拷贝到libs文件夹之下;
3.引入android-swipelistview的依赖内部库android-support-v4.jar:项目的Android Tools选项,“Add Support Library”来增加android-support-v4库;(注:如果找不到对应的support库,可以通过SDK Manager来进行下载)
4.编译android-swipelistview库的jar包:项目的Properties选项,Android选项,勾选"Is Library";
5.编译android-swipelistview项目,在项目的bin目录应该能看到android-swipelistview.jar包。
这样,我们就完成了swiplistview的库了。
然后我们自己建立一个Android程序SwipListView进行测试,建好后,开始导入库,项目的Properties选项,Android选项,Library框选择add按钮添加swipelistview.jar包;
这里需要注意:swipelistview这个lib必须和SwiplistView在同一工作区间,否则导入的包前面会有红叉。如图所示
![](http://img.blog.csdn.net/20141123203256176?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSGFycnlXZWFzbGV5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
我们可以看下官网上关于SwipListView的描述
If you decide to use SwipeListView as a view, you can define it in your xml layout like this:
左滑的动作,默认reveal,即显示BackView,还有dismiss,choice会触发响应的方法。
'reveal' 同上
设置左滑、右滑、都支持
list motion. Default: 'true' 当滚动listview时,关闭所有展开的Item,最好不要设置为false,由于item的复用,false存在一些问题。
长按时触发显示
configuration 动画时间长度
上面是基本属性,下面开始上代码:
首先是activity_main.xml下的代码:
[java] view
plaincopy
<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"
tools:context=".MainActivity" >
<com.fortysevendeg.swipelistview.SwipeListView
xmlns:swipe="http://schemas.android.com/apk/res-auto"
android:id="@+id/example_lv_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
swipe:swipeActionLeft="reveal"
swipe:swipeBackView="@+id/id_back"
swipe:swipeCloseAllItemsWhenMoveList="true"
swipe:swipeFrontView="@+id/id_front"
swipe:swipeMode="left"
swipe:swipeOffsetLeft="200dip"
swipe:swipeOffsetRight="0dp"
swipe:swipeOpenOnLongPress="true" />
</RelativeLayout>
接下来是itm.xml的代码:
[java] view
plaincopy
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="60dp" >
<LinearLayout
android:id="@+id/id_back"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffcccccc"
android:gravity="center|right" >
<Button
android:id="@+id/id_remove"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="4dp"
android:background="@android:color/holo_green_light"
android:text="Delete"
android:textColor="#fff" >
</Button>
</LinearLayout>
<LinearLayout
android:id="@+id/id_front"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffffff" >
<TextView
android:id="@+id/id_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:gravity="center_vertical"
android:minHeight="?android:attr/listPreferredItemHeight"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#000"
android:textSize="25sp" >
</TextView>
</LinearLayout>
</FrameLayout>
这里要强调一下:对应布局的id和swipeListView中的frontView和backView的Id一致。
接下来是DataAdapter的代码
[java] view
plaincopy
package com.example.swiplistview;
import java.util.List;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.TextView;
import com.fortysevendeg.swipelistview.SwipeListView;
public class DataAdapter extends BaseAdapter{
private List<String> mDatas;
private LayoutInflater mInflater;
private SwipeListView mSwipeListView ;
public DataAdapter(Context context, List<String> datas , SwipeListView swipeListView)
{
this.mDatas = datas;
mInflater = LayoutInflater.from(context);
mSwipeListView = swipeListView;
}
@Override
public int getCount()
{
return mDatas.size();
}
@Override
public Object getItem(int position)
{
return mDatas.get(position);
}
@Override
public long getItemId(int position)
{
return position;
}
@Override
public View getView(final int position, View convertView, ViewGroup parent)
{
convertView = mInflater.inflate(R.layout.item, null);
TextView tv = (TextView) convertView.findViewById(R.id.id_text);
Button del = (Button) convertView.findViewById(R.id.id_remove);
tv.setText(mDatas.get(position));
del.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v)
{
mDatas.remove(position);
notifyDataSetChanged();
/**
* 关闭SwipeListView
* 不关闭的话,刚删除位置的item存在问题 ,不能再次点击
*/
mSwipeListView.closeOpenedItems();
}
});
return convertView;
}
}
最后是MainActivity的代码了,都比较简单:
[java] view
plaincopy
package com.example.swiplistview;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import com.fortysevendeg.swipelistview.BaseSwipeListViewListener;
import com.fortysevendeg.swipelistview.SwipeListView;
public class MainActivity extends Activity {
SwipeListView swipeListView;
List<String> mDatas;
DataAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mDatas = new ArrayList<String>();
for (int i = 0; i < 20; i++) {
mDatas.add("这是记录呢。。" + i);
}
swipeListView = (SwipeListView) findViewById(R.id.example_lv_list);
adapter = new DataAdapter(this, mDatas, swipeListView);
swipeListView.setAdapter(adapter);
swipeListView.setSwipeListViewListener(new BaseSwipeListViewListener() {
// 这里可以重写很多方法
@Override
public void onListChanged() {
super.onListChanged();
}
@Override
public void onClickFrontView(int position) {
super.onClickFrontView(position);
}
});
}
}
这样就大功告成了。
上面的都是最基本的功能,完成了上面的那些,然后我们就可以做相应的点击事件了。所以一起加油吧。
最后还有一个我在github下载的一个Demo,但并不是47deg的,是一个普通人写的,我给她上传了,下载地址http://download.csdn.net/detail/harryweasley/8190525
这里多说一下,你刚导入Eclipse时,会报一个不能解析android-14,你重启一下Eclipse,就好了。第二个问题,重启Eclipse后,bin文件里又有错误了,删除bin文件,Eclipse会重新自动生成一个,这样两个小bug就解决了。
利用swipelistview完成qq聊天列表右滑删除功能
2014-11-23 18:35 2538人阅读 评论(4) 收藏 举报![](http://static.blog.csdn.net/images/category_icon.jpg)
分类:
开源项目(1)
![](http://static.blog.csdn.net/images/arrow_triangle%20_down.jpg)
转载请注明出处:/article/8093717.html
前言:前段时间,由于自己比较悠闲,没有什么工作上的事情所做,所以当时就想,何不做一下qq聊天列表的item右滑出现后面的视图,然后我就开始着手自己做,之后无意间发现了可以利用一个github开源项目swiplistview完成,但是当我查看那些swiplistview的相关文档时,很不全面,github官网上下载的和之前他们写的文档已经有所不同,所以在这里我就重新来写一下怎么使用swiplistview的准备阶段。
之前的文档都是说,当从官网上下载下来后,有两个文件,一个是lib:android-swiplistview,另一个是例子:SwipListViewExampleActivity,但是现在下载后,解压后是这样的
显然已经和之前的不一样了,现在的官网上是用了gradle来构造Android程序,但我以前根本没有接触过gradle,所以只能自己去找以前的那个swiplistview。当时我也是纠结了很久,自己翻墙出去,各种Google,最后终于找到了,swiplistview,我之后会全部上传,共享给大家。
下面是qq的效果图:
下面是我这个项目的效果图:
现在我们进入正题:
我们一共需要两个jar包,一个swiplistview,如图所示:这三个下载地址http://download.csdn.net/detail/harryweasley/8190519
1. 引入android-swipelistview库:导入开源库,用Import选项,然后Android选项下的“Existing Android Code Into Workspace”引入库;在这里将“copy projects into workspace”前面打钩哦
2.引入android-swipelistview的依赖库nineoldandroids-2.4.0.jar:建立一个libs文件夹,将nineoldandroids-2.4.0.jar拷贝到libs文件夹之下;
3.引入android-swipelistview的依赖内部库android-support-v4.jar:项目的Android Tools选项,“Add Support Library”来增加android-support-v4库;(注:如果找不到对应的support库,可以通过SDK Manager来进行下载)
4.编译android-swipelistview库的jar包:项目的Properties选项,Android选项,勾选"Is Library";
5.编译android-swipelistview项目,在项目的bin目录应该能看到android-swipelistview.jar包。
这样,我们就完成了swiplistview的库了。
然后我们自己建立一个Android程序SwipListView进行测试,建好后,开始导入库,项目的Properties选项,Android选项,Library框选择add按钮添加swipelistview.jar包;
这里需要注意:swipelistview这个lib必须和SwiplistView在同一工作区间,否则导入的包前面会有红叉。如图所示
我们可以看下官网上关于SwipListView的描述
If you decide to use SwipeListView as a view, you can define it in your xml layout like this:
<com.fortysevendeg.swipelistview.SwipeListView xmlns:swipe="http://schemas.android.com/apk/res-auto" android:id="@+id/example_lv_list" android:listSelector="#00000000" android:layout_width="fill_parent" android:layout_height="wrap_content" swipe:swipeFrontView="@+id/front" swipe:swipeBackView="@+id/back" swipe:swipeActionLeft="[reveal | dismiss]" swipe:swipeActionRight="[reveal | dismiss]" swipe:swipeMode="[none | both | right | left]" swipe:swipeCloseAllItemsWhenMoveList="[true | false]" swipe:swipeOpenOnLongPress="[true | false]" swipe:swipeAnimationTime="[miliseconds]" swipe:swipeOffsetLeft="[dimension]" swipe:swipeOffsetRight="[dimension]" />
swipeFrontView- Required - front view id. 即ListView Item正常显示的控件Id,且必须与Item的布局文件中的控件id一样
swipeBackView- Required - back view id. 手指滑动时显示的,隐藏在FrontView后面,且必须与item的布局文件中控件Id一样
swipeActionLeft- Optional - left swipe action Default: 'reveal'
左滑的动作,默认reveal,即显示BackView,还有dismiss,choice会触发响应的方法。
swipeActionRight- Optional - right swipe action Default:
'reveal' 同上
swipeMode- Gestures to enable or 'none'. Default: 'both'
设置左滑、右滑、都支持
swipeCloseAllItemsWhenMoveList- Close revealed items on
list motion. Default: 'true' 当滚动listview时,关闭所有展开的Item,最好不要设置为false,由于item的复用,false存在一些问题。
swipeOpenOnLongPress- Reveal on long press Default: 'true'
长按时触发显示
swipeAnimationTime- item drop animation time. Default: android
configuration 动画时间长度
swipeOffsetLeft- left offset 左偏移量
swipeOffsetRight- right offset 右偏移量
上面是基本属性,下面开始上代码:
首先是activity_main.xml下的代码:
[java] view
plaincopy
<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"
tools:context=".MainActivity" >
<com.fortysevendeg.swipelistview.SwipeListView
xmlns:swipe="http://schemas.android.com/apk/res-auto"
android:id="@+id/example_lv_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
swipe:swipeActionLeft="reveal"
swipe:swipeBackView="@+id/id_back"
swipe:swipeCloseAllItemsWhenMoveList="true"
swipe:swipeFrontView="@+id/id_front"
swipe:swipeMode="left"
swipe:swipeOffsetLeft="200dip"
swipe:swipeOffsetRight="0dp"
swipe:swipeOpenOnLongPress="true" />
</RelativeLayout>
接下来是itm.xml的代码:
[java] view
plaincopy
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="60dp" >
<LinearLayout
android:id="@+id/id_back"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffcccccc"
android:gravity="center|right" >
<Button
android:id="@+id/id_remove"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="4dp"
android:background="@android:color/holo_green_light"
android:text="Delete"
android:textColor="#fff" >
</Button>
</LinearLayout>
<LinearLayout
android:id="@+id/id_front"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffffff" >
<TextView
android:id="@+id/id_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:gravity="center_vertical"
android:minHeight="?android:attr/listPreferredItemHeight"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#000"
android:textSize="25sp" >
</TextView>
</LinearLayout>
</FrameLayout>
这里要强调一下:对应布局的id和swipeListView中的frontView和backView的Id一致。
接下来是DataAdapter的代码
[java] view
plaincopy
package com.example.swiplistview;
import java.util.List;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.TextView;
import com.fortysevendeg.swipelistview.SwipeListView;
public class DataAdapter extends BaseAdapter{
private List<String> mDatas;
private LayoutInflater mInflater;
private SwipeListView mSwipeListView ;
public DataAdapter(Context context, List<String> datas , SwipeListView swipeListView)
{
this.mDatas = datas;
mInflater = LayoutInflater.from(context);
mSwipeListView = swipeListView;
}
@Override
public int getCount()
{
return mDatas.size();
}
@Override
public Object getItem(int position)
{
return mDatas.get(position);
}
@Override
public long getItemId(int position)
{
return position;
}
@Override
public View getView(final int position, View convertView, ViewGroup parent)
{
convertView = mInflater.inflate(R.layout.item, null);
TextView tv = (TextView) convertView.findViewById(R.id.id_text);
Button del = (Button) convertView.findViewById(R.id.id_remove);
tv.setText(mDatas.get(position));
del.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v)
{
mDatas.remove(position);
notifyDataSetChanged();
/**
* 关闭SwipeListView
* 不关闭的话,刚删除位置的item存在问题 ,不能再次点击
*/
mSwipeListView.closeOpenedItems();
}
});
return convertView;
}
}
最后是MainActivity的代码了,都比较简单:
[java] view
plaincopy
package com.example.swiplistview;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import com.fortysevendeg.swipelistview.BaseSwipeListViewListener;
import com.fortysevendeg.swipelistview.SwipeListView;
public class MainActivity extends Activity {
SwipeListView swipeListView;
List<String> mDatas;
DataAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mDatas = new ArrayList<String>();
for (int i = 0; i < 20; i++) {
mDatas.add("这是记录呢。。" + i);
}
swipeListView = (SwipeListView) findViewById(R.id.example_lv_list);
adapter = new DataAdapter(this, mDatas, swipeListView);
swipeListView.setAdapter(adapter);
swipeListView.setSwipeListViewListener(new BaseSwipeListViewListener() {
// 这里可以重写很多方法
@Override
public void onListChanged() {
super.onListChanged();
}
@Override
public void onClickFrontView(int position) {
super.onClickFrontView(position);
}
});
}
}
这样就大功告成了。
上面的都是最基本的功能,完成了上面的那些,然后我们就可以做相应的点击事件了。所以一起加油吧。
最后还有一个我在github下载的一个Demo,但并不是47deg的,是一个普通人写的,我给她上传了,下载地址http://download.csdn.net/detail/harryweasley/8190525
这里多说一下,你刚导入Eclipse时,会报一个不能解析android-14,你重启一下Eclipse,就好了。第二个问题,重启Eclipse后,bin文件里又有错误了,删除bin文件,Eclipse会重新自动生成一个,这样两个小bug就解决了。
相关文章推荐
- iOS 单元测试之XCTest详解(一),iosxctest
- 四、Camera显示之Hal层的适配(二)
- SSM整合中遇到的问题总结
- 转载:PHP,MySQL的安装与配置
- [ActionScript 3.0] Away3D 旋转效果
- JAVA与.NET的相互调用——通过Web服务实现相互调用
- 三个时间属性atime、mtime、ctime
- asp.net执行alter
- R语言——3
- Task,Thread ,ThreadPool。
- shell多线程
- 非安装的tomcat,如何注册成系统服务
- <15> go string_formatting
- LeetCode 112 Path Sum
- Android分享功能源码解读
- 在 Windows 環境下利用 VNC 遠端控管 Mac OS X Server
- 传值和传引用
- NLP 数据集整理(持续更新。。。)
- find命令相关使用方法
- Bugtags奉命解救宝贵的双手,务必将此文章转给你身边的程序猿