Android实现类似3D Touch菜单功能

前言

在开发中,我们经常遇到需要菜单功能的实现,我们经常会参考其他人的优秀设计。比如3D Touch菜单,作为iphone6和iphone6s上引人注目的新功能。现在,我们希望尽力来模仿这种菜单设计,尽力,因为系统的差异,会导致很多东西实现起来有难度。

思路

想要尽力模仿这种菜单,经过分析,我觉得主要实现以下几个点:

1)菜单的出现方式,在ios上,方式是用户用手指用力按下,然而在Android上,受限于硬件,我们无法捕捉用力按压这种动作,所以,我改用另一种比较次的方式,长按弹出,捕捉手指长按动作。

2)菜单的界面上,需要处理背景模糊效果。

3)菜单的触摸事件处理,我们看到,手指长按之后,菜单出现,这时候手指不离开屏幕,滑动到菜单某个选项,再抬起,这时候这个选项会相应。

实现

背景模糊处理

经过一番调研,除了调用github上面大神的各种绘图效果库,我们想要自己实现大概有两个思路。

RenderScript方案

RenderScript是由Android3.0引入,用来在Android上编写高性能代码的一种语言。优点:使用方便,Android官方API自带,而且性能处理效果极好,缺点:需要API17以上。

使用非常简单,我们只需要获取RenderScript的实例,传入模糊图像需要的参数

@TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1)
  public Bitmap getRenderScriptBitmap(Context context, int radius, Bitmap bitmapOriginal) {
    RenderScript rs = RenderScript.create(context);
    final Allocation input = Allocation.createFromBitmap(rs, bitmapOriginal);
    final Allocation output = Allocation.createTyped(rs, input.getType());
    final ScriptIntrinsicBlur script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
    script.setRadius(radius);
    script.setInput(input);
    script.forEach(output);
    output.copyTo(bitmapOriginal);
    rs.destroy();
    return bitmapOriginal;
  }

Java代码层实现方案

通过java层代码也可以实现图像的模糊处理,github大神已经为我们实现了这种图像算法

通过FastBlur算法实现图片模糊,没有版本兼容问题,但是如果我们需要模糊的图像不小的时候,我们会发现模糊图像需要的时间远远超过了我们能够接受的范围,如果加载大图的话,那情况就更加糟糕了。一个比较好的处理方式是,在图片进行模糊处理之前,先对图像进行压缩,在图片模糊处理完毕之后,再按照原大小放大,这样就能有效降低模糊处理的耗时。

这里我们做一个版本判断

if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
  mIBlurry = BlurryFactory.createRenderScript();
} else {
  mIBlurry = BlurryFactory.createFastBlur();
}

触摸事件的处理

先来说说模糊层如何出现,肯定是要实现一个全屏效果,关于全屏效果,我们可以通过Dialog,悬浮窗,透明的Activity,或者在DectorView中插入覆盖父布局的视图,这四种方式都可以实现全屏效果,这里,我们选用在DectorView中插入视图的方式来实现。

如何实现呢?

  /**
   * 挂载到某个Activity的最顶层
   * @param activity
   */
  private void attachActivity(Activity activity) {
    ViewParent parent = getParent();
    if(parent != null && parent instanceof ViewGroup) {
      ViewGroup parentView = (ViewGroup) parent;
      parentView.removeView(this);
    }
    FrameLayout decor = (FrameLayout)activity.getWindow().getDecorView();
    FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(
        FrameLayout.LayoutParams.MATCH_PARENT,
        FrameLayout.LayoutParams.MATCH_PARENT);
    decor.addView(this, lp);
  }

前面提到,手指长按,在菜单弹出之后,我们在手指不抬起的情况下,可以选择菜单选项。这样听起来可能有些难以理解,我们都看过很多大神写的View的触摸事件解析,也有自己去研读源码,都对触摸事件传递有一定的了解。

一般情况下,当我们长按界面里的某个View,之后在我们手指抬起之前,所有的触摸事件都会交由这个View来处理,也就是targetView(当某个View消费了触摸事件,那么它就会被设置为targetView,并且接收接下来传递的触摸事件)。那么我们如何在手指不抬起的情况下,让刚刚出现模糊层视图来接管接下来的手指滑动,也就是ACTION_MOVE和ACTION_UP事件呢?

经常一番思考,我想到了一种比较委婉的方式…

我们都知道手指抬起的时候,DecorView以及其子视图都会接收到一个ACTION_UP的触摸事件,这个事件会告诉DecorView,这个手指触摸系列动作已经结束,那么方法来了,我们并不需要手指真的抬起来,只需要模拟一个手指抬起的动作,也就是自己发送一个ACTION_UP事件,就可以让DecorView接收到ACTION_UP事件,然后重新寻找targetView,也就是新出现的模糊层视图,这时候我们再模拟发送一个ACTION_DOWN事件。

  /**
   * 转移触摸事件
   */
  private void transferTouchEvent(final Activity activity) {
    postDelayed(new Runnable() {
      @Override
      public void run() {
        activity.dispatchTouchEvent(MotionEvent.obtain(SystemClock.uptimeMillis(),
            SystemClock.uptimeMillis(), MotionEvent.ACTION_UP, 0f, 0f, 0));
        activity.getWindow().getDecorView().dispatchTouchEvent(MotionEvent.obtain(SystemClock
            .uptimeMillis(), SystemClock.uptimeMillis(), MotionEvent.ACTION_DOWN, 0f, 0f, 0));
      }
    }, 200);
  }

效果图

最后的效果图如下,由于时间比较少,有很多地方没有好好完善,菜单的出现角度以及菜单的样式不够美观,同时没有判断菜单出现在ICON上面还是下面。

github项目地址:点击打开地址

效果思路仍不够完善,待更好的方案。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android界面设计(APP设计趋势 左侧隐藏菜单右边显示content)

    相关文章android popwindow实现左侧弹出菜单层http://www.jb51.net/article/33533.htm 移动App设计的13大精髓http://www.jb51.net/article/33534.htm 这文章讲述了2013年未来的移动APP设计趋势,感觉挺有道理的.wp8的平面界面设计已经取得很大的成功,很多应用也都是采取相同的设计如zaker,还有类似本文要展示的左侧导航菜单右边显示主要内容的设计,通过menu菜单或者左右拖动可以弹出左侧导航菜单,国内的应用

  • android popwindow实现左侧弹出菜单层及PopupWindow主要方法介绍

    PopupWindow可以实现浮层效果,主要方法有:可以自定义view,通过LayoutInflator方法:可以出现和退出时显示动画:可以指定显示位置等. 为了将PopupWindow的多个功能展现并力求用简单的代码实现,编写了一个点击按钮左侧弹出菜单的功能,实现出现和退出时显示动画效果并点击其他区域时弹出层自动消失,效果图如下: 源码: 1.PopwindowOnLeftActivity.java 复制代码 代码如下: package com.pop.main; import android

  • Android仿QQ空间底部菜单示例代码

    之前曾经在网上看到Android仿QQ空间底部菜单的Demo,发现这个Demo有很多Bug,布局用了很多神秘数字.于是研究了一下QQ空间底部菜单的实现,自己写了一个,供大家参考.效果如下图所示:   1.实现原理很简单,底部菜单是一个水平分布的LinearLayout,里面又是五个LinearLayout,它们的layout_weight都为1,意味着底部菜单的子控件将屏幕宽度平均分为5部分.五个LinearLayout除了中间那个,其余都在里面放置ImageView和TextView(中间先空

  • Android ListView长按弹出菜单二种实现方式示例

    复制代码 代码如下: /** * 知识点1:ListView item:两种长按弹出菜单方式* 知识点2:ListView SimpleAdapter的使用* 知识点 3:在java代码中创建一个ListView*/ public class ListOnLongClickActivity extends Activity {         private LinearLayout myListViewlayout;         private ListView mListView;   

  • Android实现原生侧滑菜单的超简单方式

    先来看看效果图 当你点击菜单可以更改图标,例如点击happy,首页就会变一个笑脸,这个实现的过程超级简单 你需要使用ToolBar与DrawableLayout两个比较新的控件 首先要写三个xml布局文件,我这里的布局文件是使用了include标签嵌入的,代码如下 headbar_toolbar.xml <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar

  • Android开发技巧之我的菜单我做主(自定义菜单)

    Android SDK本身提供了一种默认创建菜单的机制.但通过这种机制创建的菜单虽然从功能上很完备,但在界面效果上实在是有点"土".对于一个拥有绚丽界面的程序配上一个有点"土"的菜单,会使用户感觉很怪,甚至会使绚丽的界面大打折扣.实际上,对于如此灵活和强大的Android系统,修改菜单的样式只是小菜一碟.为程序加入漂亮菜单的方法很多.在本节先介绍一种比较常用的方法,就是通过onKeyDown事件方法和PopupWindow实现自定义的菜单.至于通过这种技术能否设计出

  • android底部菜单栏实现原理与代码

    上一个项目已经做完了,这周基本上没事,所以整理了下以前的项目,想把一些通用的部分封装起来,这样以后遇到相似的项目就不用重复发明轮子了,也节省了开发效率.今天把demo贴出来一是方便以后自己查询,二是希望同时也能帮到大家. 底部菜单栏很重要,我看了一下很多应用软件都是用了底部菜单栏做.我这里使用了tabhost做了一种通用的(就是可以像微信那样显示未读消息数量的,虽然之前也做过但是layout下的xml写的太臃肿,这里去掉了很多不必要的层,个人看起来还是不错的,所以贴出来方便以后使用). 先看一下

  • Android左右滑出菜单实例分析

    现在的Android应用,只要有一个什么新的创意,过不了多久,几乎所有的应用都带这个创意.这不,咱们公司最近的一个持续性的项目,想在首页加个从左滑动出来的菜单,我查阅网上资料,并自己摸索,实现了左.右两边都能滑出菜单,并且,左.右菜单中,都可以加ListView等这类需要解决GestureDetector冲突的问题(如在首页面中,含有ListView,上下滚动时,左右不动,相反,左右滑动菜单时,上下不动,听着头就大了吧!) 先上几张图,给大家瞧瞧,对整体有个了解:  一.首页布局: 复制代码 代

  • 基于Android实现点击某个按钮让菜单选项从按钮周围指定位置弹出

    Android Material Design:PopupMenu Android Material Design 引入的PopupMenu类似过去的上下文菜单,但是更灵活. 如图所示: 现在给出实现上图PopupMenu的代码. 本例是一个普通的Button触发弹出PopupMenu. 测试的MainActivity.java : package zhangphil.materialdesign; import android.app.Activity; import android.os.B

  • 安卓(Android)实现3DTouch效果

    本篇博客要做的效果图: 来个低质量动图: 这个动图效果不是很好,实际上模糊效果应该是像上面第一张图那样的,后面会放出代码,有兴趣的可以试着运行一下看看效果. 先说一下思路,我们要实现这个效果其实只需要掌握几个东西: 1.屏幕截图 2.模糊高斯模糊) 3.添加视图 4.弹出动画 5.处理长按事件 6.优化(模糊速度和强度) 流程:当用户长按一个Item的时候,我们先截取一张当前屏幕的图片,接着将这张图片进行压缩后再进行高斯模糊,再覆盖在整个布局上面(包括覆盖Toolbar),这样界面模糊的效果就出

随机推荐