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);
        }
    }
}