Android webview图片点击事件查看图片

最新推荐文章于 2023-02-17 13:59:51 发布

小北的博客

最新推荐文章于 2023-02-17 13:59:51 发布

阅读量1.8k

点赞数

分类专栏： Android 文章标签： android

本文链接：https://blog.csdn.net/owenchan1987/article/details/53300681

版权

Android 专栏收录该内容

66 篇文章 1 订阅

订阅专栏

思路：

1.webview与js交互；
2.webview添加ontouchListener；
3.通过onTouch实现点击事件，获得点击的x、y坐标；
4.通过x、y坐标的位置，使用js方法获得图片地址，完成点击事件；

优点：

点击事件是通过webview实现，而html只需要获取图片的地址。

代码

public class MainActivity extends Activity implements View.OnTouchListener {

    private String url = "http://news.sina.com.cn/china/xlxw/2016-10-23/doc-ifxwztru6946123.shtml";

    private WebView webview;
    @SuppressLint("JavascriptInterface")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webview = (WebView) findViewById(R.id.web_view);

        webview.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return super.shouldOverrideUrlLoading(view, url);
            }
        });
        webview.loadUrl(url);//登陆一个有图片的URL
        webview.getSettings().setJavaScriptEnabled(true); //支持JS
        webview.addJavascriptInterface(new JsInterface(this), "imageClick"); //JS交互
        webview.setOnTouchListener(this);
    }


    class JsInterface{
        Context context;
        public JsInterface(Context context){
            this.context = context;
        }

        //查看图片url
        @JavascriptInterface
        public void click(String url){
            Intent intent = new Intent();
            intent.putExtra("IMG_URL", url);
            intent.setClass(MainActivity.this, ImageShowActivity.class);
            startActivity(intent);
        }
    }

    float x,y;


    @Override
    public boolean onTouch(View v, MotionEvent event) {
        //通过wenview的touch来响应web上的图片点击事件
        float density = getResources().getDisplayMetrics().density; //屏幕密度
        float touchX = event.getX() / density;  //必须除以屏幕密度
        float touchY = event.getY() / density;
        if(event.getAction() == MotionEvent.ACTION_DOWN){
            x = touchX;
            y = touchY;
        }

        if(event.getAction() == MotionEvent.ACTION_UP){
            float dx = Math.abs(touchX-x);
            float dy = Math.abs(touchY-y);
            if(dx<10.0/density&&dy<10.0/density){
                clickImage(touchX,touchY);
            }
        }
        return false;
    }

    private void clickImage(float touchX, float touchY) {
        //通过触控的位置来获取图片URL
        String js = "javascript:(function(){" +
                "var  obj=document.elementFromPoint("+touchX+","+touchY+");"
                +"if(obj.src!=null){"+ " window.imageClick.click(obj.src);}" +
                "})()";
        webview.loadUrl(js);
    }
}