Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭

最新推荐文章于 2024-07-12 22:42:59 发布
最新推荐文章于 2024-07-12 22:42:59 发布
阅读量525 收藏 1
点赞数
分类专栏： Android 进阶 文章标签： android

原文：http://blog.csdn.net/lmj623565791/article/details/39257409

博主的上一篇文章也参考下：Android 自定义控件打造史上最简单的侧滑菜单

1、原理分析
这里写图片描述

这里写图片描述

差距还是蛮大的

区别1、QQ的内容区域会伴随菜单的出现而缩小

区别2、QQ的侧滑菜单给人的感觉是隐藏在内容的后面，而不是拖出来的感觉

区别3、QQ的侧滑菜单有一个缩放以及透明度的效果~

那么我们如何能做到呢：

对于区别1：这个好办，我们可以在滑动的时候，不断的改变内容区域的大小；如何改变呢？我们在菜单出现的整个过程中，不断记录菜单显示的宽度与其总宽度的比值，是个从0到1的过程，然后把0~1转化为1~0.7（假设内容区域缩小至0.7)；不断去缩小内容区域；

对于区别3：也比较好办，上面已经可以得到0到1的这个值了，那么缩放和透明度的动画就不在话下了；

对于区别2：我们使用的HorizontalScrollView，然后水平放置了菜单和内容，如何让菜单可以隐藏到内容的后面呢？其实也比较简单，在菜单出现的过程中，不断设置菜单的x方向的偏移量；0的时候完全隐藏，0.3的时候，隐藏x方向偏移量为0.7个宽度，类推~~~

好了，分析完毕，那么对于这些动画用什么实现最好呢？

好了，分析完毕，那么对于这些动画用什么实现最好呢？

想都不用想，属性动画哈，如果你对属性动画不了解，可以参考：
Android 属性动画（Property Animation） 完全解析 （上）
和 Android 属性动画（Property Animation） 完全解析 （下）

2、实现

1、初步的代码

布局文件神马的，都和上一篇一模一样，这里就不重复贴代码了，不了解的，先看下上一篇；

先看一下上一篇我们已经实现的完整代码：

package com.example.zhy_slidingmenu;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.ViewGroup;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;

import com.zhy.utils.ScreenUtils;

public class SlidingMenu extends HorizontalScrollView
{
    /**
     * 屏幕宽度
     */
    private int mScreenWidth;
    /**
     * dp
     */
    private int mMenuRightPadding;
    /**
     * 菜单的宽度
     */
    private int mMenuWidth;
    private int mHalfMenuWidth;

    private boolean isOpen;

    private boolean once;

    public SlidingMenu(Context context, AttributeSet attrs)
    {
        this(context, attrs, 0);

    }

    public SlidingMenu(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
        mScreenWidth = ScreenUtils.getScreenWidth(context);

        TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
                R.styleable.SlidingMenu, defStyle, 0);
        int n = a.getIndexCount();
        for (int i = 0; i < n; i++)
        {
            int attr = a.getIndex(i);
            switch (attr)
            {
            case R.styleable.SlidingMenu_rightPadding:
                // 默认50
                mMenuRightPadding = a.getDimensionPixelSize(attr,
                        (int) TypedValue.applyDimension(
                                TypedValue.COMPLEX_UNIT_DIP, 50f,
                                getResources().getDisplayMetrics()));// 默认为10DP
                break;
            }
        }
        a.recycle();
    }

    public SlidingMenu(Context context)
    {
        this(context, null, 0);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        /**
         * 显示的设置一个宽度
         */
        if (!once)
        {
            LinearLayout wrapper = (LinearLayout) getChildAt(0);
            ViewGroup menu = (ViewGroup) wrapper.getChildAt(0);
            ViewGroup content = (ViewGroup) wrapper.getChildAt(1);

            mMenuWidth = mScreenWidth - mMenuRightPadding;
            mHalfMenuWidth = mMenuWidth / 2;
            menu.getLayoutParams().width = mMenuWidth;
            content.getLayoutParams().width = mScreenWidth;

        }
        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(mMenuWidth, 0);
            once = true;
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev)
    {
        int action = ev.getAction();
        switch (action)
        {
        // Up时，进行判断，如果显示区域大于菜单宽度一半则完全显示，否则隐藏
        case MotionEvent.ACTION_UP:
            int scrollX = getScrollX();
            if (scrollX > mHalfMenuWidth)
            {
                this.smoothScrollTo(mMenuWidth, 0);
                isOpen = false;
            } else
            {
                this.smoothScrollTo(0, 0);
                isOpen = true;
            }
            return true;
        }
        return super.onTouchEvent(ev);
    }

    /**
     * 打开菜单
     */
    public void openMenu()
    {
        if (isOpen)
            return;
        this.smoothScrollTo(0, 0);
        isOpen = true;
    }

    /**
     * 关闭菜单
     */
    public void closeMenu()
    {
        if (isOpen)
        {
            this.smoothScrollTo(mMenuWidth, 0);
            isOpen = false;
        }
    }

    /**
     * 切换菜单状态
     */
    public void toggle()
    {
        if (isOpen)
        {
            closeMenu();
        } else
        {
            openMenu();
        }
    }



}

利用HorizontalScrollView，监听了ACTION_UP的事件，当用户抬起手指时，根据当前菜单显示的宽度值，判断是缩回还是完全展开；给用户提供了一个rightPadding属性，用于设置菜单离右屏幕的距离；以及对外提供了打开，关闭，切换的几个方法；具体的讲解看下上篇博客了；

2、实现的思路

现在我们开始解决那3个区别，已经选择了使用属性动画，现在决定动画效果应该加在哪儿？

不用说，我用大腿想一想都应该是在ACTION_MOVE中，是的，ACTION_MOVE中的确可以，不断获取当前的getScrollX / mMenuWidth，不断改变菜单的透明度，缩放，X方向的偏移量；不断改变内容区域的宽度和高度；

说一下，起初我也是在MOVE中这么做的，但是呢，出现两个问题：

1、动画效果并不是很流畅，特别是菜单，有抖动的效果；

2、用户抬起后，还需要在UP里面，继续未完成的动画，就是说，你的透明度、缩放神马的，当用户抬起以后就需要自动变化了；

于是乎，我就开始换了个方向，既然是SrollView，肯定有一个ScrollChanged方法，功夫不负有心人，真心这么个方法：

    @Override  
        protected void onScrollChanged(int l, int t, int oldl, int oldt)  
        {  

        }

这个方法只要scrollChanged就会触发，l就是我们需要的scrollX，太赞了~~~

3、动画比例的计算

我们在onScrollChanged里面，拿到 l 也就是个getScrollX，即菜单已经显示的宽度值；

    float scale = l * 1.0f / mMenuWidth;

与菜单的宽度做除法运算，在菜单隐藏到显示整个过程，会得到1.0~0.0这么个变化的区间；

有了这个区间，就可以根据这个区间设置动画了；

1、首先是内容区域的缩放比例计算：

我们准备让在菜单出现的过程中，让内容区域从1.0~0.8进行变化~~

那么怎么把1.0~0.0转化为1.0~0.8呢，其实很简单了：

float rightScale = 0.8f + scale * 0.2f; （scale 从1到0 ），是不是哦了~

接下来还有3个动画：

2、菜单的缩放比例计算

仔细观察了下QQ，菜单大概缩放变化是0.7~1.0

float leftScale = 1 - 0.3f * scale;

3、菜单的透明度比例：

我们设置为0.6~1.0；即：0.6f + 0.4f * (1 - scale)

4、菜单的x方向偏移量：

看一下QQ，并非完全从被内容区域覆盖，还是有一点拖出的感觉，所以我们的偏移量这么设置：

tranlateX = mMenuWidth * scale * 0.6f ；刚开始还是让它隐藏一点点~~~

4、完整的实现

@Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt)
    {
        super.onScrollChanged(l, t, oldl, oldt);
        float scale = l * 1.0f / mMenuWidth;
        float leftScale = 1 - 0.3f * scale;
        float rightScale = 0.8f + scale * 0.2f;

        ViewHelper.setScaleX(mMenu, leftScale);
        ViewHelper.setScaleY(mMenu, leftScale);
        ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * (1 - scale));
        ViewHelper.setTranslationX(mMenu, mMenuWidth * scale * 0.6f);

        ViewHelper.setPivotX(mContent, 0);
        ViewHelper.setPivotY(mContent, mContent.getHeight() / 2);
        ViewHelper.setScaleX(mContent, rightScale);
        ViewHelper.setScaleY(mContent, rightScale);

    }

就这么几行。这里属性动画用的nineoldandroids为了保持向下的兼容；主要就是设置了各种动画，上面都详细说了~~~
然后，记得把我们的菜单和内容的布局，单独声明出来为我们的mMenu ,mContent ~没了，就改了这么几行~

3、效果图

是骡子是马，拉出来溜溜

这里写图片描述

菜单栏需要ListView的拖动也是不会冲突了，上篇已经测试了；

关于动画属性的范围：上面介绍的特别清楚，比如内容我们是最小显示0.8，你要是喜欢0.6，自己去修改一下；包括偏移量，透明度等范围；

因为上一篇已经写了如何把属性抽取成自定义的属性；所以这里就没有抽取了，不然总觉得是在重复~

嗯，最近还有写APP的侧滑，是这样的，就是菜单栏完全隐藏在内容区域下面，如果需要这样需求的：

这里写图片描述

实现呢，注释几行代码就实现了：

package com.example.zhy_slidingmenu;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.ViewGroup;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;

import com.zhy.utils.ScreenUtils;

public class SlidingMenu extends HorizontalScrollView
{
    /**
     * 屏幕宽度
     */
    private int mScreenWidth;
    /**
     * dp
     */
    private int mMenuRightPadding;
    /**
     * 菜单的宽度
     */
    private int mMenuWidth;
    private int mHalfMenuWidth;

    private boolean isOpen;

    private boolean once;

    public SlidingMenu(Context context, AttributeSet attrs)
    {
        this(context, attrs, 0);

    }

    public SlidingMenu(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
        mScreenWidth = ScreenUtils.getScreenWidth(context);

        TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
                R.styleable.SlidingMenu, defStyle, 0);
        int n = a.getIndexCount();
        for (int i = 0; i < n; i++)
        {
            int attr = a.getIndex(i);
            switch (attr)
            {
            case R.styleable.SlidingMenu_rightPadding:
                // 默认50
                mMenuRightPadding = a.getDimensionPixelSize(attr,
                        (int) TypedValue.applyDimension(
                                TypedValue.COMPLEX_UNIT_DIP, 50f,
                                getResources().getDisplayMetrics()));// 默认为10DP
                break;
            }
        }
        a.recycle();
    }

    public SlidingMenu(Context context)
    {
        this(context, null, 0);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        /**
         * 显示的设置一个宽度
         */
        if (!once)
        {
            LinearLayout wrapper = (LinearLayout) getChildAt(0);
            ViewGroup menu = (ViewGroup) wrapper.getChildAt(0);
            ViewGroup content = (ViewGroup) wrapper.getChildAt(1);

            mMenuWidth = mScreenWidth - mMenuRightPadding;
            mHalfMenuWidth = mMenuWidth / 2;
            menu.getLayoutParams().width = mMenuWidth;
            content.getLayoutParams().width = mScreenWidth;

        }
        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(mMenuWidth, 0);
            once = true;
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev)
    {
        int action = ev.getAction();
        switch (action)
        {
        // Up时，进行判断，如果显示区域大于菜单宽度一半则完全显示，否则隐藏
        case MotionEvent.ACTION_UP:
            int scrollX = getScrollX();
            if (scrollX > mHalfMenuWidth)
            {
                this.smoothScrollTo(mMenuWidth, 0);
                isOpen = false;
            } else
            {
                this.smoothScrollTo(0, 0);
                isOpen = true;
            }
            return true;
        }
        return super.onTouchEvent(ev);
    }

    /**
     * 打开菜单
     */
    public void openMenu()
    {
        if (isOpen)
            return;
        this.smoothScrollTo(0, 0);
        isOpen = true;
    }

    /**
     * 关闭菜单
     */
    public void closeMenu()
    {
        if (isOpen)
        {
            this.smoothScrollTo(mMenuWidth, 0);
            isOpen = false;
        }
    }

    /**
     * 切换菜单状态
     */
    public void toggle()
    {
        if (isOpen)
        {
            closeMenu();
        } else
        {
            openMenu();
        }
    }



}
南神
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android实现仿QQ5.0的侧滑效果（博客源码）
11-08
博客地址http://blog.csdn.net/pfe_nova/article/details/40921097 整体思路：两个界面本质是一个View，左右排列，通过一个水平滚动条来实现（示例中自定义了一个View继承自HorizontalScrollView）。起始状态滚动条在靠近中间的位置，这样就显示出了内容区域。当从内容区向左侧滑时，滑到一定的范围就直接将滚动条设置到最左边，这样就看到了左边的菜单。向右侧滑也是类似。为了达到在菜单边界露出内容区域的效果，需要设置菜单的宽度比屏幕宽度小一些（小的宽度就是露出内容区域的宽度）。需要的知识点如下：1. 自定义View的onMeasure事件与onLayout事件；2. onTouchEvent事件；3.获取屏幕的宽度和高度；4. 获取和设置滚动条的偏移量并实现切换的动画；5.单位换算；6.设置不显示标题。
Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭
810364804
09-15 1041
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/39257409，本文出自【张鸿洋的博客】 上一篇博客带大家实现了：Android 自定义控件打造史上最简单的侧滑菜单，有兄弟看了以后说，你这滑动菜单过时了呀~QQ5.0的效果还不错~~嗯，的确，上一篇也承诺过，稍微修改上一篇的代码，实现QQ5.0侧滑菜单~~好了，下面就开始为大家展...
利用SlidingPaneLayout仿Android QQ5.0侧滑
我的专栏
11-21 1781
lidingPaneLayout是V4包中新添加的组件，可以实现两列面板的切换SlidingPanelLayout为在UI最上层的使用提供了一个水平的，多个面板的布局。左边的面板可以看作是一个内容列表或者是浏览，右边的面板的任务是显示详细的内容。 SlidingPaneLayout类也是直接继承于ViewGroup类，所以这个类也是当作容器类使用，在使用时通常可以和Fragement组件一起
Android 高仿 QQ5.0 侧滑菜单效果 自定义控件
01-29
在Android应用开发中，创建一个类似QQ5.0版本的侧滑菜单效果是提升用户体验的重要方式之一。这种设计不仅美观，而且提供了便捷的导航功能。本文将深入探讨如何实现这样一个自定义控件，并重点关注其中的缩放效果。 ...
Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭【学习鸿洋_视频博客笔记总结】
03-22
本篇文章将深入探讨如何实现“Android高仿QQ5.0侧滑菜单效果”，这一特性是通过自定义控件来达成的，旨在帮助开发者们提升应用的交互性和美观度。 首先，我们需要理解QQ5.0的侧滑菜单设计。这个设计允许用户从屏幕...
Android 超高仿 QQ5.0 侧滑菜单项目完整实例代码
09-14
【Android超高仿QQ5.0侧滑菜单项目完整实例代码】是一个针对Android开发者的实践教程，旨在教开发者如何实现类似QQ5.0版本中的侧滑菜单效果。这个实例代码是基于CSDN博主的文章，你可以通过提供的链接在博客中找到更...
Android 高仿 QQ5.0 侧滑左边菜单效果
01-31
在Android应用开发中，创建一个类似QQ5.0的侧滑左边菜单效果是常见的需求，它为用户提供了方便快捷的导航功能。这个效果通常被称为DrawerLayout，源自Android SDK中的一个组件，可以实现从屏幕边缘滑出隐藏的菜单。...
Android高级——Logger日志系统
松仔Log的博客
07-11 762
1是因为标签和内容后面跟着’\0’，用来区分和解析。
Android12上实现双以太网卡共存同时访问外网
hxHardway的博客
07-09 266
修改main 表优先级到9999， 作用：eth1 eth1 访问。不去teardown 低分数网线。
Bilibili Android一二面凉经(2024)
景三的专栏
07-09 1077
笔者作为一名双非二本毕业7年老Android, 最近面试了不少公司, 目前已告一段落, 整理一下各家的面试问题, 打算陆续发布出来, 供有缘人参考。今天给大家带来的是《bilibili Android一二面凉经(2024)》。
Laravel Excel导出功能：高效实现数据导出
liuxin33445566的博客
07-08 1170
Laravel Excel导出功能允许开发者将查询结果或其他数据集合转换成Excel格式的文件。这不仅可以提高数据交换的效率，还可以提升用户体验。Laravel Excel支持自定义导出格式，包括自定义单元格样式、合并单元格、添加图片等。这可以通过实现WithEvents等接口来实现。
Android约束布局的概念与属性(1)
学无止境，止于至善
07-08 777
约束布局推荐使用所见即所得的模式进行布局，约束布局的大部分布局可以通过Design视图完成，可以在布局文件的Design视图中采用鼠标拖放操作结合属性栏窗口设置完成约束布局的界面设计，大幅简化布局代码输入和控件间位置关系的人为判断。如图2所示，被选中的控件分别与上方控件左对齐，与右边的控件底对齐，同样也确定了该控件的位置。相对定位是控件对于另一个控件位置的约束，可以让控件相对于其他控件或父控件进行布局，也可以设置控件相对于其他控件或父控件进行上下左右对齐。图中设置为0.6，即控件位于布局宽度60%的位置。
【安卓学习】文本切换器
m0_73241073的博客
07-08 625
文本切换器的使用
android 居中对齐
xie__jin__cheng的博客
07-09 293
android 居中对齐
Android Camera Framework：从基础到高级
小灰灰的博客
07-09 505
在现代移动应用开发中，相机功能已成为许多应用程序的核心组成部分。Android 提供了一个强大的相机框架，允许开发者轻松集成相机功能到他们的应用中。本文将深入探讨 Android Camera Framework 的基础知识、关键组件以及高级功能，帮助开发者充分利用 Android 相机的潜力。是 Camera2 API 的入口点，用于枚举、打开和管理相机设备。通过组合多个曝光捕获，可以实现 HDR 和夜间模式效果。代表一个物理相机设备，可以通过。定义了相机的配置和捕获参数，在使用相机功能之前，需要在。
android inflate 参数含义
最新发布
阿饱同学
07-12 268
在Android开发中，inflate方法用于将 XML 布局文件转换为相应的 View 对象。在调用inflate: 布局资源文件的ID。通常是通过这种形式指定的。: 要附加到的父 ViewGroup。如果传入 null，则不附加到任何父 ViewGroup。这个参数决定了生成的 View 的 LayoutParams。: 是否将生成的 View 直接附加到 root 上。如果为 true，则生成的 View 会被立即添加到 root 中。
基于Android平台开发，天气预报APP
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
07-09 407
【代码】Androidstudio开发，天气预报APP。
1.1 Android启动概览
qq_34358193的博客
07-12 139
总结：Android 启动过程包括启动加载程序、内核加载、初始化进程、Zygote 进程启动、SystemServer 进程启动和最终的用户界面显示。这一系列步骤确保设备硬件和软件的顺利初始化和运行。Android 启动过程从设备加电到显示用户界面，涉及多个阶段。第一节 Android启动概览。第一章 系统启动流程分析。
【Linux】centos7安装PHP7.4报错：libzip版本过低
m0_52985087的博客
07-12 252
原因：当前服务器libzip的版本小于0.11比较低，需要更新升级，而且libzip升级版本不能是1.3.1,1.7.0的。安装完成后，查看是否存在/usr/local/lib/pkgconfig目录,如果存在，验证是否卸载成功：rpm -qa|grep libzip，如无输出信息则卸载成功。也可以直接在download后直接拼接要下载的libzip的版本。注意：只是在当前的shell会话中设置了这个环境变量。验证libzip：whereis libzip。查看服务器上libzip的版本。
android 高仿滚动控件
09-15
总结来说，Android高仿滚动控件是通过对已有滚动控件进行定制和修改，使其外观和行为特性与原有控件相似或相同，并添加自定义功能和样式。开发过程中需要考虑滚动方向、速度、距离等参数，并可采用动画效果和其他...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值