Android開發學習之路-3DTouch效果模仿

来源:http://www.cnblogs.com/Fndroid/archive/2016/08/05/5740236.html
-Advertisement-
Play Games

3D Touch是什麼效果的大家應該都知道了。什麼?不知道,那也沒辦法呀,我也沒有iPhone 6s演示給你看的。 本篇博客要做的效果圖: 來個低質量動圖: 這個動圖效果不是很好,實際上運行是很順滑的,而且模糊效果應該是像上面第一張圖那樣的,後面會放出代碼,有興趣的可以試著運行一下看看效果。 先說一 ...


3D Touch是什麼效果的大家應該都知道了。什麼?不知道,那也沒辦法呀,我也沒有iPhone 6s演示給你看的。

本篇博客要做的效果圖:

來個低質量動圖:

這個動圖效果不是很好,實際上運行是很順滑的,而且模糊效果應該是像上面第一張圖那樣的,後面會放出代碼,有興趣的可以試著運行一下看看效果。

 

 

先說一下思路,我們要實現這個效果其實只需要掌握幾個東西:

流程:當用戶長按一個Item的時候,我們先截取一張當前屏幕的圖片,接著將這張圖片進行高斯模糊,再覆蓋在整個佈局上面(包括覆蓋Toolbar),這樣界面模糊的效果就出來了。接著我們動態的向界面添加一個CardView來呈現我們的Item佈局,這個CardView要出現在我們點擊的對應的Item上。最後添加一個對應3D Touch彈出的動畫即可。

 

接下來我們一步一步的完成整個流程:

① 屏幕截圖

這一部分相對比較簡單,因為我們要得到當前屏幕顯示內容的Bitmap是有現成方法的,代碼如下:

    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>

可以看到我們最外層用了一個FrameLayout,原因是我們需要往整個佈局中覆蓋一個高斯模糊了的截圖,可以看到最下麵的ImageView就是用來做模糊效果的,最開始我們只需要給它的ImageAlpha設置為0讓其透明即可。最下麵的CardView則是彈出的控制項,這個等下再說。我們截圖的root是FrameLayout下的LinearLayout,因為我們需要讓ToolBar也模糊化。

 

② 高斯模糊

這個在我的上一篇博客--動態高斯模糊怎麼做中已經說過了,可以進行參考,這個給出對應的代碼:

    private Bitmap blur(Bitmap bitmap, float radius) {
        Bitmap output = Bitmap.createBitmap(bitmap); // 創建輸出圖片
        RenderScript rs = RenderScript.create(this); // 構建一個RenderScript對象
        ScriptIntrinsicBlur gaussianBlue = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs)); //
        // 創建高斯模糊腳本
        Allocation allIn = Allocation.createFromBitmap(rs, bitmap); // 開闢輸入記憶體
        Allocation allOut = Allocation.createFromBitmap(rs, output); // 開闢輸出記憶體
        gaussianBlue.setRadius(radius); // 設置模糊半徑,範圍0f<radius<=25f
        gaussianBlue.setInput(allIn); // 設置輸入記憶體
        gaussianBlue.forEach(allOut); // 模糊編碼,並將記憶體填入輸出記憶體
        allOut.copyTo(output); // 將輸出記憶體編碼為Bitmap,圖片大小必須註意
        rs.destroy(); // 關閉RenderScript對象,API>=23則使用rs.releaseAllContexts()
        return output;
    }

 配置對應Module的build.gradle文件:

    defaultConfig {
        ...
        renderscriptTargetApi 18
        renderscriptSupportModeEnabled true
    }

 

 ③ 彈出視圖

這個視圖我們需要將Item的View添加到CardView中,並且讓CardView的位置在對應Item位置之上。

    // 顯示對應的卡片
    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); // 獲取對應控制項
        tv.setText(data.get(position).get("name")); // 將Item對應控制項的值設置回去
        newView.setBackgroundColor(Color.WHITE);
        // 設置卡片的樣式,位置通過margintop來計算
        FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(view.getWidth() - 30, view.getHeight());
        params.topMargin = (int) (view.getY() + mToolbar.getHeight()); // 卡片的marginTop設置為item的Y加上toolbar的高度
        params.leftMargin = 15;
        params.rightMargin = 15;
        mCardView.setVisibility(View.VISIBLE);
        mCardView.setLayoutParams(params);
        mCardView.addView(newView, view.getLayoutParams()); // 把View載入進CardView,並設置樣式為item樣式
        startAnimate(mCardView); // 播放動畫
    }

 這裡不能直接把item的view載入進CardView中,因為item的View已經有父佈局了,會拋異常。解決辦法是重新根據佈局映射一個,然後填充數據進去。接著設定卡片的位置信息和大小信息,因為我們要讓卡片顯示在對應Item上面。

 

④ 彈出動畫

這是比較簡單的部分了,我們直接使用PropertyValuesHolder來做一個彈出和收縮的動,因為我們需要同時縮放X和Y,當然也可以用其他方法,代碼如下:

    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); // 同時縮放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); // 按順序執行兩個動畫
        animatorSet.start();
    }

 

⑤ 監聽長按事件

因為這裡只是使用了ListView來簡化這個內容,可以直接通過已有監聽器來實現:

 1     @Override
 2     public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) {
 3         mCover.setImageBitmap(blur(blur(getScreenImage(), 25f),25f)); // 對截取的圖片兩次高斯模糊
 4         mCover.setVisibility(View.VISIBLE);
 5         mCover.setImageAlpha(0);
 6         new Thread(new Runnable() {
 7             int progress = 50;
 8 
 9             @Override
10             public void run() {
11                 while (progress < 255) {
12                     try {
13                         Thread.sleep(1);
14                     } catch (InterruptedException e) {
15                         e.printStackTrace();
16                     }
17                     Message msg = new Message();
18                     msg.obj = progress++;
19                     mHandler.sendMessage(msg);
20                 }
21             }
22         }).start();
23         showView(position, view);
24         return true;
25     }

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

源碼地址:Github

 

感謝支持。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本以為解決跨域上傳後沒有問題了,不成想被測試找出一個問題,那就是在手機上拍照上傳後圖片會旋轉。很頭痛,不過沒有辦法,問題還是需要解決的。在查閱了一系列資料後我找到了相應的解決方案,利用exif.js獲取圖片旋轉的方向,然後再轉過來圖片,之後再上傳。這個方案需要修改前面的腳本,同樣的,由於要傳base ...
  • 先舉個簡單的例子, var myCanvas = document.getElementById("myCanvas"); var context= myCanvas.getContext("2d"); context.beginPath(); context.moveTo(150, 50); co ...
  • Android和iOS開發都支持C++開發,可以一套代碼多平臺使用。同時C++難以反編譯的特性也可以為Android開髮帶來代碼的保密,另一native特性也可以提高代碼的運行效率。 一、為什麼使用C/C++ 1. 便於移植,用C/C++寫得庫可以方便在其他的平臺上再次使用。 2. 代碼的保護,由於 ...
  • 本文主要是基於極光推送的SDK封裝的一個快速集成極光推送的類的封裝(不喜勿噴) (1)首先說一下推送的一些原理: Push的原理: Push 的工作機制可以簡單的概括為下圖 圖中,Provider是指某個iPhone軟體的Push伺服器,這篇文章我將使用.net作為Provider。 APNS 是A ...
  • UICollectionViewCell的設置間距 #pragma mark - UICollectionView 大小(寬高,平均一行三個) - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollecti ...
  • 1、首先,先在朋友圈中查看小視頻,點擊發送朋友,通過文件傳輸助手發送到電腦上, 2、打開電腦上的WeChat Files\微信名\video文件夾,裡面保存了你傳到電腦上的視頻和視頻截圖,將這兩個文件通過文件傳輸助手發送到手機上, 3、打開Tencent\MicroMsg目錄,再打開不規則命名、名稱 ...
  • Android 不僅系統版本眾多,機型眾多,而且各個市場都各有各的政策和審核速度,每次發佈一個版本對於開發同學來講都是一種漫長的煎熬。相比於 iOS 兩三天就能達到 80% 的覆蓋速度而言,Android 應用版本升級至少需要兩周才能達到 80% 的升級率,嚴重阻礙了版本迭代速度。也導致**市場上 ... ...
  • 1.Binder死亡代理 這一節首先將介紹Binder類中比較重要的兩個方法linkToDeath和unlinkToDeath。我們知道Binder是運行在服務進程,若服務端進程因為某種原因“死亡”,那麼Binder對象也將隨之而去,因為Binder對象是寄宿在服務端進程中的,這個時候我們的遠程調用 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...