qq侧滑

上一篇博客带大家实现了:Android 自定义控件打造史上最简单的侧滑菜单 ,有兄弟看了以后说,你这滑动菜单过时了呀~QQ5.0的效果还不错~~嗯,的确,上一篇也承诺过,稍微修改上一篇的代码,实现QQ5.0侧滑菜单~~好了,下面就开始为大家展示写一个类QQ的侧滑有多easy ~!

1、原理分析

首先对比一下我们上篇的实现距离QQ的效果还有多远:

差距还是蛮大的

区别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、完整的实现

说了这么多,其实到上一篇史上最简单的侧滑,到QQ5.0的效果的转变,只需要几行代码~~

@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的侧滑,是这样的,就是菜单栏完全隐藏在内容区域下面,如果需要这样需求的:

其实我还满喜欢这样效果的。

实现呢,注释几行代码就实现了:

@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 );  
 
//      ViewHelper.setPivotX(mContent, 0); 
//      ViewHelper.setPivotY(mContent, mContent.getHeight() / 2); 
//      ViewHelper.setScaleX(mContent, rightScale); 
//      ViewHelper.setScaleY(mContent, rightScale); 
 
    }  

好了,虽说最终的实现看起来还是很简单的,看起来,嗯~~但是从无到有的这个过程还是不容易的~~各种尝试,我能说我连蹲坑都在滑QQ的菜单观察么~哈,见笑了;博客中也写出了过程中失败的尝试,希望能够更好的让大家在里面学到些有用的东西~~YEAH!! 就到这,没事就留个言~~~再不留言,我就来个源码请留下邮箱,嘿嘿,开个玩笑~

源码点击下载

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户3030674的专栏

Android5.0新特性之——控件移动动画(初级)

最近开发,UI大牛们设计了好多很炫酷吊炸天的动画,不由得重新学习了一下5.0的ObjectAnimator动画。

14720
来自专栏三流程序员的挣扎

Android 动画总结(7) - ViewGroup 子元素间的动画

然后对有子 View 的 ViewGroup 添加这个属性,比如 RecyclerView:

17910
来自专栏mukekeheart的iOS之旅

iOS学习——Quartz2D学习之UIKit绘制

  在IOS中绘图技术主要包括:UIKit、Quartz 2D、Core Animation和OpenGL ES。其中Core Animation提供动画实现技...

14020
来自专栏C/C++基础

CSS3制作3D水晶糖果按钮

本人仿照20个漂亮 CSS3 按钮效果及优秀的制作教程中的BonBon(Candy)Button实现了其棒棒糖果按钮,如下图所示:

12710
来自专栏HTML5学堂

JavaScript 获取鼠标及元素在页面上的位置

HTML5学堂:JavaScript获取鼠标的位置,大家会想到clientX/Y等属性,灵活的获取鼠标的位置信息,能够便于我们实现各种复杂的页面交互效果,到底还...

40060
来自专栏zcqshine's blog

ajaxFileUpload+ThinkPHP+jqGrid 图片上传与显示

43840
来自专栏计算机编程

Kotlin 自定义 标签viewgroup

一般在java语言中,constructor直接在继承viewgroup后会报错,然后根据自定义快捷键,默认为alt+enter【博主是用的eclipse 的k...

15430
来自专栏blackheart的专栏

1.[Andriod]之Andriod布局 VS WinPhone布局

0.写在前面的话 近来被HTML+CSS的布局折腾的死去活来,眼巴巴的看着CSS3中的flex,grid等更便捷更高效的的布局方式无法在项目中应用,心里那叫一个...

24580
来自专栏一“技”之长

iOS动画开发之三——UIView的转场切换 原

        前两篇博客中,我们分别介绍了UIView动画的两种使用方式,分别为,带block的方式:http://my.oschina.net/u/2340...

8710
来自专栏互联网开发者交流社区

css多浏览常见问题

10730

扫码关注云+社区

领取腾讯云代金券