安卓(Android)實現(xiàn)3DTouch效果
本篇博客要做的效果圖：
來個低質量動圖：
這個動圖效果不是很好，實際上模糊效果應該是像上面第一張圖那樣的，后面會放出代碼，有興趣的可以試著運行一下看看效果。
先說一下思路，我們要實現(xiàn)這個效果其實只需要掌握幾個東西：
1、屏幕截圖
2、模糊高斯模糊）
3、添加視圖
4、彈出動畫
5、處理長按事件
6、優(yōu)化（模糊速度和強度）
流程：當用戶長按一個Item的時候，我們先截取一張當前屏幕的圖片，接著將這張圖片進行壓縮后再進行高斯模糊，再覆蓋在整個布局上面（包括覆蓋Toolbar），這樣界面模糊的效果就出來了。接著我們動態(tài)的向界面添加一個CardView來呈現(xiàn)我們的Item布局，這個CardView要出現(xiàn)在我們點擊的對應的Item上。最后添加一個對應3D Touch彈出的動畫即可。
接下來我們一步一步的完成整個流程：
① 屏幕截圖
這一部分相對比較簡單，因為我們要得到當前屏幕顯示內容的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>
可以看到我們最外層用了一個FrameLayout，原因是我們需要往整個布局中覆蓋一個高斯模糊了的截圖，可以看到最下面的ImageView就是用來做模糊效果的，最開始我們只需要給它的ImageAlpha設置為0讓其透明即可。最下面的CardView則是彈出的控件，這個等下再說。我們截圖的root是FrameLayout下的LinearLayout，因為我們需要讓ToolBar也模糊化。
② 高斯模糊
這個在我的上一篇博客--動態(tài)高斯模糊怎么做中已經說過了，可以進行參考，這個給出對應的代碼：
private Bitmap blur(Bitmap bitmap, float radius) {
Bitmap output = Bitmap.createBitmap(bitmap); // 創(chuàng)建輸出圖片
RenderScript rs = RenderScript.create(this); // 構建一個RenderScript對象
ScriptIntrinsicBlur gaussianBlue = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs)); //
// 創(chuàng)建高斯模糊腳本
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已經有父布局了，會拋異常。解決辦法是重新根據(jù)布局映射一個，然后填充數(shù)據(jù)進去。接著設定卡片的位置信息和大小信息，因為我們要讓卡片顯示在對應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); // 按順序執(zhí)行兩個動畫
animatorSet.start();
}
⑤ 監(jiān)聽長按事件
因為這里只是使用了ListView來簡化這個內容，可以直接通過已有監(jiān)聽器來實現(xiàn)：
@Override
public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) {
mCover.setImageBitmap(blur(blur(getScreenImage(), 25f),25f)); // 對截取的圖片兩次高斯模糊
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行中調用了兩次blur方法來對圖片進行高斯模糊 ，如果看過上一篇博客，每次高斯模糊的最大模糊半徑是25，如果要做到向iOS那也的模糊效果，25是不夠的，所以可以對模糊出來的圖片再模糊化一次，對比圖（左邊為2次模糊，右邊1次）：
⑥ 優(yōu)化
但是實際上，對于一個分辨率比較高的手機，截取的屏幕分辨率較大的情況下，通過多次模糊這樣的做法也是不推薦的。這里可以試想一下，假設我們先獲取到截屏，接著是否能將這個截取的圖片先進行壓縮，畢竟后期還是需要模糊的，也就是這個圖片被壓縮了其實并不影響我們進行模糊（因為到最后都是模糊了）。實際上，當我們進行圖片壓縮的之后，會發(fā)現(xiàn)在相同模糊半徑之下，圖片的模糊效果不同了，如下兩圖：
原因是：高斯模糊采用的算法中確定一個點的顏色是通過這個點附近的其他點來求平均（帶權）得到的，而取附近多是個像素點，就是通過模糊半徑來確定。當圖片被壓縮之后，相同模糊半徑下，每次取樣的區(qū)域就變大了，所以模糊強度就更大了。
這樣，我們就可以不需要進行多次模糊，并且，壓縮圖片后，總像素點變少，模糊速度也就變得更快了。
這里同樣給出圖片壓縮的代碼：
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);
}
總結
以上就是在安卓(Android)實現(xiàn)3DTouch效果的全部內容，剛興趣的可以自己動手實踐起來，希望本文的內容對大家能有所幫助。
相關文章
這篇文章主要介紹了Android購物車編輯實現(xiàn),小編覺得挺不錯的,一起跟隨小編過來看看吧2018-05-05
Android使用Spinner控件實現(xiàn)下拉列表的案例
今天小編就為大家分享一篇關于Android使用Spinner控件實現(xiàn)下拉列表的案例，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-03-03
本文是筆者在學習安卓開發(fā)的過程中的一些經驗之談的分享，希望對大家學習安卓開發(fā)能夠有所幫助。2015-12-12
Android ListView之setEmptyView正確使用方法
這篇文章主要介紹了Android ListView之setEmptyView正確使用方法的相關資料,希望通過本文能幫助到大家使用該方法，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了淺談Flutter解析JSON三種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
在一些項目開發(fā)中經常會用到城市選擇器功能，今天小編動手擼一個基于flutter 城市選擇citypicker功能，具體實現(xiàn)過程跟隨小編一起看看吧2021-08-08
好久沒有搞android項目了，手都有點松了，今天因為項目的需要，繼續(xù)弄android知識，在項目中登錄界面是項目中比較常見的最基本的功能，對android登錄界面的實現(xiàn)感興趣的朋友一起學習吧2016-11-11
本文將詳細介紹Android-如何將RGB彩色圖轉換為灰度圖方法,需要了解更多的朋友可以參考下2012-11-11
這篇文章主要為大家詳細介紹了Android實現(xiàn)美團下拉功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
Android嵌套滾動是在開發(fā)中經常遇到的一個需求，這篇文章主要介紹了Android嵌套滾動的傳統(tǒng)方法與思路的相關資料，對各位Android開發(fā)者們具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05