安卓(Android)實(shí)現(xiàn)3DTouch效果

更新時(shí)間：2016年08月15日 15:09:06 投稿：daisy

3DTouch是什么效果的大家應(yīng)該都知道了。本文將介紹在Android中如何實(shí)現(xiàn)3DTouch的效果，有需要的可以參考學(xué)習(xí)。

本篇博客要做的效果圖：

來個(gè)低質(zhì)量動(dòng)圖：

這個(gè)動(dòng)圖效果不是很好，實(shí)際上模糊效果應(yīng)該是像上面第一張圖那樣的，后面會(huì)放出代碼，有興趣的可以試著運(yùn)行一下看看效果。

先說一下思路，我們要實(shí)現(xiàn)這個(gè)效果其實(shí)只需要掌握幾個(gè)東西：

1、屏幕截圖

2、模糊高斯模糊）

3、添加視圖

4、彈出動(dòng)畫

5、處理長按事件

6、優(yōu)化（模糊速度和強(qiáng)度）

流程：當(dāng)用戶長按一個(gè)Item的時(shí)候，我們先截取一張當(dāng)前屏幕的圖片，接著將這張圖片進(jìn)行壓縮后再進(jìn)行高斯模糊，再覆蓋在整個(gè)布局上面（包括覆蓋Toolbar），這樣界面模糊的效果就出來了。接著我們動(dòng)態(tài)的向界面添加一個(gè)CardView來呈現(xiàn)我們的Item布局，這個(gè)CardView要出現(xiàn)在我們點(diǎn)擊的對(duì)應(yīng)的Item上。最后添加一個(gè)對(duì)應(yīng)3D Touch彈出的動(dòng)畫即可。

接下來我們一步一步的完成整個(gè)流程：

① 屏幕截圖

這一部分相對(duì)比較簡單，因?yàn)槲覀円玫疆?dāng)前屏幕顯示內(nèi)容的Bitmap是有現(xiàn)成方法的，代碼如下：

  private Bitmap getScreenImage() { // 截取一張屏幕的圖片
    View view = root;
    view.setBackgroundColor(Color.WHITE);
    view.setDrawingCacheEnabled(true);
    view.buildDrawingCache();
    Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache(), 0, 0, view.getWidth(), view
        .getHeight());
    view.destroyDrawingCache();
    return bitmap;
  }

先說一下布局，這里的布局文件如下所示：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/activity_main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.fndroid.threedtouchdemo.MainActivity">

  <LinearLayout
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      android:background="@color/colorPrimary"
      app:title="@string/app_name"
      app:titleTextColor="#fff"/>

    <ListView
      android:id="@+id/lv"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:listitem="@layout/item"/>
  </LinearLayout>

  <ImageView
    android:id="@+id/cover"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

  <android.support.v7.widget.CardView
    android:id="@+id/cv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:translationZ="5dp"
    app:cardCornerRadius="10dp"/>

</FrameLayout>

可以看到我們最外層用了一個(gè)FrameLayout，原因是我們需要往整個(gè)布局中覆蓋一個(gè)高斯模糊了的截圖，可以看到最下面的ImageView就是用來做模糊效果的，最開始我們只需要給它的ImageAlpha設(shè)置為0讓其透明即可。最下面的CardView則是彈出的控件，這個(gè)等下再說。我們截圖的root是FrameLayout下的LinearLayout，因?yàn)槲覀冃枰?code>ToolBar也模糊化。

② 高斯模糊

這個(gè)在我的上一篇博客--動(dòng)態(tài)高斯模糊怎么做中已經(jīng)說過了，可以進(jìn)行參考，這個(gè)給出對(duì)應(yīng)的代碼：

  private Bitmap blur(Bitmap bitmap, float radius) {
    Bitmap output = Bitmap.createBitmap(bitmap); // 創(chuàng)建輸出圖片
    RenderScript rs = RenderScript.create(this); // 構(gòu)建一個(gè)RenderScript對(duì)象
    ScriptIntrinsicBlur gaussianBlue = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs)); //
    // 創(chuàng)建高斯模糊腳本
    Allocation allIn = Allocation.createFromBitmap(rs, bitmap); // 開辟輸入內(nèi)存
    Allocation allOut = Allocation.createFromBitmap(rs, output); // 開辟輸出內(nèi)存
    gaussianBlue.setRadius(radius); // 設(shè)置模糊半徑，范圍0f<radius<=25f
    gaussianBlue.setInput(allIn); // 設(shè)置輸入內(nèi)存
    gaussianBlue.forEach(allOut); // 模糊編碼，并將內(nèi)存填入輸出內(nèi)存
    allOut.copyTo(output); // 將輸出內(nèi)存編碼為Bitmap，圖片大小必須注意
    rs.destroy(); // 關(guān)閉RenderScript對(duì)象，API>=23則使用rs.releaseAllContexts()
    return output;
  }

配置對(duì)應(yīng)Module的build.gradle文件：

  defaultConfig {
    ...
    renderscriptTargetApi 18
    renderscriptSupportModeEnabled true
  }

③ 彈出視圖

這個(gè)視圖我們需要將Item的View添加到CardView中，并且讓CardView的位置在對(duì)應(yīng)Item位置之上。

  // 顯示對(duì)應(yīng)的卡片
  private void showView(int position, View view){
    newView = LayoutInflater.from(this).inflate(R.layout.item, null); // 加載Itme的布局
    TextView tv = (TextView) newView.findViewById(R.id.item_tv); // 獲取對(duì)應(yīng)控件
    tv.setText(data.get(position).get("name")); // 將Item對(duì)應(yīng)控件的值設(shè)置回去
    newView.setBackgroundColor(Color.WHITE);
    // 設(shè)置卡片的樣式，位置通過margintop來計(jì)算
    FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(view.getWidth() - 30, view.getHeight());
    params.topMargin = (int) (view.getY() + mToolbar.getHeight()); // 卡片的marginTop設(shè)置為item的Y加上toolbar的高度
    params.leftMargin = 15;
    params.rightMargin = 15;
    mCardView.setVisibility(View.VISIBLE);
    mCardView.setLayoutParams(params);
    mCardView.addView(newView, view.getLayoutParams()); // 把View加載進(jìn)CardView，并設(shè)置樣式為item樣式
    startAnimate(mCardView); // 播放動(dòng)畫
  }

這里不能直接把item的view加載進(jìn)CardView中，因?yàn)?code>item的View已經(jīng)有父布局了，會(huì)拋異常。解決辦法是重新根據(jù)布局映射一個(gè)，然后填充數(shù)據(jù)進(jìn)去。接著設(shè)定卡片的位置信息和大小信息，因?yàn)槲覀円尶ㄆ@示在對(duì)應(yīng)Item上面。

④ 彈出動(dòng)畫

這是比較簡單的部分了，我們直接使用PropertyValuesHolder來做一個(gè)彈出和收縮的動(dòng)，因?yàn)槲覀冃枰瑫r(shí)縮放X和Y，當(dāng)然也可以用其他方法，代碼如下：

  private void startAnimate(CardView cardView) {
    PropertyValuesHolder pyhScaleX = PropertyValuesHolder.ofFloat("scaleX", 0.1f, 1.05f);
    PropertyValuesHolder pyhScaleY = PropertyValuesHolder.ofFloat("scaleY", 0.1f, 1.05f);
    ObjectAnimator animator_out = ObjectAnimator.ofPropertyValuesHolder(mCardView, pyhScaleX,
        pyhScaleY); // 同時(shí)縮放X和Y
    animator_out.setInterpolator(new AccelerateDecelerateInterpolator());
    animator_out.setDuration(350);
    PropertyValuesHolder pyhScaleX2 = PropertyValuesHolder.ofFloat("scaleX", 1.05f, 1f);
    PropertyValuesHolder pyhScaleY2 = PropertyValuesHolder.ofFloat("scaleY", 1.05f, 1f);
    ObjectAnimator animator_in = ObjectAnimator.ofPropertyValuesHolder(mCardView, pyhScaleX2,
        pyhScaleY2);
    animator_in.setInterpolator(new AccelerateDecelerateInterpolator());
    animator_in.setDuration(100);

    AnimatorSet animatorSet = new AnimatorSet();
    animatorSet.playSequentially(animator_out, animator_in); // 按順序執(zhí)行兩個(gè)動(dòng)畫
    animatorSet.start();
  }

⑤ 監(jiān)聽長按事件

因?yàn)檫@里只是使用了ListView來簡化這個(gè)內(nèi)容，可以直接通過已有監(jiān)聽器來實(shí)現(xiàn)：

@Override
  public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) {
    mCover.setImageBitmap(blur(blur(getScreenImage(), 25f),25f)); // 對(duì)截取的圖片兩次高斯模糊
    mCover.setVisibility(View.VISIBLE);
    mCover.setImageAlpha(0);
    new Thread(new Runnable() {
      int progress = 50;

      @Override
      public void run() {
        while (progress < 255) {
          try {
            Thread.sleep(1);
          } catch (InterruptedException e) {
            e.printStackTrace();
          }
          Message msg = new Message();
          msg.obj = progress++;
          mHandler.sendMessage(msg);
        }
      }
    }).start();
    showView(position, view);
    return true;
  }

這里的第3行中調(diào)用了兩次blur方法來對(duì)圖片進(jìn)行高斯模糊，如果看過上一篇博客，每次高斯模糊的最大模糊半徑是25，如果要做到向iOS那也的模糊效果，25是不夠的，所以可以對(duì)模糊出來的圖片再模糊化一次，對(duì)比圖（左邊為2次模糊，右邊1次）：

⑥ 優(yōu)化

但是實(shí)際上，對(duì)于一個(gè)分辨率比較高的手機(jī)，截取的屏幕分辨率較大的情況下，通過多次模糊這樣的做法也是不推薦的。這里可以試想一下，假設(shè)我們先獲取到截屏，接著是否能將這個(gè)截取的圖片先進(jìn)行壓縮，畢竟后期還是需要模糊的，也就是這個(gè)圖片被壓縮了其實(shí)并不影響我們進(jìn)行模糊（因?yàn)榈阶詈蠖际悄：耍?shí)際上，當(dāng)我們進(jìn)行圖片壓縮的之后，會(huì)發(fā)現(xiàn)在相同模糊半徑之下，圖片的模糊效果不同了，如下兩圖：

原因是：高斯模糊采用的算法中確定一個(gè)點(diǎn)的顏色是通過這個(gè)點(diǎn)附近的其他點(diǎn)來求平均（帶權(quán)）得到的，而取附近多是個(gè)像素點(diǎn)，就是通過模糊半徑來確定。當(dāng)圖片被壓縮之后，相同模糊半徑下，每次取樣的區(qū)域就變大了，所以模糊強(qiáng)度就更大了。

這樣，我們就可以不需要進(jìn)行多次模糊，并且，壓縮圖片后，總像素點(diǎn)變少，模糊速度也就變得更快了。

這里同樣給出圖片壓縮的代碼：

  private Bitmap getSmallSizeBitmap(Bitmap source, float percent) {
    if (percent > 1 || percent <= 0) {
      throw new IllegalArgumentException("percent must be > 1 and <= 0");
    }
    Matrix matrix = new Matrix();
    matrix.setScale(percent, percent);
    return Bitmap.createBitmap(source, 0, 0, source.getWidth(), source.getHeight(), matrix, true);
  }

總結(jié)

以上就是在安卓(Android)實(shí)現(xiàn)3DTouch效果的全部內(nèi)容，剛興趣的可以自己動(dòng)手實(shí)踐起來，希望本文的內(nèi)容對(duì)大家能有所幫助。

您可能感興趣的文章: