GestureOverlayView 给你的 WebView 添

欢迎到我的博客 一杯刘 观看哦~爱你比心(* ￣3)(ε￣ *)

这两天做了个小项目，其中客户需求就是在 webview 中添加手势控制，比如说画个 L 返回上一级之类的，就像这样：

帅不帅呀

上图就是这次的 Demo 的效果

Talk is cheap,show me the code

GestureOverlayView 的使用

这东西就是本次的主角了，一个继承 FrameLayout 的 view，他可以接收你的手势，并通过监听接口判断出你所画的手势和预定的手势是否相同，直接上代码吧，在 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 中调用 initGestureOverlay()

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

private void initGestureOverlay() {
        //从 raw 文件夹里取出我们预制的手势文件
        mGestureLib = GestureManager.getInstance(getBaseContext()).getGestureLib();
        //设置笔画为单笔，也就是一笔画
        mGestureview.setGestureStrokeType(GestureOverlayView.GESTURE_STROKE_TYPE_SINGLE);
        //画完笔画后到消失的间隔
        mGestureview.setFadeOffset(0);
        //笔画粗细
        mGestureview.setGestureStrokeWidth(15);
        //重点啊啊啊，设置 GestureOverlayView 不拦截触摸事件，
        // 不设置的话，webview 是没法相应我们的滑动事件的
        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) {
                    //我们取最最相似的那个手势
                    //prediction 里面就是我们预制的 手势名称 和 相匹配的分值 两个变量
                    Prediction prediction = (Prediction) predictions.get(0);
                    //如果分数大于 1.0 并且 匹配出来的手势名称是我们预制的 “back” 字符串
                    if (prediction.score > 1.0 && prediction.name.equals("back")) {
                        if (mWebview.canGoBack()) {
                            //webview 回退上一级
                            mWebview.goBack();
                        } else {
                            Toast.makeText(MainActivity.this, "已经是首页啦", Toast.LENGTH_SHORT).show();
                        }
                    }
                }
            }
        });
    }

这样我们就能控制通过手势控制 webview 的返回啦，当然手势的监听在这里，你想干啥都行

修改手势

我不说话，就上图

依旧很帅啊

恩，我们把 L 改成向右滑，其实改手势也没啥，就是把 raw 文件夹下的手势库文件更新一下就行

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

把我们改好的手势 Gesture 传进来，通过 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 文件怎么来的？我会告诉你我生成了一个放进 raw 里面的吗，啊哈哈哈哈...

更多的细节，建议直接看代码，注释很全，也方便复制粘贴...

源码传送门 Github