[android studio]Android WebView加载html5页面实例教程

更新时间:2019-12-26    来源:html5教程    手机版     字体:

【www.bbyears.com--html5教程】

实例一:WebView加载html5实现炫酷引导页面

大多数人都知道,一个APP的引导页面还是挺重要的,不过要想通过原生的Android代码做出一个非常炫酷的引导页相对还是比较复杂的,正巧html5在制作炫酷动画网页方面比较给力,我们不妨先利用html5做出手机引导页面,然后将其嵌入APP中。

  首先我们分析一下,都需要做哪些工作?

  1、制作html5引导页面。

  2、把做好的页面放入Android工程中assets文件夹下。

  3、利用WebView加载asset文件夹下的html文件。

  4、在引导页最后一页的按钮上捕捉点击事件,结束引导页,进入程序。

  简单的讲,整个工作就分以上四步,其中涉及到了Android中一个自带的浏览器控件--WebView,在介绍引导页之前,先来大体说一下WebView的基本用法。

一、使用WebView浏览网页

  用WebView浏览网页,这是最常用也是最简单的用法,与普通的ImageView组件的用法基本相似,它也提供了大量方法来执行浏览器操作,常用的几个如下:

  ・void goBack():后退。

  ・void goForward():前进。

  ・void loadUrl(String url):加载url网页。

  ・boolean zoomIn():放大网页。

  ・boolean zoomOut():缩小网页。

  ……

  下面看一个例子,通过WebView浏览百度首页,效果图如下。



  首先不要忘了在AndroidMainfest.xml加入访问网络的权限:


  布局文件如下:


    


   java代码如下:

public class WebViewLoadWeb extends Activity {
    WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview);
        webView = (WebView)findViewById(R.id.wv_webview);
        loadWeb();
    }
    public void loadWeb(){
        String url = "https://www.baidu.com/";
        //此方法可以在webview中打开链接而不会跳转到外部浏览器
        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl(url);
    }
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {    
        //重写onKeyDown,当浏览网页,WebView可以后退时执行后退操作。
        if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){
            webView.goBack();
            return true;
        } 
        return super.onKeyDown(keyCode, event);
    }
}


  上面代码首先加载布局文件中WebView视图,然后通过setWebViewClient()方法设置了打开新连接不会跳转到外部浏览器。最后通过loadUrl()方法加载了网址。至于该WebView如何发送请求,如何解析服务器,这些细节对我们来说是完全透明的,我们不需要关心。

  另外需要一提的是,当使用WebView浏览网页时,不做处理的话,按下手机的返回键会直接结束WebView所在的Activity,通过重写onKeyDown()方法,当WebView可以返回时,让其执行返回操作。

二、使用WebView加载HTML代码。

  WebView提供了一个loadData(String data, String mimeType, String encoding)方法,该方法可用于加载并显示HTML代码,不过这个方法在加载html代码时很可能会出现乱码的现象。建议用WebView的另一个方法loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)。可以把这个方法认为是loadData()的增强版,它不会产生乱码。以下是他的几个参数说明:

  ・data:指定需要加载的html代码。

  ・mimeType:指定html代码的MIME类型,对于HTML代码可指定为text/html。

  ・encoding:指定html代码编码所用的字符集。

  下面看一个使用WebView加载html代码的简单实例,效果图如下:


java代码如下:

public void loadHtmlData(){
        String data = ""
                + ""
                + "欢迎您"
                + ""
                + ""
                + "

我是一段html代码

"                 + ""                 + "";         webView.setWebViewClient(new WebViewClient());         //使用简单的loadData()方法总会导致乱码,有可能是Android API的Bug         //webView.loadData(data, "text/html", "GBK");         webView.loadDataWithBaseURL(null, data, "text/html", "utf-8", null); }


  上面代码很简单,就是用loadDataWithBaseURL()方法加载html代码,在这里就不过多介绍了。

  下面进入本篇介绍的重点,通过加载本地html文件实现炫酷引导页。

三、加载本地HTML文件实现炫酷引导页。

接下来为本篇重点,通过加载H5的方式可以很轻松做出炫酷的引导页,当然前提时你得先做出或者找到一个很好H5引导页文件。需要说明的都已经在文章开头说过了,就不废话了,先上效果图:


相信不用我解释大家就能看懂,最左边的是第一张页面,中间的是过度动画效果,最右边的是最后一张,其中在最后一张上面有个按钮,捕捉到这个按钮的跳转链接是关键。下面先来看代码(html文件在assets文件夹下):

public class WebViewLoadHtml extends Activity {
    private String url;
    WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //将屏幕设置为全屏
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        //去掉标题栏
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.webview);
        webView = (WebView)findViewById(R.id.wv_webview);
        url = "file:///android_asset/guide/index.html";
        loadLocalHtml(url);
    }
    
    @SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
    public void loadLocalHtml(String url){
        WebSettings ws = webView.getSettings();
        ws.setJavaScriptEnabled(true);//开启JavaScript支持
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                //重写此方法,用于捕捉页面上的跳转链接
                if ("http://start/".equals(url)){
                    //在html代码中的按钮跳转地址需要同此地址一致
                    Toast.makeText(getApplicationContext(), "开始体验", Toast.LENGTH_SHORT).show();
                    finish();
                } 
                return true;
            }
        });
        webView.loadUrl(url);
    }
}


  上面代码首先将程序设为全屏无标题栏,这样才更像引导页(注:截图中没有全屏是应为使用截图工具时唤出了状态栏)。需要注意的是当加载具有js的文件时需通过WebSettings的setJavaScriptEnabed()方法开启对js的支持。然后通过setWebViewClient()重写shouldOverrideUrlLoading()方法,具体用法源码注释中已给出。

  其中用到html文件的按钮跳转链接的源码如下:

       第三页
       这是第三页
       javascript:" onClick="window.open('http:start')" class="swiper_read_more">开启APP之旅



实例二:WebView从assets中加载html5页面,实现地理位置定位

今天调研一个html5页面的定位问题,发现在手机浏览器上html5是可以实现定位的,但是在webview中就无法定位了。而我居然以为html5的地理定位在webview中不可行。html5页面内容如下:







点击这个按钮,获得您的坐标:

试一下 <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "Longitude: " + position.coords.longitude; } </script>



后来又在网上查了查,发现,需要设置一些东西。设置websetting的属性:

webView.setWebViewClient(new WebViewClient());
//webView.loadUrl("http://news.baidu.com/");
webView.loadUrl("file:///android_asset/index.html");
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
/**
* 以下部分可以不要
*/
// //启用数据库
// webSettings.setDatabaseEnabled(true);
// String dir = this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();
//
// //启用地理定位
// webSettings.setGeolocationEnabled(true);
// //设置定位的数据库路径
// webSettings.setGeolocationDatabasePath(dir);
/**
* 此处很重要,必须要
*/
//***最重要的方法,一定要设置,这就是出不来的主要原因
webSettings.setDomStorageEnabled(true);
webView.setWebChromeClient(new WebChromeClient(){
//配置权限(同样在WebChromeClient中实现)
@Override
public void onGeolocationPermissionsShowPrompt(String origin,
Callback callback) {
callback.invoke(origin, true, false);
super.onGeolocationPermissionsShowPrompt(origin, callback);
}
});



问题解决!

特别试了试:

同时打开网络和GPS可以定位,获得的是经纬度信息。

只打开网络可以定位,只打开GPS也可以定位。

关闭网络和GPS也可以定位。

由此可见,是由地理位置定位所得,只能获得经纬度信息。

若要获得详细的地址信息,需要调用地图API实现。如下所示:

纬度:116.40387397,经度:39.91488908 详细地址:北京市天安门

本文来源:http://www.bbyears.com/wangyezhizuo/83810.html