安卓(Android)實(shí)現(xiàn)3DTouch效果
本篇博客要做的效果圖:

來(lái)個(gè)低質(zhì)量動(dòng)圖:

這個(gè)動(dòng)圖效果不是很好,實(shí)際上模糊效果應(yīng)該是像上面第一張圖那樣的,后面會(huì)放出代碼,有興趣的可以試著運(yùn)行一下看看效果。
先說(shuō)一下思路,我們要實(shí)現(xiàn)這個(gè)效果其實(shí)只需要掌握幾個(gè)東西:
1、屏幕截圖
2、模糊高斯模糊)
3、添加視圖
4、彈出動(dòng)畫
5、處理長(zhǎng)按事件
6、優(yōu)化(模糊速度和強(qiáng)度)
流程:當(dāng)用戶長(zhǎng)按一個(gè)Item的時(shí)候,我們先截取一張當(dāng)前屏幕的圖片,接著將這張圖片進(jìn)行壓縮后再進(jìn)行高斯模糊,再覆蓋在整個(gè)布局上面(包括覆蓋Toolbar),這樣界面模糊的效果就出來(lái)了。接著我們動(dòng)態(tài)的向界面添加一個(gè)CardView來(lái)呈現(xiàn)我們的Item布局,這個(gè)CardView要出現(xiàn)在我們點(diǎn)擊的對(duì)應(yīng)的Item上。最后添加一個(gè)對(duì)應(yīng)3D Touch彈出的動(dòng)畫即可。
接下來(lái)我們一步一步的完成整個(gè)流程:
① 屏幕截圖
這一部分相對(duì)比較簡(jiǎn)單,因?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;
}
先說(shuō)一下布局,這里的布局文件如下所示:
<?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就是用來(lái)做模糊效果的,最開始我們只需要給它的ImageAlpha設(shè)置為0讓其透明即可。最下面的CardView則是彈出的控件,這個(gè)等下再說(shuō)。我們截圖的root是FrameLayout下的LinearLayout,因?yàn)槲覀冃枰?code>ToolBar也模糊化。
② 高斯模糊
這個(gè)在我的上一篇博客--動(dòng)態(tài)高斯模糊怎么做中已經(jīng)說(shuō)過(guò)了,可以進(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è)置卡片的樣式,位置通過(guò)margintop來(lái)計(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)畫
這是比較簡(jiǎn)單的部分了,我們直接使用PropertyValuesHolder來(lái)做一個(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)聽長(zhǎng)按事件
因?yàn)檫@里只是使用了ListView來(lái)簡(jiǎn)化這個(gè)內(nèi)容,可以直接通過(guò)已有監(jiān)聽器來(lái)實(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方法來(lái)對(duì)圖片進(jìn)行高斯模糊 ,如果看過(guò)上一篇博客,每次高斯模糊的最大模糊半徑是25,如果要做到向iOS那也的模糊效果,25是不夠的,所以可以對(duì)模糊出來(lái)的圖片再模糊化一次,對(duì)比圖(左邊為2次模糊,右邊1次):

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

原因是:高斯模糊采用的算法中確定一個(gè)點(diǎn)的顏色是通過(guò)這個(gè)點(diǎn)附近的其他點(diǎn)來(lái)求平均(帶權(quán))得到的,而取附近多是個(gè)像素點(diǎn),就是通過(guò)模糊半徑來(lái)確定。當(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效果的全部?jī)?nèi)容,剛興趣的可以自己動(dòng)手實(shí)踐起來(lái),希望本文的內(nèi)容對(duì)大家能有所幫助。
- Android 3D旋轉(zhuǎn)動(dòng)畫效果實(shí)現(xiàn)分解
- Android高級(jí)圖片滾動(dòng)控件實(shí)現(xiàn)3D版圖片輪播器
- Android酷炫動(dòng)畫效果之3D星體旋轉(zhuǎn)效果
- Android編程實(shí)現(xiàn)3D立體旋轉(zhuǎn)效果的實(shí)例代碼
- Android動(dòng)畫之3D翻轉(zhuǎn)效果實(shí)現(xiàn)函數(shù)分析
- Android開發(fā) OpenGL ES繪制3D 圖形實(shí)例詳解
- Android 使用Gallery實(shí)現(xiàn)3D相冊(cè)(附效果圖+Demo源碼)
- Android使用Rotate3dAnimation實(shí)現(xiàn)3D旋轉(zhuǎn)動(dòng)畫效果的實(shí)例代碼
相關(guān)文章
Android錄音功能的實(shí)現(xiàn)以及踩坑實(shí)戰(zhàn)記錄
在Android 開發(fā)過(guò)程中,有些功能是通用的,或者是多個(gè)業(yè)務(wù)方都需要使用的,下面這篇文章主要給大家介紹了關(guān)于Android錄音功能的實(shí)現(xiàn)以及踩坑的相關(guān)資料,需要的朋友可以參考下2022-06-06
Android中關(guān)于JSON相關(guān)應(yīng)用分析
這篇文章主要介紹了Android中關(guān)于JSON相關(guān)應(yīng)用,較為詳細(xì)的分析了Android中關(guān)于json相關(guān)類與使用方法,需要的朋友可以參考下2016-06-06
淺談Android安全風(fēng)險(xiǎn)與防范措施
這篇文章主要介紹了淺談Android安全風(fēng)險(xiǎn)與防范措施,對(duì)安全感興趣的同學(xué)可以參考下2021-04-04
Android 實(shí)現(xiàn)微信長(zhǎng)按菜單 -FloatMenu
在日常開發(fā)中,長(zhǎng)按某個(gè)view出現(xiàn)個(gè)菜單是很常見的需求,下面小編給大家?guī)?lái)了Android 實(shí)現(xiàn)微信長(zhǎng)按菜單 -FloatMenu的實(shí)現(xiàn)思路及具體實(shí)現(xiàn)代碼,感興趣的朋友跟隨腳本之家小編一起看看吧2018-07-07
Android AlarmManager實(shí)現(xiàn)定時(shí)循環(huán)后臺(tái)任務(wù)
這篇文章主要為大家詳細(xì)介紹了Android AlarmManager實(shí)現(xiàn)定時(shí)循環(huán)后臺(tái)任務(wù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06
Android使用GPS獲取用戶地理位置并監(jiān)聽位置變化的方法
這篇文章主要介紹了Android使用GPS獲取用戶地理位置并監(jiān)聽位置變化的方法,實(shí)例分析了Android編程中GPS定位的實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2015-12-12
如何使用SurfaceView實(shí)現(xiàn)魚兒游動(dòng)動(dòng)畫
這篇文章主要教大家如何使用SurfaceView實(shí)現(xiàn)魚兒游動(dòng)動(dòng)畫,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-04-04

