Android仿QQ侧滑(删除、置顶等)功能

最新推荐文章于 2021-12-11 14:18:54 发布
最新推荐文章于 2021-12-11 14:18:54 发布
阅读量3.1k 收藏 5
点赞数 1
分类专栏： Android之旅 文章标签： android 仿QQ侧滑 侧滑删除 SwipeLayou
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wufeng55/article/details/53606294
版权

实现类似QQ滑动出现可操作项的功能，在网上看到有人自定义LinearLayout实现这个效果，但是灵活性有限。此demo使用开源项目SwipeLayout实现该功能。关于SwipeLayout的常用设置和属性，这里都做介绍，下面进入正题。

一、效果图

swipeLayout.gif

二、代码片段

  • 主页布局和主页的Java代码都和平时使用没有区别，代码没必要贴出来了。这里使用的ListView演示，还可以是GridView，ExpandableListView。
  • 最关键的代码部分，ListView适配器布局：

  • <?xml version="1.0" encoding="utf-8"?>
<com.daimajia.swipe.SwipeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/swipe"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:drag_edge="right">

    <LinearLayout
        android:id="@+id/trash"
        android:layout_width="160dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="horizontal"
        android:tag="Bottom">

        <TextView
            android:id="@+id/swipe_open"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#f55509"
            android:gravity="center"
            android:text="打开"
            android:textColor="@android:color/white"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/swipe_delete"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/holo_red_dark"
            android:gravity="center"
            android:text="删除"
            android:textColor="@android:color/white"
            android:textSize="20sp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:padding="5dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:orientation="vertical"
            android:paddingLeft="5dp">

            <TextView
                android:id="@+id/tv_nickname"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="17sp" />

            <TextView
                android:id="@+id/tv_msg"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:textSize="15sp" />
        </LinearLayout>
    </LinearLayout>
</com.daimajia.swipe.SwipeLayout>

    说明：最外层是我们的SwipeLayout，里面是两个LinearLayout，第一层是我们的页面布局，第二层是我们的侧边划出来的布局。关键的属性这里有体现：

    app:drag_edge="right"

    此属性是设置我们的侧边布局划出位置，默认是右边，可以设置左边、底部、顶部。

  • 适配器Java代码：

  • package com.example.mjj.swipelayoutdemo;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

import com.daimajia.swipe.SwipeLayout;
import com.daimajia.swipe.adapters.BaseSwipeAdapter;

import java.util.List;

/**
 * Description：适配器
 * <p>
 * Created by Mjj on 2016/12/12.
 */

public class MySwipeAdapter extends BaseSwipeAdapter implements View.OnClickListener {

    private Context context;
    private List<ItemBean> list;
    private final String TAG = "MySwipeAdapter";

    public MySwipeAdapter(Context context, List<ItemBean> list) {
        this.context = context;
        this.list = list;
    }

    /**
     * 返回SwipeLayout的ID
     *
     * @param position
     * @return
     */
    @Override
    public int getSwipeLayoutResourceId(int position) {
        return R.id.swipe;
    }

    /**
     * 绑定布局
     *
     * @param position
     * @param parent
     * @return
     */
    @Override
    public View generateView(int position, ViewGroup parent) {
        View itemView = View.inflate(context, R.layout.item_swipe, null);
        SwipeLayout swipeLayout = (SwipeLayout) itemView.findViewById(getSwipeLayoutResourceId(position));

        // 设置滑动是否可用,默认为true
        swipeLayout.setSwipeEnabled(true);

        /**
         * 打开时调用：循环调用onStartOpen,onUpdate,onHandRelease,onUpdate,onOpen,
         * 关闭时调用：onStartClose,onUpdate,onHandRelease,onHandRelease,onUpdate,onClose
         */
        swipeLayout.addSwipeListener(new SwipeLayout.SwipeListener() {
            @Override
            public void onStartOpen(SwipeLayout layout) {
//                Log.e(TAG, "onStartOpen: ");
            }

            @Override
            public void onOpen(SwipeLayout layout) {
//                Log.e(TAG, "onOpen: ");
            }

            @Override
            public void onStartClose(SwipeLayout layout) {
//                Log.e(TAG, "onStartClose: ");
            }

            @Override
            public void onClose(SwipeLayout layout) {
//                Log.e(TAG, "onClose: ");
            }

            @Override
            public void onUpdate(SwipeLayout layout, int leftOffset, int topOffset) {
//                Log.e(TAG, "onUpdate: ");
            }

            @Override
            public void onHandRelease(SwipeLayout layout, float xvel, float yvel) {
//                Log.e(TAG, "onHandRelease: ");
            }
        });

        // 设置为true,在当前一条item(除侧滑以外部分)点击时,可收回侧滑出来部分,默认为false
        swipeLayout.setClickToClose(true);

        // SwipeLayout单击事件,可替代ListView的OnitemClickListener事件.
        swipeLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
//                Log.e(TAG, "onClick: ");
            }
        });

        return itemView;
    }

    /**
     * 绑定数据
     *
     * @param position
     * @param convertView
     */
    @Override
    public void fillValues(int position, View convertView) {
        TextView tvNickName = (TextView) convertView.findViewById(R.id.tv_nickname);
        TextView tvMsg = (TextView) convertView.findViewById(R.id.tv_msg);
        TextView tvSwipeOpen = (TextView) convertView.findViewById(R.id.swipe_open);
        TextView tvSwipeDelete = (TextView) convertView.findViewById(R.id.swipe_delete);
        tvNickName.setText(list.get(position).getNickName());
        tvMsg.setText(list.get(position).getMsg());

        tvSwipeDelete.setOnClickListener(this);
        tvSwipeOpen.setOnClickListener(this);
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public ItemBean getItem(int i) {
        return list.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public void onClick(View view) {
        int id = view.getId();
        switch (id) {
            case R.id.swipe_open:
                // 关闭所有打开的Swipe的item
                this.closeAllItems();
                Toast.makeText(context, "Swipe--Open", Toast.LENGTH_SHORT).show();
                break;
            case R.id.swipe_delete:
                this.closeAllItems();
                Toast.makeText(context, "Swipe--Delete", Toast.LENGTH_SHORT).show();
                break;
        }
    }
}

    说明：和平时我们写的适配器不一样的是继承自BaseSwipeAdapter，需要实现的方法除了图中展示的，还有一个getItemId()；再没有别的。这里主要解释下几个平时没有见过的方法：

    public int getSwipeLayoutResourceId(int position)

    此方法返回的是我们的SwipeLayout的ID，而不是布局的ID。

    public View generateView(int position, ViewGroup parent)

    此方法返回的作用是和我们的item布局进行关联的，并在这里设置swipeLayout的相关属性。

    public void fillValues(int position, View convertView)

    此方法用来给我们的item中的控件绑定数据，并根据需要设置事件等操作。

    *三、常用设置介绍*

    1，如果我们的这个适配器是重用的，而有些时候不需要滑动功能，那么可以调用此方法来控制滑动是否可用。  

    swipeLayout.setSwipeEnabled(true);

    2，当我们的侧边布局还出来的时候，此时点击该条item，默认是不会收回的，也就是下面代码默认是false。

    falseswipeLayout.setClickToClose(true);

    3，如演示，当点击了删除或者打开后，划出来的侧边布局自动收回了，及时通过下面的属性closeAllItems()方法控制的。默认是不会收回的。

    this.closeAllItems();

    4，前面已经提到了，我们的侧滑出现的位置，如有需求是需要左边或者右边，别忘了它：

    app:drag_edge="right"

    *四、使用*

    compile 'com.daimajia.swipelayout:library:1.2.0'

    五、总结
    demo已上传至github，链接放在了公众号”code小生”里，关注查看。

    上一篇精彩文章《Android仿简书、微信向右滑动关闭界面》

code小生
关注
专栏目录
DrawerLayout（侧滑栏）详解，仿QQ消息列表（置顶、删除）
Android_小黑
08-11 1602
QQ消息列表的侧滑栏菜单，以及置顶效果、删除效果有没有想过怎么做？来吧，仅需5分钟！
Android实现QQ侧滑(删除、置顶等)功能
01-05
实现类似QQ滑动出现可操作项的功能，在网上看到有人自定义LinearLayout实现这个效果，但是灵活性有限。此demo使用开源项目SwipeLayout实现该功能。关于SwipeLayout的常用设置和属性，这里都做介绍，下面进入正题。 一、效果图 二、代码片段 主页布局和主页的Java代码都和平时使用没有区别，代码没必要贴出来了。这里使用的ListView演示，还可以是GridView，ExpandableListView。 最关键的代码部分，ListView适配器布局： <?xml version=1.0 encoding=utf-8?> <com.daimajia.s
android qq侧滑,Android实现QQ的侧滑置顶、删除
weixin_34790851的博客
05-27 414
Android实现QQ的侧滑置顶、删除本博客向大家介绍Android实现QQ侧滑(删除、置顶等)功能。主要包括Android实现QQ侧滑(删除、置顶等)功能。本博客里面的全部依赖于Android里面的原生控件，不需要依赖于第三方架包来实现。1.效果图展示2.代码实现目标结构布局文件activity_main.xmlxmlns:app="http://schemas.android.com/apk/...
android仿qq侧滑删除菜单
06-29
很常见的android侧滑删除,可以导入自己项目
Android 高仿QQ 界面滑动效果
iteye_2975的博客
10-29 264
点击或者滑动切换画面，用ViewPager实现， 首先是布局文件： &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" ...
Android listView item侧滑实现删除和置顶功能
weixin_34402408的博客
08-26 507
第一次写博客，先说下大概思路吧~ 要显示item侧滑显示删除，置顶。首先要隐藏一部分item的布局（自定义隐藏布局宽度，在adapter里设置LayoutParams）。然后重写listview的onInterceptTouchEvent()和onTouchEvent()方法，然后对listview的滑动进行判断，最后...
Android仿QQ左滑删除置顶ListView操作
01-20
在Android开发中，为了增强用户体验，常常会借鉴其他流行应用的设计元素，比如QQ的左滑删除功能。这个功能允许用户通过在ListView中的条目上进行左滑手势来触发删除或其他操作。下面我们将详细讨论如何实现这样一个...
Android仿QQ列表左滑删除操作
01-20
在Android开发中，为了增强用户体验，常常需要实现类似QQ列表的左滑删除功能。这个功能在许多社交应用中都很常见，允许用户通过手势快速对列表中的条目进行操作。在这个场景下，我们可以自定义一个`RecyclerView`来...
Android开发中悬浮框的基本用法（总结）--类似于QQ中的置顶、删除悬浮框
lpCrazyBoy的博客
06-22 798
效果图如下：1、常用的一些方法下面介绍几个用得较多的一些方法，其他的可自行查阅文档：setContentView(View contentView)：设置PopupWindow显示的ViewgetContentView()：获得PopupWindow显示的ViewshowAsDropDown(View anchor)：相对某个控件的位置（正左下方），无偏移showAsDropDown(View a...
Android 超高仿 QQ5.0 侧滑菜单项目完整实例代码
09-14
代码为博客的实例代码，有问题请博客中留言：http://blog.csdn.net/lmj623565791/article/details/39185641
android仿QQ滑动效果的实现
10-15
用HorizontalScrollView实现仿qq滑动效果，在scroll，fling的时候能够自动回到并填充屏幕位置 来自 http://www.apkbus.com/android-39887-1-1.html
模仿QQListView左滑删除置顶Item功能
10-31
模仿QQListView左滑删除置顶Item的一个小Demo，希望能帮助到大家
android listview 实现左滑删除置顶
07-31
android listview 实现左滑删除置顶
仿QQ条目侧滑置顶与删除
云卷云舒
09-19 713
//先导依赖 compile 'com.baoyz.swipemenulistview:library:1.3.0' //进行布局 com.baoyz.swipemenulistview.SwipeMenuListView android:id="@+id/shoucang_listview" android:layout_width="match_parent"
Android仿QQ左滑删除置顶ListView
lizebin_bin的博客
08-09 1683
Android自定义左滑删除置顶ListView
自定义View——仿QQ实现侧滑效果和删除、置顶功能
SurpassLi的博客
10-11 851
我尽量不打错别字，用词准确，不造成阅读障碍 高仿QQ侧滑效果，实现置顶、删除功能，完美适用于ListView，至于RecyclerView正在研究，效果有些问题。 本侧滑很简单，只有右侧的侧滑，并没有其他酷炫的功能，希望给大家一个提示思路，如果需求简单的话可以自己照着写，不需要加入第三方库。本文是一步步完善功能的，最后会有完整代码。 原理 自定义ViewGroup，继承自FrameLayou...
android仿qq列表实现列表置顶,模仿QQListView左滑删除置顶Item
weixin_34636056的博客
05-28 248
解决方法很简单，就是在更新Listview的时候，不要使用setAdapter，如果这样位置就会置顶了；需要更新ListView的时候，使用Adapter对象的notifyDataSetChanged方法吧。使用notifyDataSetChanged方法的时候注意了，更新列表是所有列表项都会被更新，这里存在一个性能上 的问题，所以如果你需要改变的只是单一个列表项，建议不要使用notifyData...
android列表侧滑删除&置顶，安卓开发项目实例
m0_65146105的博客
12-11 914
android:orientation=“vertical”> </com.mcxtzhang.swipemenulib.SwipeMenuLayout> 适配器中的代码，就是普通的RecyclerView适配器，我们只需要把删除、置顶的两个点击回调，写2个对应删除、置顶的方法即可。删除方法，就是list集合删除当前的position，然后notifyDataSetChanged一下就可以了，置顶方法就是list集合，添加当前的position到集合的起始位置。 class
Android实现QQ侧滑功能：删除、置顶全攻略
在Android应用开发中，经常需要为用户界面添加交互性，例如模仿QQ应用中的侧滑操作，这种操作可以触发多种功能，如删除、置顶等。本教程将教你如何实现这一特性。 首先，我们来看关键的开源库——SwipeLayout。...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

code小生

有头像，我们容易成为朋友

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值