Android开发必知--WebView加载html5实现炫酷引导页面

最新推荐文章于 2021-05-31 06:27:58 发布

i_a_jun

最新推荐文章于 2021-05-31 06:27:58 发布

阅读量1.6k

点赞数

分类专栏： android html 文章标签： android html5 android应用

android 同时被 2 个专栏收录

127 篇文章 2 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

转载此处：http://www.apkbus.com/forum.php?mod=viewthread&tid=245992

大多数人都知道，一个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加入访问网络的权限：

[XML] 纯文本查看复制代码

1	`<` `uses-permission` `android:name` `=` `"android.permission.INTERNET"` `/>`

布局文件如下：

[XML] 纯文本查看复制代码

 
             1 < 
             LinearLayout 
              xmlns:android 
             = 
             "http://schemas.android.com/apk/res/android" 
              2      
             xmlns:tools 
             = 
             "http://schemas.android.com/tools" 
            
 
               
             3      
             android:id 
             = 
             "@+id/container" 
            
 
               
             4      
             android:layout_width 
             = 
             "match_parent" 
            
 
               
             5      
             android:layout_height 
             = 
             "match_parent" 
            
 
               
             6      
             android:orientation 
             = 
             "vertical" 
              > 
            
 
               
             7     < 
             WebView 
            
 
               
             8          
             android:id 
             = 
             "@+id/wv_webview" 
            
 
               
             9          
             android:layout_width 
             = 
             "fill_parent" 
            
 
             10          
             android:layout_height 
             = 
             "fill_parent" 
              /> 
            
 
             11 </ 
             LinearLayout 
             > 
            

java代码如下：

[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代码如下：

[Java] 纯文本查看复制代码

 
             public 
              void 
              loadHtmlData(){ 
            
             String data =  
             "<html>" 
            
             +  
             "<head>" 
            
             +  
             "<title>欢迎您</title>" 
            
             +  
             "</head>" 
            
             +  
             "<body>" 
            
             +  
             "<p>我是一段html代码</p>" 
            
             +  
             "</body>" 
            
             +  
             "</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文件夹下）：

[Java] 纯文本查看复制代码

 
             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文件的按钮跳转链接的源码如下：

[XML] 纯文本查看复制代码

1

2

3

4

 
             < 
             div 
              class 
             = 
             "swiper-slide" 
             >        < 
             span 
             >第三页</ 
             span 
             > 
            
 
                      
             < 
             span 
              class 
             = 
             "subtitle" 
             >这是第三页</ 
             span 
             > 
            
 
                      
             < 
             a 
              href 
             = 
             "javascript:" 
              class 
             = 
             "swiper_read_more" 
             >开启APP之旅</ 
             a 
             > 
            
 
               
             </ 
             div 
             > 
            