同步发表于http://avenwu.net/2015/02/24/custom_slide_panel_layout_as_reside_style_on_dribble_and_qq

Fork on github https://github.com/avenwu/support

14年的时候曾经在csdn上看到过一篇介绍Android中ResideMenu实现的推荐项目,也分析了一把,详见Android控件源码分析--AndroidResideMenu菜单

,那时候QQ还没有redisemenu的效果。效果还是不错的,但是有一个确定就是不支持平滑拖动时对菜单,容器的控制,只是简单的动画实现。

项目灵感据说是来自于dribble网站上的两个交互设计原型:



相关链接如下

1116265-Instasave-iPhone-App

https://dribbble.com/shots/1114754-Social-Feed-iOS7

现在QQ的侧滑ResideMenu效果和上面非常类似,同时支持平滑拖动的处理;

网络上也有一些高仿QQ策划效果的实现,比如基于HorizonalScrollView的,基于SlideMenu修改的,都是不错的思路;本文打算基于android 官方v4包进行扩展,还是更偏向使用官方的东西:)

下面是qq效果和自定义的效果:



实现

基于v4扩展包的SlidePanelLayout可以比较方便就实现需要的效果。

核心在于对互动状态的处理,SlidePanelLayout有一个setPanelSlideListener监听,类似于onScroll,通过这个回调可以很容易知道当前欢动的百分比,从而改变视图的位置,实现动画中效果。

需要注意的是这里用到了level 11以后的方法,所以如果要兼容11以前的设备可以用nineoldedroid做修改。

package net.avenwu.support.widget;

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.os.Build;
import android.support.v4.widget.SlidingPaneLayout;
import android.util.AttributeSet;
import android.view.View; /**
* Support level 11 and later;
* TODO use nineolddroid for devices under level 11
* <p/>
* Created by chaobin on 2/18/15.
*/
@TargetApi(11)
public class CustomSlidePanelLayout extends SlidingPaneLayout {
protected View mMenuPanel;
protected float mSlideOffset;
protected boolean isCustomable = false; public CustomSlidePanelLayout(Context context) {
this(context, null);
} public CustomSlidePanelLayout(Context context, AttributeSet attrs) {
this(context, attrs, -1);
} public CustomSlidePanelLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
isCustomable = true;
setPanelSlideListener(new SimplePanelSlideListener() {
@Override
public void onPanelSlide(View panel, float slideOffset) {
mSlideOffset = slideOffset;
if (mMenuPanel == null) {
final int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
final View child = getChildAt(i);
if (child != panel) {
mMenuPanel = child;
break;
}
}
}
final float scaleLeft = 1 - 0.3f * (1 - slideOffset);
mMenuPanel.setPivotX(-0.3f * mMenuPanel.getWidth());
mMenuPanel.setPivotY(mMenuPanel.getHeight() / 2f);
mMenuPanel.setScaleX(scaleLeft);
mMenuPanel.setScaleY(scaleLeft); final float scale = 1 - 0.2f * slideOffset;
panel.setPivotX(0);
panel.setPivotY(panel.getHeight() / 2.0f);
panel.setScaleX(scale);
panel.setScaleY(scale);
}
});
setSliderFadeColor(0);
} } @Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (isCustomable) {
dimOnForeground(canvas);
}
} @Override
protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
boolean result = super.drawChild(canvas, child, drawingTime);
if (isCustomable && child == mMenuPanel) {
dimOnForeground(canvas);
}
return result;
} /**
* dim the view
*
* @param canvas
*/
private void dimOnForeground(Canvas canvas) {
canvas.drawColor(Color.argb((int) (0xff * (1 - mSlideOffset)), 0, 0, 0));
}
}

相关链接

  1. https://github.com/romaonthego/RESideMenu
  2. https://github.com/SpecialCyCi/AndroidResideMenu

基于SlidePanelLayout实现ResideMenu的更多相关文章

  1. 【转】仿QQ5.0侧滑菜单ResideMenu

    本文由孙国威 原创.如需转载,请注明出处! 原文:http://blog.csdn.net/manoel/article/details/39013095 为了后续对这个项目进行优化,比如透明度动画. ...

  2. 最近帮客户实施的基于SQL Server AlwaysOn跨机房切换项目

    最近帮客户实施的基于SQL Server AlwaysOn跨机房切换项目 最近一个来自重庆的客户找到走起君,客户的业务是做移动互联网支付,是微信支付收单渠道合作伙伴,数据库里存储的是支付流水和交易流水 ...

  3. 自定义基于 VLC 的视频播放器

    前言(蛋疼的背景故事) 前段时间,接了一个小项目,有个需求是要在系统待机一段时间以后,循环播放 MV(类似于 Windows 系统的屏幕保护). 听到这个需求,我首先想到的是 MediaPlayer ...

  4. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  5. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  6. 基于spring注解AOP的异常处理

    一.前言 项目刚刚开发的时候,并没有做好充足的准备.开发到一定程度的时候才会想到还有一些问题没有解决.就比如今天我要说的一个问题:异常的处理.写程序的时候一般都会通过try...catch...fin ...

  7. Spring基于AOP的事务管理

                                  Spring基于AOP的事务管理 事务 事务是一系列动作,这一系列动作综合在一起组成一个完整的工作单元,如果有任何一个动作执行失败,那么事务 ...

  8. 基于本地存储的kvm虚拟机在线迁移

    基于本地存储的kvm虚拟机在线迁移 kvm虚拟机迁移分为4种(1)热迁移基于共享存储(2)热迁移基于本地存储(3)冷迁移基于共享存储(4)冷迁移基于本地存储 这里介绍的是基于本地存储的热迁移 动态块迁 ...

  9. 使用C#处理基于比特流的数据

    使用C#处理基于比特流的数据 0x00 起因 最近需要处理一些基于比特流的数据,计算机处理数据一般都是以byte(8bit)为单位的,使用BinaryReader读取的数据也是如此,即使读取bool型 ...

随机推荐

  1. Create My MySQL configuration by Percona

    本文地址:http://www.cnblogs.com/yhLinux/p/4013065.html https://tools.percona.com/ Percona是一款在线自动生成MySQL配 ...

  2. Windows Phone 8.1 新特性 - 控件之应用程序栏

    2014年4月3日的微软Build 2014 大会上,Windows Phone 8.1 正式发布.相较于Windows Phone 8,不论从用户还是开发者的角度,都产生了很大的变化.接下来我们会用 ...

  3. Programming Assignment 4: 8 Puzzle

    The Problem. 求解8数码问题.用最少的移动次数能使8数码还原. Best-first search.使用A*算法来解决,我们定义一个Seach Node,它是当前搜索局面的一种状态,记录了 ...

  4. H3C dhcp 中继

    需求描述RT1作为DHCP服务器创建两个全局地址池:192.168.10.0/24 192.168.20.0/24 RT1和RT3属于VLAN 10 RT2属于VLAN 20 在交换机上配置DHCP中 ...

  5. 第40讲:Set、Map、TreeSet、TreeMap操作代码实战

    今天来看下set map的操作,让我们从代码出发 val data = mutable.Set.empty[Int] data ++= List(1,2,3)//在空set上加入列表 data += ...

  6. 【整理】-- C++ 多线程

    os:ubuntu   c++ 1.创建线程 #include <iostream> #include <pthread.h> //多线程相关操作头文件,可移植众多平台 usi ...

  7. C++混合编程之idlcpp教程Lua篇(4)

    上一篇在这  C++混合编程之idlcpp教程Lua篇(3) 与前面的工程相似,工程LuaTutorial2中,同样加入了三个文件 LuaTutorial2.cpp, Tutorial2.i, tut ...

  8. Android 5.x特性概览四

    上节,我们说了palatte及其特性,这里我们介绍Android 5.x的另一个特性视图与阴影. 在第一节,我们就提到了Material Design 一大特性就是就是扁平化,倘若说 iOS 的扁平化 ...

  9. 通过git rebase修改commit message

    今天发现一个项目的git commit message中的单词拼错了,需要修改一下.但这样简单的修改,需要通过git rebase才能完成. 首先要git rebase到需要修改message的那个c ...

  10. JAXB玩转命名空间

    声明:如果你正在发愁xml命名空间及其前缀问题,那么请继续,否则请跳过 本文讲解使用jaxb结合dom4j的XMLFilterImpl过滤器实现序列化和反序列化的完全控制 主要实现以下功能 序列化及反 ...