【Android】自定义控件-仿QQ联系人侧滑条目，右侧滑菜单。

最新推荐文章于 2022-05-24 08:15:00 发布
最新推荐文章于 2022-05-24 08:15:00 发布
阅读量2.4k 收藏 7
点赞数 1
分类专栏： 自定义控件 文章标签： 自定义控件 Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wlcm603/article/details/51770239
版权

一直没有写博客的习惯，一直都是看别人的博客，学习别人的东西。平时工作中总会遇到或大或小的问题，往往是上百度CSDN查找答案。今天尝试着写博客，一是更加深入地熟悉一下博客；二是转变一下学习方式；三是把自己所学的东西分享出来，帮助别人的同时也提升了自己！

在写项目时经常会用到一些自定义控件，我把这些自定义控件整理分享出来，如果有同样需求的朋友可以直接拿去用，省时又省事！

这是一个实用的右侧滑控件，可以用于QQ联系人列表的侧滑条目，也可以用于酷狗的右侧滑菜单。根据不同的需求改变布局。

1、仿QQ侧滑按钮

这里写图片描述

  • 先看布局文件activity_listdemo.xml 里面就一个标题和ListView，主要是ListView中的条目item_slideslip.xml和item_slideslip2.xml
activity_listdemo.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#D0D0D0"
        android:gravity="center"
        android:padding="10dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="侧拉按钮"
            android:textColor="#FFF"
            android:textSize="20sp" />
    </LinearLayout>

    <ListView
        android:id="@+id/lv_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"></ListView>
</LinearLayout>

item_slideslip.xml

<?xml version="1.0" encoding="utf-8"?>
<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">

    <zxz.sideslipview.view.SideslipView
        android:id="@+id/sv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:padding="6dp">

            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/a1" />

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_weight="1"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="路飞君"
                    android:textColor="#000000"
                    android:textSize="18sp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="6dp"
                    android:text="ONE PIECE " />
            </LinearLayout>

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <Button
                android:id="@+id/btn_top"
                android:layout_width="100dp"
                android:layout_height="match_parent"
                android:background="#A0A0A0"
                android:text="置顶"
                android:textColor="#FFF" />

            <Button
                android:id="@+id/btn_delete"
                android:layout_width="100dp"
                android:layout_height="match_parent"
                android:background="#F01010"
                android:text="删除"
                android:textColor="#FFF" />
        </LinearLayout>
    </zxz.sideslipview.view.SideslipView>
</RelativeLayout>

这里SideslipView当做ListView中的条目使用。具体Activity实现看demo。

/===========================================/

2、右侧滑菜单

这里写图片描述

  • 仿照这个activity_slidingdemo.xml这个方式就可以实现以上效果
activity_slidingdemo.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <zxz.sideslipview.view.SideslipView
        android:id="@+id/sv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#DCF6DC"
            android:gravity="center">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="主面板"
                android:textSize="16sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="#FAE1C6"
            android:gravity="center">

            <TextView
                android:layout_width="160dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="侧滑面板"
                android:textSize="16sp" />
        </LinearLayout>
    </zxz.sideslipview.view.SideslipView>
</LinearLayout>

-核心部分

  • 就是SideslipView的实现代码
package zxz.sideslipview.view;

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Rect;
import android.os.Build;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.ViewDragHelper;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.Transformation;
import android.widget.LinearLayout;
import android.widget.Scroller;

/**
 * Created by asusone on 2016/6/24.
 */
public class SideslipView extends LinearLayout {

    private ViewGroup viewContent;
    private ViewGroup viewLeft;
    private int viewLeftWidth;
    private int viewLeftHeight;
    private int x = -1;
    private int distance = 0;
    private Scroller mScroller;
    private int scrollerPosition = 0;
    private ScrollerAnimation scrollerAnimation;
    private String toggleState = "CLOSE";

    public SideslipView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

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

    private void init() {
        /**设置横向布局**/
        setOrientation(LinearLayout.HORIZONTAL);
        mScroller = new Scroller(getContext());
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        System.out.println("viewLeftWidth:" + viewLeftWidth);
        viewContent.layout(l, t, r, b);
        viewLeft.layout(r, 0, r + viewLeftWidth, b);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        viewContent = (ViewGroup) this.getChildAt(0);
        viewLeft = (ViewGroup) this.getChildAt(1);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //  viewLeftWidth = viewLeft.getMeasuredWidth();
        int childCount = viewLeft.getChildCount();
        if (childCount == 0) {
            viewLeftWidth = viewLeft.getMeasuredWidth();
        } else {
            for (int i = 0; i < childCount; i++) {
                viewLeftWidth += viewLeft.getChildAt(i).getMeasuredWidth();
            }
        }
        viewLeftHeight = viewLeft.getMeasuredHeight();
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                x = (int) event.getX();
                break;
            case MotionEvent.ACTION_MOVE:
                if (Math.abs(x - event.getX()) > 8) {
                    return true;
                }
                break;
        }
        return super.onInterceptTouchEvent(event);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                x = (int) event.getX();
                break;
            case MotionEvent.ACTION_MOVE:
                if (x == -1) {
                    x = (int) event.getX();
                }
                if (Math.abs(x - event.getX()) > 8) {
                    getParent().requestDisallowInterceptTouchEvent(true);
                }
                int currentDistanceX = (int) (x - event.getX());
                int i = currentDistanceX + distance;
                if (i > viewLeftWidth || i < 0) {
                    break;
                }
                scrollTo(i, 0);
                break;
            case MotionEvent.ACTION_UP:
                if (x - event.getX() > viewLeftWidth / 5) {
                    toggleState = "OPEN";
                } else if (x - event.getX() < -(viewLeftWidth / 5)) {
                    toggleState = "CLOSE";
                }
                distance = distance + (int) (x - event.getX());
                if (distance >= viewLeftWidth) {
                    distance = viewLeftWidth;
                } else if (distance <= 0) {
                    distance = 0;
                }
                x = -1;
                toggle();
                break;
        }
        return true;
    }

    private void toggle() {
        if ("OPEN".equals(toggleState)) {
            //**开**/
            scrollerPosition = viewLeftWidth;
            distance = viewLeftWidth;
            mScroller.startScroll(getScrollX(), 0, -viewLeftWidth - getScrollX(), 0, 400);
            scrollerAnimation = new ScrollerAnimation(this, viewLeftWidth);
        } else if ("CLOSE".equals(toggleState)) {
            //**关**/
            scrollerPosition = 0;
            distance = 0;
            scrollerAnimation = new ScrollerAnimation(this, 0);
        }
        scrollerAnimation.setDuration((long) (0.1 * 1000));
        startAnimation(scrollerAnimation);
    }

    public void open() {
        if ("OPEN".equals(toggleState)) {
            return;
        }
        toggleState = "OPEN";
        toggle();
    }

    public void close() {
        if ("CLOSE".equals(toggleState)) {
            return;
        }
        toggleState = "CLOSE";
        toggle();
    }

    private class ScrollerAnimation extends Animation {
        private View view;
        private int targetScrollX;
        private int startScrollX;
        private int totalValue;

        public ScrollerAnimation(View view, int targetScrollX) {
            this.view = view;
            this.targetScrollX = targetScrollX;

            startScrollX = view.getScrollX();
            totalValue = this.targetScrollX - startScrollX;

            int time = Math.abs(totalValue);
            setDuration(time);
        }
        @Override
        protected void applyTransformation(float interpolatedTime,
                                           Transformation t) {
            super.applyTransformation(interpolatedTime, t);
            int currentScrollX = (int) (startScrollX + totalValue * interpolatedTime);
            view.scrollTo(currentScrollX, 0);
        }
    }
}

SideslipView可以直接拷贝过去用，实在大快人心，使用方法参考以上两个布局文件哦～～

使用方法：直接在布局文件中引用SideslipView，然后在SideslipView下使用两个ViewGroup，第一个ViewGroup则是主区域，第二个ViewGroup则是右侧滑区域。SideslipView是继承LinearLayout的，默认是横向布局。也可以参考下面的布局文件使用！
注意：右区域的大小是根据第二个ViewGroup的大小而动态改变，最好是用dp设置好大小

Demo下载地址：Android Studio工程：http://download.csdn.net/detail/wlcm603/9561057

goldze
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Android高级应用源码-仿qq通讯录联系人.zip
12-17
源码参考，欢迎下载
listview侧滑菜单的实现——高仿QQ联系人列表
Water的博客
05-26 2299
转载请注明出处：http://blog.csdn.net/binbinqq86/article/details/46010951   项目用到了ListView的侧滑删除的功能，由于当时项目比较赶，就随便在网上找了一个，但是效果不是太好，最近闲了下来，就想自己实现一个，于是就按照QQ的联系人列表的侧滑菜单做了一个，效果基本上是一模一样的。在这个过程中，自己也学习到了不少的东西，下面就把这个过程...
android实现qq联系人页面,Android仿QQ联系人分组悬停 - PinnedHeaderListView
weixin_39747293的博客
05-28 419
看效果： 配合pullrefresh还能做到下拉刷新，已实现(亲测)。直接上源码：/*** Created by carson on 2017/11/14.* 实现了分组悬停group header* @since 1.1.4*/public class PinnedExHeaderListview extends ExpandableListView implements AbsListView...
模仿通讯录侧滑栏
I_love_crazy的博客
05-28 977
通讯录
Android 侧滑菜单(侧滑删除)总结
Android 开发架构
05-22 2786
侧滑菜单确实是一个比较常见的功能，其中场景较多的就是侧滑删除，它是iOS列表删除通用交互方式，比如微信、QQ、苹果自带的短信、通讯录列表等，都有侧滑删除功能。由于国内Android、iOS通常都是一套设计，因次，Android端怎么能少得了这个功能呢？Android 端实现起来确实稍显麻烦，它需要你掌握自定义View、属性动画、事件分发等一些比较深入的知识点。如果这些知识点你掌握得不错，那么实现一...
【Android -- UI 开发】RecyclerView 侧滑菜单(侧滑删除) 开源库
Kevin Learn Android
05-24 1741
本文就讲讲实现思路和整理的一些不错的关于侧滑菜单的开源库。
Android UI（五）云通讯录项目之联系人列表，带侧滑选择，带搜索框
weixin_34032779的博客
12-04 122
作者：泥沙砖瓦浆木匠网站：http://blog.csdn.net/jeffli1993个人签名：打算起手不凡写出鸿篇巨作的人，往往坚持不了完成第一章节。交流QQ群：【编程之美 365234583】http://jq.qq.com/?_wv=1027&amp;k=XVfBTo 要捐钱的就打支付宝吧：13958686678（泥瓦匠开个玩笑~） 一、前言     继续AndroidUI系列，泥瓦匠又要...
android效仿qq侧滑菜单,Android仿qq侧滑菜单
weixin_39853523的博客
05-26 267
我们经常能看到各种app中都有应用侧滑菜单(SlidingMenu),效果很好的一种显示方式，今天我就向大家展示可以说是很简单就能实现和qq的侧滑菜单很相似的效果。现在侧滑菜单的框架在github上也有很多，有兴趣的可以去搜一下，今天我就给大家展示一个简单的仿qq侧滑菜单的例子。开始实现原理我们可以自定义一个view，然后用一个水平滚动条HorizontalScrollView匹配父容器原理如图:...
Android自定义View（跑马灯、viewpager左右滑动、列表侧滑、优酷菜单、水波纹）
小口口的博客
03-18 1005
自定义控件
android 左滑右滑,Android仿滴答清单左滑右滑效果
weixin_42420422的博客
05-28 298
直接上效果图记录仿写滴答清单App 过程中的技术点本文分为以下章节，读者可按需阅读：1.自定义RecycleItemTouchHelper2.实现滴答清单左滑右滑效果3.RecycleView使用自定义RecycleItemTouchHelper一、ItemTouchHelper使用本章介绍下ItemTouchHelper的基本使用方法，主要是我们后面实现左滑右滑会用到的类和方法，拖拽方法暂时不详...
Android滑动优化高仿QQ6.0侧滑菜单（滑动优化）
01-20
推荐阅读：Android使用ViewDragHelper实现仿QQ6.0侧滑界面(一) 但是之前的实现，只是简单的可以显示和隐藏左侧的菜单，但是特别生硬，而且没有任何平滑的趋势，那么今天就来优化一下吧，加上平滑效果，而且可以根据手势滑动的方向来判断是否是显示和隐藏。 首先先来实现手势判断是否隐藏和显示 这里就要用到了一个方法了，如下： 这个是ViewDradHelper里面的方法： /** * 当view被释放的时候处理的事情（松手） * * @param releasedChild 被释放的子view * @param xvel 水平方向的速度 帧每秒 向右为 + * @param yve
Android UI仿QQ好友列表分组悬浮效果
11-21
Android UI仿QQ好友列表分组悬浮效果，并且还有刷新的功能
Android 获取联系人 仿QQ通讯录
03-05
Android 获取联系人 仿QQ通讯录
自定义控件-仿QQ联系人侧滑条目，右侧滑菜单。
06-27
这是一个实用的右侧滑控件，可以用于QQ联系人列表的侧滑条目，也可以用于酷狗的右侧滑菜单。根据不同的需求改变布局。
Android自定义控件-仿今日头条图片上下滑动退出
02-02
Android自定义控件-仿今日头条图片上下滑动退出
Android高级应用源码-android自定义控件-侧滑菜单.zip
10-14
Android高级应用源码-android自定义控件-侧滑菜单.zip
Android自定义控件---联系人列表A-Z排序
04-30
Android自定义控件---联系人列表A-Z排序 此demo的博客地址：http://blog.csdn.net/u012814441
安卓SlidingMenu各种菜单侧滑菜单相关-android自定义控件-侧滑菜单.zip
07-29
android自定义控件-侧滑菜单.zip,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
2014年311教育学专业基础综合答案解析.pdf
最新发布
04-24
教育学考研，考研真题，全国硕士研究生统一考试教育学专业基础综合真题及解析，311历年真题，参考答案，答案解析。教育学统考。
<!--listView自定义控件-->
06-13
ListView 自定义控件可以实现一些特定的功能和效果，比如可以自定义每个列表项的布局、添加分割线、添加头部和尾部等。下面是一些常用的 ListView 自定义控件： 1. SwipeMenuListView：可以实现向左滑动显示菜单的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值