歡迎到我的博客 一杯劉 觀看哦~愛你比心(* ￣3)(ε￣ *)

這兩天做了個小項(xiàng)目，其中客戶需求就是在 webview 中添加手勢控制，比如說畫個 L 返回上一級之類的，就像這樣：

帥不帥呀

上圖就是這次的 Demo 的效果

Talk is cheap,show me the code

GestureOverlayView 的使用

這東西就是本次的主角了，一個繼承 FrameLayout 的 view，他可以接收你的手勢，并通過監(jiān)聽接口判斷出你所畫的手勢和預(yù)定的手勢是否相同，直接上代碼吧，在 XML 文件里 like this

<android.gesture.GestureOverlayView
        android:id="@+id/gestureview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gestureColor="@color/colorAccent"
        android:uncertainGestureColor="@color/colorPrimary">
        <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
</android.gesture.GestureOverlayView>

我們把 WebView 包裹起來，讓她感受男人的溫暖，然后，在 MainActivity 中調(diào)用 initGestureOverlay()

// 我把全局變量拿出來方便大家看
private GestureOverlayView mGestureview;
private GestureLibrary mGestureLib;

private void initGestureOverlay() {
        //從 raw 文件夾里取出我們預(yù)制的手勢文件
        mGestureLib = GestureManager.getInstance(getBaseContext()).getGestureLib();
        //設(shè)置筆畫為單筆，也就是一筆畫
        mGestureview.setGestureStrokeType(GestureOverlayView.GESTURE_STROKE_TYPE_SINGLE);
        //畫完筆畫后到消失的間隔
        mGestureview.setFadeOffset(0);
        //筆畫粗細(xì)
        mGestureview.setGestureStrokeWidth(15);
        //重點(diǎn)啊啊啊，設(shè)置 GestureOverlayView 不攔截觸摸事件，
        // 不設(shè)置的話，webview 是沒法相應(yīng)我們的滑動事件的
        mGestureview.setEventsInterceptionEnabled(false);
        //精髓接口，通過他我們可以判斷用戶的手勢是不是我們想接收的手勢
        mGestureview.addOnGesturePerformedListener(new GestureOverlayView.OnGesturePerformedListener() {
            @Override
            public void onGesturePerformed(GestureOverlayView overlay,
                                           Gesture gesture) {
                //recognize()方法接收用戶的手勢，并返回手勢庫中和該手勢相匹配的手勢
                ArrayList<Prediction> predictions = mGestureLib
                        .recognize(gesture);
                if (predictions.size() > 0) {
                    //我們?nèi)∽钭钕嗨频哪莻€手勢
                    //prediction 里面就是我們預(yù)制的 手勢名稱 和 相匹配的分值 兩個變量
                    Prediction prediction = (Prediction) predictions.get(0);
                    //如果分?jǐn)?shù)大于 1.0 并且 匹配出來的手勢名稱是我們預(yù)制的 “back” 字符串
                    if (prediction.score > 1.0 && prediction.name.equals("back")) {
                        if (mWebview.canGoBack()) {
                            //webview 回退上一級
                            mWebview.goBack();
                        } else {
                            Toast.makeText(MainActivity.this, "已經(jīng)是首頁啦", Toast.LENGTH_SHORT).show();
                        }
                    }
                }
            }
        });
    }

這樣我們就能控制通過手勢控制 webview 的返回啦，當(dāng)然手勢的監(jiān)聽在這里，你想干啥都行

修改手勢

我不說話，就上圖

依舊很帥啊

恩，我們把 L 改成向右滑，其實(shí)改手勢也沒啥，就是把 raw 文件夾下的手勢庫文件更新一下就行

public void changeBackGesture(Gesture gesture){
        mGestureLib.removeEntry("back");
        mGestureLib.addGesture("back", gesture);
        Toast.makeText(mContext, "成功了，快去試試吧", Toast.LENGTH_SHORT).show();
    }

把我們改好的手勢 Gesture 傳進(jìn)來，通過 GestureLibrary 修改一下就好了，那怎么獲取這么手勢呢？

mEditoverlay.addOnGestureListener(new GestureOverlayView.OnGestureListener() {
            @Override
            public void onGestureStarted(GestureOverlayView overlay, MotionEvent event) {

            }

            @Override
            public void onGesture(GestureOverlayView overlay, MotionEvent event) {

            }

            @Override
            public void onGestureEnded(GestureOverlayView overlay, MotionEvent event) {
                mGesture = overlay.getGesture();
            }

            @Override
            public void onGestureCancelled(GestureOverlayView overlay, MotionEvent event) {

            }
        });

我們通過這個 OnGestureListener() 接口來獲取手勢完成時的手勢，傳給剛才的方法就行了

手勢庫

說了半天，raw 下面的這個手勢庫是啥啊，恩，你記不記得

mGestureLib = GestureLibraries.fromRawResource(mContext, R.raw.gestures);

他制定了一個手勢庫的位置讓 GestureLibraries 去加載，GestureLibraries 也可以從文件中獲取

GestureLibraries.fromFile()

位置你可以自己指定，什么？你問我 Demo 里的 Gesture 文件怎么來的？我會告訴你我生成了一個放進(jìn) raw 里面的嗎，啊哈哈哈哈...

更多的細(xì)節(jié)，建議直接看代碼，注釋很全，也方便復(fù)制粘貼...

源碼傳送門 Github