Android学习之WebView初使用

 有一段时间没记录学习日志了，今天初次接触WebView，那么就把第一次简单使用WebView的一些方法给大家分享下。
在html5泛滥的年代，传统app倍感压力，作为新时代的程序猿，得与时俱进，那么就让我们去看看使用webView如何简单的加载网页吧！

首先是布局文件，里面就一个webView控件：

 <?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

   

    <WebView

        android:id="@+id/webView"

        android:layout_width="match_parent"

        android:layout_height="match_parent" />

</LinearLayout>

 

 接下来是java文件：

        webView = (WebView) findViewById(R.id.webView);

 

        webView.getSettings().setLoadWithOverviewMode(true);//设置webview加载的页面的模式

 

        webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);//加载进来的页面自适应居中

        webView.setHorizontalScrollBarEnabled(false);//设置水平滚动条

        webView.setVerticalScrollBarEnabled(true);//设置竖直滚动条

        webView.getSettings().setJavaScriptEnabled(true);//设置可以调用Js

        webView.loadUrl(HttpHelp.yPayUel(fee, xchtrainorderID));//加载网页

这样就可以实现网页的简单调用了，但是这样还不够，此时如果当网页自动跳转时，你会发现我们的app打开了浏览器，并没有在app内部的webView中进行跳转，那是因为WebView默认用系统自带浏览器处理页面跳转。如果我们需要在app内部的webView中进行跳转，还需要设置webView.setWebViewClient();并且重写OnKeyDown()方法，以免按返回键退出当前Activity。

具体设置如下：

 

    webView.setWebViewClient(new WebViewClient() {

              /**

             * 重写加载URL（禁止页面内部调用其他浏览器打开连接）

             * @param view

             * @param url

             * @return

             */

            @Override

            public boolean shouldOverrideUrlLoading(WebView view, String url) {

                view.loadUrl(url);// 使用当前WebView处理跳转

                return true;// true表示此事件在此处被处理，不需要再广播

            }

            //开始加载

            @Override

            public void onPageStarted(WebView view, String url, Bitmap favicon) {

            }

            //加载完成

            @Override

            public void onPageFinished(WebView view, String url) {

            }

            //加载失败

            @Override

            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {

                Toast.makeText(YpayActivity.this, "Oh no! " + description, Toast.LENGTH_SHORT).show();

            }

        });

 

当这样设置后，webView的跳转也是在app内部进行了，是不是很简单，很神奇呀！！！赶快拿出你的双手放键盘上去敲一敲吧！

这只是简单的打开网页，那么要如何使android和js相互调用呢？

1：Android调用Js中的方法：

 

webView.loadUrl("javascript:testmethod()");

 

其中，testmethod()是js中的一个方法，当然你可以把这个方法改成其他的方法，也就是android调用其他的方法。

2：Js调用Android的方法

 

<a onClick="window.demo.clickOnAndroidTest()">

 

其中，"demo"是在android中指定的调用名称，代码中的clickOnAndroidTest()是“demo”对应的对象：new JsDemo() 中的一个方法。如下所示，在Android端的写法：

webView.addJavascriptInterface(new JsDemo(), "demo");

 

那么Js调用的方法总结如下：window.Android指定调用名称.调用的对象中的方法()

3：双向交互

把以上两种方法用会了，难道还不能双向交互么？





补充：

在使用浏览器的时候，我们见到浏览器中有这样一种功能，1：使网页适配 2：使用原网页
其实在加载网页的时候，我们也可以对webView进行设置，实现网页自适应手机分辨率并居中显示，方法有两种

首先都要获取WebSettings settings = webView.getSettings();
 
1：settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); 

参数中的LayoutAlgorithm有三个常量，分别是：

                                    1.NARROW_COLUMNS：可能的话使所有列的宽度不超过屏幕宽度

                                    2.NORMAL：正常显示不做任何渲染

                                        3.SINGLE_COLUMN：把所有内容放大webview等宽的一列中 
用SINGLE_COLUMN类型可以设置页面居中显示，页面可以放大缩小，但这种方法不怎么好，有时候会让你的页面布局走样而且我测了一下，只能显示中间那一块，超出屏幕的部分有时候不能显示。这三种类型视情况而定吧！

2：    //设置加载进来的页面自适应手机屏幕 

    settings.setUseWideViewPort(true); 
        //设置webview加载的页面的模式
        settings.setLoadWithOverviewMode(true); 
第一个方法设置webview推荐使用的窗口，设置为true。第二个方法是设置webview加载的页面的模式，也设置为true。

这方法可以让你的页面适应手机屏幕的分辨率，完整的显示在屏幕上，可以放大缩小。