前言

在開(kāi)發(fā)中，我們經(jīng)常遇到需要菜單功能的實(shí)現(xiàn)，我們經(jīng)常會(huì)參考其他人的優(yōu)秀設(shè)計(jì)。比如3D Touch菜單，作為iphone6和iphone6s上引人注目的新功能?，F(xiàn)在，我們希望盡力來(lái)模仿這種菜單設(shè)計(jì)，盡力，因?yàn)橄到y(tǒng)的差異，會(huì)導(dǎo)致很多東西實(shí)現(xiàn)起來(lái)有難度。

思路

想要盡力模仿這種菜單，經(jīng)過(guò)分析，我覺(jué)得主要實(shí)現(xiàn)以下幾個(gè)點(diǎn)：

1）菜單的出現(xiàn)方式，在ios上，方式是用戶用手指用力按下，然而在Android上，受限于硬件，我們無(wú)法捕捉用力按壓這種動(dòng)作，所以，我改用另一種比較次的方式，長(zhǎng)按彈出，捕捉手指長(zhǎng)按動(dòng)作。

2）菜單的界面上，需要處理背景模糊效果。

3）菜單的觸摸事件處理，我們看到，手指長(zhǎng)按之后，菜單出現(xiàn)，這時(shí)候手指不離開(kāi)屏幕，滑動(dòng)到菜單某個(gè)選項(xiàng)，再抬起，這時(shí)候這個(gè)選項(xiàng)會(huì)相應(yīng)。

實(shí)現(xiàn)

背景模糊處理

經(jīng)過(guò)一番調(diào)研，除了調(diào)用github上面大神的各種繪圖效果庫(kù)，我們想要自己實(shí)現(xiàn)大概有兩個(gè)思路。

RenderScript方案

RenderScript是由Android3.0引入，用來(lái)在Android上編寫高性能代碼的一種語(yǔ)言。優(yōu)點(diǎn)：使用方便，Android官方API自帶，而且性能處理效果極好，缺點(diǎn)：需要API17以上。

使用非常簡(jiǎn)單,我們只需要獲取RenderScript的實(shí)例，傳入模糊圖像需要的參數(shù)

@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代碼層實(shí)現(xiàn)方案

通過(guò)java層代碼也可以實(shí)現(xiàn)圖像的模糊處理，github大神已經(jīng)為我們實(shí)現(xiàn)了這種圖像算法。

通過(guò)FastBlur算法實(shí)現(xiàn)圖片模糊，沒(méi)有版本兼容問(wèn)題，但是如果我們需要模糊的圖像不小的時(shí)候，我們會(huì)發(fā)現(xiàn)模糊圖像需要的時(shí)間遠(yuǎn)遠(yuǎn)超過(guò)了我們能夠接受的范圍，如果加載大圖的話，那情況就更加糟糕了。一個(gè)比較好的處理方式是，在圖片進(jìn)行模糊處理之前，先對(duì)圖像進(jìn)行壓縮，在圖片模糊處理完畢之后，再按照原大小放大，這樣就能有效降低模糊處理的耗時(shí)。

這里我們做一個(gè)版本判斷

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

觸摸事件的處理

先來(lái)說(shuō)說(shuō)模糊層如何出現(xiàn)，肯定是要實(shí)現(xiàn)一個(gè)全屏效果，關(guān)于全屏效果，我們可以通過(guò)Dialog，懸浮窗，透明的Activity，或者在DectorView中插入覆蓋父布局的視圖，這四種方式都可以實(shí)現(xiàn)全屏效果，這里，我們選用在DectorView中插入視圖的方式來(lái)實(shí)現(xiàn)。

如何實(shí)現(xiàn)呢？

  /**
   * 掛載到某個(gè)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);
  }

前面提到，手指長(zhǎng)按，在菜單彈出之后，我們?cè)谑种覆惶鸬那闆r下，可以選擇菜單選項(xiàng)。這樣聽(tīng)起來(lái)可能有些難以理解，我們都看過(guò)很多大神寫的View的觸摸事件解析，也有自己去研讀源碼，都對(duì)觸摸事件傳遞有一定的了解。

一般情況下，當(dāng)我們長(zhǎng)按界面里的某個(gè)View，之后在我們手指抬起之前，所有的觸摸事件都會(huì)交由這個(gè)View來(lái)處理，也就是targetView（當(dāng)某個(gè)View消費(fèi)了觸摸事件，那么它就會(huì)被設(shè)置為targetView，并且接收接下來(lái)傳遞的觸摸事件）。那么我們?nèi)绾卧谑种覆惶鸬那闆r下，讓剛剛出現(xiàn)模糊層視圖來(lái)接管接下來(lái)的手指滑動(dòng)，也就是ACTION_MOVE和ACTION_UP事件呢？

經(jīng)常一番思考，我想到了一種比較委婉的方式…

我們都知道手指抬起的時(shí)候，DecorView以及其子視圖都會(huì)接收到一個(gè)ACTION_UP的觸摸事件，這個(gè)事件會(huì)告訴DecorView，這個(gè)手指觸摸系列動(dòng)作已經(jīng)結(jié)束，那么方法來(lái)了，我們并不需要手指真的抬起來(lái)，只需要模擬一個(gè)手指抬起的動(dòng)作，也就是自己發(fā)送一個(gè)ACTION_UP事件，就可以讓DecorView接收到ACTION_UP事件，然后重新尋找targetView，也就是新出現(xiàn)的模糊層視圖，這時(shí)候我們?cè)倌M發(fā)送一個(gè)ACTION_DOWN事件。

  /**
   * 轉(zhuǎn)移觸摸事件
   */
  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);
  }

效果圖

最后的效果圖如下，由于時(shí)間比較少，有很多地方?jīng)]有好好完善，菜單的出現(xiàn)角度以及菜單的樣式不夠美觀，同時(shí)沒(méi)有判斷菜單出現(xiàn)在ICON上面還是下面。

github項(xiàng)目地址：點(diǎn)擊打開(kāi)地址。

效果思路仍不夠完善，待更好的方案。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論