教你实现最简单的QQ消息item侧滑菜单

这次跟大家介绍怎么简单的实现类似QQ消息Item的左右滑动菜单的实现。首先见效果图先:

show.gif

这就实现了ListView或RecyclerView加载的item的View实现侧滑菜单。至于这么实现,很简单就是通过继承HorizontalScrollView,再判断滑动的距离以滑到对应的View或菜单。具体如下: 首先,在item的界面布局方面如下:

<?xml version="1.0" encoding="utf-8"?>
<com.example.jack.listviewitemscroll.widget.ScrollListViewItem
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp">
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <include layout="@layout/leftbutton"/>
        <include layout="@layout/context_view"/>
        <include layout="@layout/rightbutton"/>
    </LinearLayout>
</com.example.jack.listviewitemscroll.widget.ScrollListViewItem>

就是ScrollListViewItem包裹着LinearLayout里面的三个View,分别是左菜单,内容和右菜单对应的View。最为重点的就是ScrollListViewItem这个类,这就是我们继承HorizontalScrollView类所自定义的控制菜单滑动的类。 这个类的源码如下:

public class ScrollListViewItem extends HorizontalScrollView{

    private static int ScreenWidth=0;
    private static int MenuWidth=0;
    private static int HalfMenuWidth=0;
    private boolean  operateLeft=false;
    private boolean operateRight=false;
    private boolean once;

    ViewGroup left;
    ViewGroup centre;
    ViewGroup right;

    public ScrollListViewItem(Context context) {
        this(context, null);
    }

    public ScrollListViewItem(Context context, AttributeSet attrs) {
        super(context, attrs,0);
    }

    public ScrollListViewItem(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr,0);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
       if(!once){
           LinearLayout linearLayout=(LinearLayout)getChildAt(0);
           left=(ViewGroup)linearLayout.getChildAt(0);
           centre=(ViewGroup)linearLayout.getChildAt(1);
           right=(ViewGroup)linearLayout.getChildAt(2);

           ScreenWidth= ScreenUtils.getScreenWidth(getContext());
           MenuWidth=ScreenWidth/4;
           HalfMenuWidth=MenuWidth/2;

           left.getLayoutParams().width=MenuWidth;
           centre.getLayoutParams().width=ScreenWidth;
           right.getLayoutParams().width=MenuWidth;
       }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        if(changed){
            this.scrollTo(MenuWidth,0);
            once=true;
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch(ev.getAction()){
            case MotionEvent.ACTION_UP:
                //在左侧
                if(operateLeft){
                    if(getScrollX()<HalfMenuWidth){
                        //滑到左最末尾
                        this.scrollTo(0, 0);
                    }else if(getScrollX()>HalfMenuWidth&&getScrollX()<MenuWidth+HalfMenuWidth){
                        //滑到中间
                        this.scrollTo(MenuWidth, 0);
                    }else{
                        this.scrollTo(MenuWidth * 2, 0);
                    }
                }
                //向右侧
                if(operateRight){
                    if(getScrollX()>MenuWidth+HalfMenuWidth){
                        //滑到最右
                        this.scrollTo(MenuWidth + MenuWidth, 0);
                    }else if(getScrollX()>HalfMenuWidth&&getScrollX()<MenuWidth+HalfMenuWidth){
                        //滑到中间
                        this.scrollTo(MenuWidth, 0);
                    }else{
                        //滑到最左
                        this.scrollTo(0, 0);
                    }
                }
                return true;
        }
        return super.onTouchEvent(ev);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if(l>MenuWidth){
            operateLeft=false;
            operateRight=true;
        }else{
            operateLeft=true;
            operateRight=false;
        }
    }
}

在onMeasure()这个自定义View的测量方法里,我们首先拿到左菜单,内容,右菜单所对用的view,即left,centre,right这三个View,然后获取屏幕的宽度,动态设定菜单的宽度为屏幕宽度的四分之一,而内容的宽度就是整个屏幕的宽度,即

 left.getLayoutParams().width=MenuWidth;
 centre.getLayoutParams().width=ScreenWidth;
 right.getLayoutParams().width=MenuWidth;

然后我们在onLayout()方法里对这三个View进行定位,即让他滑到内容的那个View。

然后回调onScrollChanged(int l, int t, int oldl, int oldt)方法,当l大于菜单宽度时是右侧,当l小于菜单宽度时是右侧。(注:l是屏幕最右边到整个View最右边的距离)

其次就是最重要的onTouchEvent(MotionEvent ev)方法了。(注:是屏幕最右边到整个View最右边的距离).当operateLeft==true的时候,滑动在操作在左侧,当getScrollX()<HalfMenuWidth,即在最左向右滑还不到菜单的二分之一宽度时,恢复原状,即this.scrollTo(0, 0);,当getScrollX()>HalfMenuWidth&&getScrollX()<MenuWidth+HalfMenuWidth,即最左向右滑大于菜单的二分之一宽度但却小于左菜单加右菜单一半的宽度,所以只能滑到内容区域,即this.scrollTo(MenuWidth, 0);,这两种情况除外都会滑到最后边的菜单,所以this.scrollTo(MenuWidth * 2, 0);

同样的道理,当operateRight==true时,getScrollX()>MenuWidth+HalfMenuWidth时,即在最右菜单但滑动的距离小于菜单宽度的一半,所以只能恢复原状即this.scrollTo(MenuWidth + MenuWidth, 0);,当getScrollX()>HalfMenuWidth&&getScrollX()<MenuWidth+HalfMenuWidth时,即滑动大于菜单一半但是却小于左菜单加右菜单一半的宽度,所以是内容区域,即滑动 this.scrollTo(MenuWidth, 0);,除这两种情况都是要滑到最左边的菜单,即 this.scrollTo(0, 0);。到此整个流程就讲完了。

最后奉上源码

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

Android仿拼多多拼团堆叠头像

序言 做电商的都知道,作为商品的一种售卖方式,拼团是是提供商品售卖的一种及时有效的方式,而在拼团市场中,拼多多无疑是做的最好的一家。于是,研究拼多多的售卖方式之...

5898
来自专栏向治洪

仿刮刮乐刮奖效果

该功能实现很简单,就是根据手指坐标位置在画板上画 1.效果图 ? ? 2.代码实现 public class ErinieShow extends Rel...

2025
来自专栏Android Note

Android - 居中的FlowLayout

2602
来自专栏Android开发指南

Android刮刮卡自定义控件

3889
来自专栏学海无涯

Android开发之View动画

Android动画主要分为3种 View动画 帧动画 属性动画 何为View动画? View动画主要是对View对象进行变换所达到的动画效果,如平移、缩放、旋转...

2765
来自专栏Android干货

关于安卓开发实现侧滑菜单效果

1.1K8
来自专栏Android干货

Android项目实战(十五):自定义不可滑动的ListView和GridView

2965
来自专栏向治洪

PullToRefreshScrollView 嵌套RecyclerView实现特卖列表倒计时抢购

不久之前,我们谈到了通过Handler与timer及TimerTask结合实现倒计时抢购列表,那个是PullToRefreshListView实现的,今天要讲的...

3475
来自专栏Android小菜鸡

解决ScrollView与ListView嵌套得冲突问题

  这类问题简单来说就是一个高度测量的问题,由于ScrollView的引入,无法正确的测量出ListView的高度,导致显示不完全甚至不显示的问题。重写List...

2981
来自专栏Android知识点总结

1-VII-RecyclerView基本使用

1063

扫码关注云+社区

领取腾讯云代金券