利用swipelistview完成qq聊天列表右滑删除功能

转载请注明出处:http://blog.csdn.net/harryweasley/article/details/41413547

前言:前段时间,由于自己比较悠闲,没有什么工作上的事情所做,所以当时就想,何不做一下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下的代码:

<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的代码:

<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的代码

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的代码了,都比较简单:

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就解决了。

时间: 2024-08-29 10:00:10

利用swipelistview完成qq聊天列表右滑删除功能的相关文章

类似于QQ的右滑删除效果的实现方法

类似于QQ的右滑删除效果的实现方法 原理:删除的div在窗口的外面,用户看不到,用户右滑,显示次div ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 6

js高仿QQ消息列表左滑功能

该组件,主要功能类似于QQ消息列表左滑出现删除.标为已读等按钮的功能:现在的版本用的是纯javaScript编写:后续会跟进 angularJs 开发的类似组件以及jquery的; 下面,就让我们来认识下怎么使用该程序: 在该程序里,总共分为四个文件: 1 .css文件夹 2. img 图片文件夹 3. js文件 4. index.html  主页面: 稍后,你可以自行下载,打开运行观看效果: 二.代码讲解 1.此html结构,为不可修改结构 <ul class="list-ul"

Android SwipeToDismiss:左滑/右滑删除ListView条目Item

?? <Android SwipeToDismiss:左右滑动删除ListView条目Item> Android的SwipeToDismiss是github上一个第三方开源框架(github上的项目链接地址:https://github.com/romannurik/Android-SwipeToDismiss ).该开源项目旨在:使得一个ListView的item在用户的手指在屏幕上左滑或者右滑时候,删除当前的这个ListView Item. 此种特效在新版的Android中应用不少.比方在

想要隐藏navigationBar,同时又想支持右滑返回功能

如果直接设置 self.navigationBarHidden = YES; 那同时也会屏蔽右滑返回功能. 解决办法1: self.navigationBarHidden = NO; self.navigationBar.hidden = YES; 解决办法2: self.navigationBarHidden = NO; self.interactivePopGestureRecognizer.delegate = self;

qq联系人 左滑删除功能

// 局部刷新 NSArray *indexPaths = @[ [NSIndexPath indexPathForRow:0 inSection:0], [NSIndexPath indexPathForRow:1 inSection:0] ]; [self.tableView reloadRowsAtIndexPaths:indexPaths withRowAnimation:UITableViewRowAnimationLeft]; #pragma mark - 按钮的点击 - (IBAc

Android 实现用户列表信息滑动删除功能和选择删除功能

在项目开发过程中,常常需要对用户列表的信息进行删除的操作.Android中常用的删除操作方式有两种 ,一种就是类似微信的滑动出现删除按钮方式,还有一种是通过CheckBox进行选择,然后通过按钮进行删除的方式.本来的实例集成上述的两种操作方式来实现用户列表删除的效果. 设计思路:在适配器类MyAdapter一个滑动删除按钮显示或隐藏的Map,一个用于CheckBox是否选中的Map和一个与MainAcitivyt进行数据交互的接口ContentsDeleteListener,同时该接口包含两个方

tableView左滑删除功能

实现三个代理方法即可 -(NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:(NSIndexPath *)indexPath { return @"删除"; } -(UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPat

ios7自定义返回按钮后,右滑返回功能失效解决方法

-(void)viewWillAppear:(BOOL)animated{ [super viewWillAppear:animated]; //开启ios右滑返回 if ([self.navigationController respondsToSelector:@selector(interactivePopGestureRecognizer)]) { self.navigationController.interactivePopGestureRecognizer.delegate = n

微信小程序列表左滑删除,删除按钮自适应高度,删除后列表归位,同时存在一个左滑元素,目前为止写过最舒服的左滑删除

js page({ data:{ items:[ //isTouchMove初始化取消所有元素的向左滑动 {name:'店名范德萨',huowu:'鸭脖货物鸭肠鸭头鸭爪鸭翅',time:'2032-32-32 12:21',zhuangtai:'待付款',price:'23',current:1,isTouchMove: false}, {name:'店名久久丫',huowu:'鸭脖货物鸭肠鸭头鸭爪鸭翅',time:'2032-32-32 12:21',zhuangtai:'待收货',price