Viewpager和webview里面的轮播图出现了滑动冲突

时间 2019-11-18

标签 viewpager webview 里面出现滑动冲突栏目 Android 繁體版

原文原文链接

http://www.jianshu.com/u/0389e94c1f7ecss

借鉴这个连接的android

mPagerDesc这个对象，主要用来存储轮播海报的坐标的
有四个属性须要设置，这四个属性都须要经过js传过来：
String left, String top, String width, String heightweb

js那边，调用getMessage方法，就要传四个参数：
var box = document.documentElement.getBoundingClientRect();
//须要左，上，右，下坐标
JsHObject.getMessage(box.left, box.top, img_width, height);缓存

document.documentElement，这个也是一个element，因此就尝试一下把这个传进去了app

因此方法名，变量名很重要，命名对了，别人一眼就知道是什么了
文章说的
getEmementRect(e) 是一个方法，按方法的命名，能够猜到参数是Element类型的
方法体里面，
var box = e.getBoundingClientRect();
var x = box.left;
var y = box.top;ide

这三句代码，能够获取到横坐标和纵坐标，而后另外的宽和高，你已经获取到了，
直接传进去就能够了this

如今老规矩上代码了url

在js里面咱们要找到获取宽高和坐标的地方若是没有找到就找js那边要高度和宽度的位置spa

我这边是对象

var reset_margin_left = function () {
    var img_width = document.body.clientWidth;告诉咱们宽度了
    ele[0].style.height = img_width*7 / 15 + "px";这是告诉咱们高度

//下面是写的重点
    var box = document.documentElement.getBoundingClientRect();获取页面坐标点
    var height = img_width*7 / 15;获取高度
    //须要左，上，右，下坐标
    JsHObject.getMessage(box.left,box.top,img_width,height);//box.top和box.left咱们将左边和上边的左边点以及
   宽高传过去

}

如今就是Android这边了

首先要新建一个类

public class PagerDesc {
        private int top;
        private int left;
        private int right;
        private int bottom;

    public int getTop() {
        return top;
    }

    public void setTop(int top) {
        this.top = top;
    }

    public int getLeft() {
        return left;
    }

    public void setLeft(int left) {
        this.left = left;
    }

    public int getRight() {
        return right;
    }

    public void setRight(int right) {
        this.right = right;
    }

    public int getBottom() {
        return bottom;
    }

    public void setBottom(int bottom) {
        this.bottom = bottom;
    }

    public PagerDesc(int top, int left, int right, int bottom) {
        this.top = top;
        this.left = left;
        this.right = right;
        this.bottom = bottom;
    }
}

而后在fragment或者activity里面webview

wv_home.addJavascriptInterface(new HomeFragment.JsHObject(),"JsHObject");

wv_home.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            //获取y轴坐标
            float y = event.getRawY();
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    if (null != mPagerDesc) {
                        int top = mPagerDesc.getTop();
                        int bottom = top + (mPagerDesc.getBottom() - mPagerDesc.getTop());
                        //将css像素转换为android设备像素并考虑通知栏高度
                        DisplayMetrics metric = getContext().getResources().getDisplayMetrics();
                        top = (int) (top * metric.density) + ScreenUtil.getStatusHeight(getActivity());
                        bottom = (int) (bottom * metric.density) + ScreenUtil.getStatusHeight(getActivity());
                        //若是触摸点的坐标在轮播区域内，则由webview来处理事件，不然由viewpager来处理
                        if (y > top&& y<bottom){
                            wv_home.requestDisallowInterceptTouchEvent(true);
                        }else{
                            wv_home.requestDisallowInterceptTouchEvent(false);
                        }
                    } break;
                case MotionEvent.ACTION_UP:
                    break;
                case MotionEvent.ACTION_MOVE:
                    break;
            }
            return false;
        }
    });
}

private class JsHObject {
    @JavascriptInterface
    public void getMessage(String left, String top, String width, String height){
        Log.e("hheight","hheight="+ height);
        int leftValue = (int) Double.parseDouble(left);
        int topValue = (int) Double.parseDouble(top);
        int widthValue = (int) Double.parseDouble(width);
        int heightValue = (int) Double.parseDouble(height);
        mPagerDesc = new PagerDesc(leftValue, topValue, widthValue, heightValue);
    }
}

这样就能够了。

下面是fragment所有的大家能够借鉴

package com.lsy.tm.fragment;

import android.content.Context;
import android.os.Bundle;
import android.support.annotation.IntegerRes;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.RadioGroup;

import com.lsy.tm.GlobalVar;
import com.lsy.tm.R;
import com.lsy.tm.bean.PagerDesc;
import com.lsy.tm.util.MJavascriptInterface;
import com.lsy.tm.util.ScreenUtil;

import static com.lsy.tm.app.TmApplication.context;
import static com.lsy.tm.app.TmApplication.getContext;

/**
 * Created by lsy on 2017/5/4.
 */

public class HomeFragment extends BaseFagment{
    private  PagerDesc mPagerDesc;
    RadioGroup radiogroup;
    private WebView wv_home;
    private String urlString = "你的地址url";
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.fragment_home_liao,container,false);
        initView(view);
        initDate();
        return view;
    }


    private void initView(final View view) {
        wv_home= (WebView) view.findViewById(R.id.wv_home);
        radiogroup= (RadioGroup) getActivity().findViewById(R.id.radiogroup);
    }

    private void initDate() {
        wv_home.setWebViewClient(new WebViewClient(){});
        wv_home.getSettings().setJavaScriptEnabled(true);
        //设置 缓存模式
        wv_home.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);
        wv_home.setWebChromeClient(new WebChromeClient(){

            public void onProgressChanged(WebView view,int newProgress){
                if (newProgress==100) {
                    if (wv_home.canGoBack()) {
                        radiogroup.setVisibility(View.GONE);
                    } else {
                        radiogroup.setVisibility(View.VISIBLE);

                    }
                }
            }
        });
        WebSettings settings=wv_home.getSettings();
        settings.setAllowFileAccessFromFileURLs(true);
        settings.setAllowUniversalAccessFromFileURLs(true);
        settings.setJavaScriptEnabled(true);//设置js可用
        wv_home.addJavascriptInterface(new HomeFragment.JsHObject(),"JsHObject");
        wv_home.loadUrl(urlString);

        wv_home.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                //获取y轴坐标
                float y = event.getRawY();
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        if (null != mPagerDesc) {
                            int top = mPagerDesc.getTop();
                            int bottom = top + (mPagerDesc.getBottom() - mPagerDesc.getTop());
                            //将css像素转换为android设备像素并考虑通知栏高度
                            DisplayMetrics metric = getContext().getResources().getDisplayMetrics();
                            top = (int) (top * metric.density) + ScreenUtil.getStatusHeight(getActivity());
                            bottom = (int) (bottom * metric.density) + ScreenUtil.getStatusHeight(getActivity());
                            //若是触摸点的坐标在轮播区域内，则由webview来处理事件，不然由viewpager来处理
                            if (y > top&& y<bottom){
                                wv_home.requestDisallowInterceptTouchEvent(true);
                            }else{
                                wv_home.requestDisallowInterceptTouchEvent(false);
                            }
                        } break;
                    case MotionEvent.ACTION_UP:
                        break;
                    case MotionEvent.ACTION_MOVE:
                        break;
                }
                return false;
            }
        });
    }



    /**
     * 点击返回键调用
     * @return true: 由当前页面处理，false:由Activity处理
     */
    @Override
    public boolean onBackPress() {
        if (wv_home.canGoBack()) {
            wv_home.goBack();
            return true;
        }
        return false;
    }


    private class JsHObject {
        @JavascriptInterface
        public void getMessage(String left, String top, String width, String height){
            Log.e("hheight","hheight="+ height);
            int leftValue = (int) Double.parseDouble(left);
            int topValue = (int) Double.parseDouble(top);
            int widthValue = (int) Double.parseDouble(width);
            int heightValue = (int) Double.parseDouble(height);
            mPagerDesc = new PagerDesc(leftValue, topValue, widthValue, heightValue);
        }
    }
}

感谢孤舟指点！