Android_UI 仿QQ侧滑菜单效果的实现

相信大家对QQ侧滑菜单的效果已经不陌生了吧,侧滑进入个人头像一侧,进行对头像的更改,我的收藏,QQ钱包,我的文件等一系列的操作,今天呢,主要是实现进入侧滑菜单的这一效果原理进行分析.

主要思路分析

1.首先写一个SlideMenu 继承一个帧布局FrameLayout ,因为如果继承自ViewGroup的话,需要我们自己来实现onMeasure方法,而该方法的实现一般比较麻烦且没有必要,所以选择继承系统的已有的控件FrameLayout,不用其他控件是因为FrameLayout最轻量级

2.在布局文件中给SlideMenu添加2个子布局,分别是菜单的布局和主界面的布局

3.移动View的方法总结

通过改变View的scroll的坐标来移动: scrollTo(x,y);//滚动到指定位置 scrollBy(xOffset,yOffset);//滚动多少距离 通过改变View在父View中的布局的位置: offsetLeftAndRight(offset);//同时更改view的left和right offsetTopAndBottom(offset);//同时更改view的top和bottom layout(l,t,r,b);

4.ViewDragHelper 类的介绍

谷歌在2013年I/O开发者大会上提出;

专门用于在ViewGroup中对子View进行拖拽处理;

在19(Android4.4)以及以上的v4包中;

本质是封装了对触摸事件的解析,包括触摸位置,触摸速度以及Scroller的封装,只需要我们在回调方法中指定是否移动,移动多少等等,但是需要注意的是:它只是一个触摸事件的解析类(如GestureDecetor),所以需要我们传递给它触摸事件,它才能工作;

开始创建ViewDragHelper对象

ViewDragHelper viewDragHelper = ViewDragHelper.create(this, callback);

dragHelper 只是触摸事件的解析类,需要将触摸事件传递给它才能工作

1)_触摸事件: 将触摸事件传递给VIewDragHelper 来解析

2)_判断是否需要拦截触摸事件

3)_初始化子view的引用

4)_初始化宽高.在onSizeChanged方法中初始化宽高,因为该方法在onMeasure之后执行

其中这里调用getMeasureWidth() 方法与分别获取左侧菜单的宽,主页面的宽的作用是一样的.

实现ViewDragHelper.Callback 的监听事件

监视view的触摸事件,这里需要考虑到,当进行滑动的时候,可能会触碰到listview的滑动事件,所以这里通过了getViewHorizontalDragRange()方法进行强制横向滑动,当返回值大于0 的时候,即让它强制横向滑动,否则在某些情况下不能水平滑动

控制垂直方向的移动

在onViewPositionChanged()方法中实现一些伴随移动的效果

此方法可以获取view移动的距离

如果当前移动的是main ,那么就让menu 进行伴随移动

移动main ,并限制main的移动

根据滑动的百分比的值,去执行伴随的动画 executeAnim()

松开手指进行回调,该方法会处理手指拾起的缓慢移动

执行动画

这里考虑到了给整个SlideMenu的背景添加阴影遮罩效果,通过getBackground对是否为空时进行添加阴影遮罩效果

//对main的移动进行限制了 private int fixLeft(int newLeft) { if (newLeft > maxLeft) { newLeft = maxLeft; } else if (newLeft < 0) { newLeft = 0; } return newLeft;

需要定义接口回调,将SlideMenu 打开,让滑动和关闭的事件方法暴露

//定义接口回调,将SlideMenu 打开,,滑动和关闭的事件暴露给外界 public interface onSwipeListener { void onOpen(); void onClose(); void onDragging(float fraction); //拖拽过程中的回调 }

以上所述是小编给大家介绍的Android_UI 仿QQ侧滑菜单效果的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

时间: 2024-10-24 19:18:51

Android_UI 仿QQ侧滑菜单效果的实现的相关文章

Android自定义View 仿QQ侧滑菜单的实现代码

先看看QQ的侧滑效果 分析一下 先上原理图(不知道能否表达的清楚 ==) -首先这里使用了 Android 的HorizontalScrollView 水平滑动布局作为容器,当然我们需要继承它自定义一个侧滑视图 - 这个容器里面有一个父布局(一般用LinerLayout,本demo用的是),这个父布局里面有且只有两个子控件(布局),初始状态菜单页的位置在Y轴上存在偏移这样可以就可以形成主页叠在菜单页的上方的视觉效果:然后在滑动的过程程中 逐渐修正偏移,最后菜单页和主页并排排列.原理搞清了实现起来

JS实现超简单的仿QQ折叠菜单效果_javascript技巧

本文实例讲述了JS实现超简单的仿QQ折叠菜单效果.分享给大家供大家参考.具体如下: 这是一款经过精简后的仿QQ折叠菜单代码,以前发过的,不过这个是经过几轮代码精简后的一个版本,而且在各浏览器下的表现也很不错,兼容性没出问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-f-qq-zd-style-menu-codes/ 具体代码如下: <!DOCTYPE html> <html xmlns="http:/

javascript 仿QQ滑动菜单效果代码_javascript技巧

[程序源码] 复制代码 代码如下: var QQ = function() { // 公用函数 function T$(id) { return document.getElementById(id); } function T$$(root, tag) { return (root || document).getElementsByTagName(tag); } function $extend(des, src) { for(var p in src) { des[p] = src[p];

使用RecylerView完成拖动排序高仿qq侧滑删除功能_Android

 最近使用到Recylerview完成拖动排序,侧滑删除,在此记录一下. 需要使用到:ItemTouchHelper.Callback这个类. 效果图: 在有RecylerView的Activity中,除了设置Adapter还需要做的事情有: MyItemTouchHelperCallback callback = new MyItemTouchHelperCallback(adapter); //此类继承ItemTouchHelper.Callback,这是帮助处理RecylerView拖动侧

Android使用Item Swipemenulistview实现仿QQ侧滑删除功能

大家都用过QQ,肯定有人好奇QQ滑动删除Item的效果是怎样实现的,其实我们使用Swipemenulistview就可以简单的实现.先看看我们项目中的效果: 使用的时候可以把Swipemenulistview作为一个library,也可以把Swipemenulistview的源码拷贝到我们的项目中来,使用步骤大致可以分为三步:1.在布局中配置:2.在Java代码中初始化配置:3.按钮点击事件的处理 1.在布局中配置 xml布局文件中只需要简单使用这个自定义的ListView就行了,需要注意的是必

Android自定义控件简单实现侧滑菜单效果_Android

侧滑菜单在很多应用中都会见到,最近QQ5.0侧滑还玩了点花样~~对于侧滑菜单,一般大家都会自定义ViewGroup,然后隐藏菜单栏,当手指滑动时,通过Scroller或者不断的改变leftMargin等实现:多少都有点复杂,完成以后还需要对滑动冲突等进行处理~~今天给大家带来一个简单的实现,史上最简单有点夸张,但是的确是我目前遇到过的最简单的一种实现~~~ 1.原理分析 既然是侧滑,无非就是在巴掌大的屏幕,塞入大概两巴掌大的布局,需要滑动可以出现另一个,既然这样,大家为啥不考虑使用Android

Android中DrawerLayout实现侧滑菜单效果

众所周知,android里面我们很熟悉的一个功能,侧滑菜单效果在以前我们大部分都是用的slidingmenu这个开源框架,自从谷歌官方新出的一个DrawerLayout控件之后,越来越多的应用开始使用谷歌的官方的控件写这个效果了. 话不多说,先来发图以表我滴诚意: 开始写代码 DrawerLayout 是v4包里面的,所以项目里面需要添加v4包,具体怎么添加就不多说了, NavigationView需要在build.gradle里面添加compile 'com.android.support:d

JS实现不使用图片仿Windows右键菜单效果代码_javascript技巧

本文实例讲述了JS实现不使用图片仿Windows右键菜单效果代码.分享给大家供大家参考,具体如下: 这里演示JS不使用图片仿Windows右键菜单效果,这款代码灵活使用了文鼎字,配合CSS和JS做出了这个和系统右键菜单很相似的东东. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-windows-right-button-menu-codes/ 具体代码如下: <HTML> <HEAD> <TITLE>极酷的多级右

Swift侧滑菜单实现仿QQ,菜单带缩放效果

前面我写了一篇文章介绍如何实现侧滑菜单:Swift - 侧滑菜单的实现(样例1:主页向右滑动,露出下方菜单页) 其实现方式是,通过手势拖动主页面移动,从而露出下面的菜单页(其实后面的菜单页是固定不动的). 下面演示另一种样式的实现(模仿手机QQ的侧滑菜单),主页面滑动停靠的过程中会逐渐缩小,同时菜单页也会逐渐移动放大,浮现出来. (注:本文样例是基于前面文章的demo修改的,如果没阅读前文的话可以先去看下.为便于理解,下面将效果分两步实现.) 1,主页停靠侧边时尺寸逐渐缩小 (1)定义了新属性