前三篇为大家介绍了如何实现简单的类QQ5.0左侧的侧滑效果,本篇我将带领大家一起探讨一下如何真正实现QQ5.0左侧的侧滑效果,对于本篇的内容与之前的三篇关联性很强,如果前三篇你已经完全掌握,对于这一篇相信也没有什么难处,本篇的重点在于通过Android3.0以后提供的属性动画实现上述显示特效。

  开始之前首先给大家说句抱歉,前三篇由于我自己的编码问题,导致如果你还是以之前的代码设计时,会出现Menu的背景图没有填充整个屏幕,这个怎么解决呢?

  在left_menu.xml中,将background修改为android:background="#0000";

  activity_main.xml代码:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:hyman="http://schemas.android.com/apk/res/com.example.android_qq_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" > <com.example.menu.SlidingMenu
android:id="@+id/slidingMenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/img_frame_background"
hyman:rightPadding="100dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
> <include layout="@layout/left_menu"/>" <LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/qq"
>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="切换按钮"
/>
</LinearLayout> </LinearLayout>
</com.example.menu.SlidingMenu> </RelativeLayout>

  将背景图片添加蓝色标注处。

  其他部分无需改变,下面我们开始分析如何通过属性动画来实现上述效果:

  /**
* 实现抽屉式侧滑效果
*/
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {//l相当于getScrollX()表示Menu左侧的偏移量
super.onScrollChanged(l, t, oldl, oldt); /**
* 区别1:内容区域1.0~0.7 缩放的效果 scale : 1.0~0.0 0.7 + 0.3 * scale
*
* 区别2:菜单的偏移量需要修改
*
* 区别3:菜单的显示时有缩放以及透明度变化 缩放:0.7 ~1.0 1.0 - scale * 0.3 透明度 0.6 ~ 1.0
* 0.6+ 0.4 * (1- scale) ;
*
*/ //设置Menu的显示OR隐藏动画
float scroll = l * 1.0f /mMenuWidth;//1~0
ViewHelper.setTranslationX(mMenu, mMenuWidth*scroll*0.7f); //设置Menu的透明度变化
float leftScale = 0.6f+ 0.4f * (1- scroll);
ViewHelper.setScaleX(mMenu, leftScale);
ViewHelper.setScaleY(mMenu, leftScale);
//设置Menu的缩放比例
float leftAlpha = 1.0f - scroll * 0.3f;
ViewHelper.setAlpha(mMenu, leftAlpha); //设置Content的缩放中心
ViewHelper.setPivotX(mContent, 0);
ViewHelper.setPivotY(mContent, mContent.getHeight()/2);
//设置Content的透明度变化
float rightScale = 0.7f + 0.3f * scroll;
ViewHelper.setScaleX(mContent, rightScale);
ViewHelper.setScaleY(mContent, rightScale); }

  需要提示的就是对于Android3.0以下的系统,不支持属性动画效果,在这里我导入了一个包,大家如果需要可以留言。好了,到这里我们的侧滑效果就完全为大家实现了,请欣赏效果图:

  

QQ5.0左侧滑动显示效果的更多相关文章

  1. 使用DrawerLayout实现QQ5.0侧拉菜单效果

    在上一篇文章中,我们介绍了怎么使用DrawerLayout来实现一个简单的侧拉菜单(使用DrawerLayout实现侧拉菜单),也就是我们常说的抽屉效果,GitHub上类似效果的实现方式非常多,实现出 ...

  2. 仿QQ5.0侧滑菜单

    一.概述 侧滑菜单现在已经非常流行了,目前大概有这么几种:最普通的侧滑,抽屉侧滑,QQ侧滑 注:本文来自慕课网 二.最普通的侧滑 先上图 代码如下: public class MainActivity ...

  3. jquery时间轴tab切换效果实现结合swiper实现滑动显示效果

    需求:根据时间轴进行tab页面内容切换(时间轴需要滑动查看并选择) 实现思路: 结合swiper插件实现滑动显示效果 根据transform: translateX进行左侧切换效果的实现(具体实现cs ...

  4. DragLayout: QQ5.0侧拉菜单的新特效

    一.项目概要 1.1 项目效果如图: 1.2 需要使用到的技术   ViewDragHelper: 要实现和QQ5.0侧滑的特效,需要借助谷歌在2013年I/O大会上发布的ViewDragHelper ...

  5. 安卓开发笔记——自定义HorizontalScrollView控件(实现QQ5.0侧滑效果)

    对于滑动菜单栏SlidingMenu,大家应该都不陌生,在市场上的一些APP应用里经常可以见到,比如人人网,FaceBook等. 前段时间QQ5.0版本出来后也采用了这种设计风格:(下面是效果图) 之 ...

  6. js实现图片滑动显示效果

    js实现图片滑动显示效果 今天用户提出一个需求,要实现一个滑动显示新闻列表的效果,具体就是图片新闻自动滑动显示,鼠标移上去就停止滑动,移开就继续滑动:效果如下: 第一:先用HTML和CSS实现显示,主 ...

  7. 安卓开发笔记——关于开源项目SlidingMenu的使用介绍(仿QQ5.0侧滑菜单)

    记得去年年末的时候写过这个侧滑效果,当时是利用自定义HorizontalScrollView来实现的,效果如下: 有兴趣的朋友可以看看这篇文件<安卓开发笔记——自定义HorizontalScro ...

  8. vue实现左侧滑动删除

    不是很完美,无法做到第一个左滑其他的隐藏删除: 代码来源于 https://segmentfault.com/a/1190000011062124 自己做了写改动,添加父组件点击触发子组件 引入组件 ...

  9. 原生H5页面模拟APP左侧滑动删除效果

    话不多说,往左侧滑动,显示删除,我们先来看一下效果图:如下: 这个布局我就不多说,反正就是一行ul,li, class名“item” js代码如下: $(".item").on(& ...

随机推荐

  1. BZOJ4170 极光(CDQ分治 或 树套树)

    传送门 BZOJ上的题目没有题面-- [样例输入] 3 5 2 4 3 Query 2 2 Modify 1 3 Query 2 2 Modify 1 2 Query 1 1 [样例输出] 2 3 3 ...

  2. 多语言配置--LogisticsPlatform物流平台系统

    先看:LanguageProvider.cs   中几个主要方法 1.读取默认语言 附user.ini文件: 2.获取语言类型 附LanguageType.xml 3.读取语言资源 附:   看ILa ...

  3. Git凭证存储(简单易懂,一学就会,认真看)

    今天给自己提了一个问题,当我们在github.com或者gitlab上面新建仓库,并克隆到本地,首次使用的时候,会被问及用户名密码,但是这两个信息存在哪里呢? 带着这个问题,我开始搜索,并在<P ...

  4. T4模版基础例子

    <#@ template debug="false" hostspecific="true" language="C#" #> ...

  5. Mroonga 3.0.8 发布,MySQL 存储引擎

    Mroonga 3.0.8 支持 REPAIR TABLE 支持损坏的 groonga 数据库. Mroonga 是一个 MySQL 存储引擎,基于 Groonga,提供完整的全文搜索引擎.

  6. 视频教程--ASP.NET MVC 使用 Petapoco 微型ORM框架+NpgSql驱动连接 PostgreSQL数据库

    说好的给园子里的朋友们录制与<ASP.NET MVC 使用 Petapoco 微型ORM框架+NpgSql驱动连接 PostgreSQL数据库> 这篇博客相对应的视频,由于一个月一来没有时 ...

  7. MQTT和WebSocket

    严格来说,MQTT跟WebSocket关系不大.他们不是在一个层级的.   MQTT和TCP.WebSocket的关系可以用下图一目了然:   参考资料: http://www.zhihu.com/q ...

  8. Sensor(ORIENTATION)

    package com.example.sensor01; import java.util.List; import android.hardware.Sensor; import android. ...

  9. 消息中间件与JMS标准

    初识消息中间件 维基百科上对于消息中间件的定义是"Message-oriented middleware(MOM) is software infrastructure focused on ...

  10. 开源项目asmjit——调用自定义方法demo以及windbg调试

    asmjit是一个开源项目,使用它可以将代码即时的编译成机器码,也就是所谓的jit技术. 初次接触这个项目,编写了一个demo,学习它的使用方法. 现将编写的demo以及调试jit生成的机器码的过程总 ...