Android WebView loading HTML5 Page Instance Tutorial

Example one: WebView load HTML5 implement cool boot page

Most people are aware that an app's boot page is still important, but to make a very cool boot page through native Android code is relatively complex, just HTML5 in the production of Cool animation Web page Comparison to force, we might as well first use HTML5 to make mobile phone guide page, And embed it in the app.

First of all, what do we need to do?

1, the production of HTML5 Guide page.

2, put the good page into the Android Project assets folder.

3. Use WebView to load the HTML file under the Asset folder.

4. Capture the Click event on the button on the last page of the Guide page, end the boot page, and enter the program.

To put it simply, the whole work is divided into four steps, involving a--webview browser control in Android, and before introducing the boot page, let's talk about the basic usage of webview.

First, use WebView to browse the Web page

Browsing Web pages with WebView, which is the most common and simple usage, is basically similar to the use of common imageview components, and it also provides a number of ways to perform browser operations, often as follows:

void GoBack (): Back.

void GoForward (): Forward.

void Loadurl (String URL): Load URL Web page.

boolean zoomin (): Enlarge the Web page.

boolean zoomout (): Reducing Web pages.

......

Below look an example, through WebView browsing Baidu homepage, the effect chart is as follows.

First, don't forget to join the access network in Androidmainfest.xml:

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

The layout files are as follows:

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android"
xmlns:tools= "http:// Schemas.android.com/tools "
android:id=" @+id/container "
android:layout_width=" Match_parent "
Android : layout_height= "match_parent"
android:orientation= "vertical" >
<webview android:id=
"@+id" /wv_webview "
android:layout_width=" fill_parent "
android:layout_height=" fill_parent "/>
" ;/linearlayout>

The Java code is as follows:

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 ();    &NBSP}     public void loadweb () {    
    String url =  "https://www.baidu.com/";         //This method can open a link in webview without jumping to an external browser      
   webview.setwebviewclient (New webviewclient ());         webviEw.loadurl (URL);    &NBSP}      @Override     public boolean  OnKeyDown (int keycode, keyevent event)  {         
    //overrides OnKeyDown, and when browsing the web, WebView can rewind when the page is back.         if (keycode == keyevent.keycode_back &&  webview.cangoback ()) {            
Webview.goback ();
            return true;         }          return
 super.onkeydown (keycode, event);    &NBSP}}

The code above first loads the WebView view in the layout file and then sets the open new connection through the Setwebviewclient () method to not jump to an external browser. Finally, the web address is loaded by the Loadurl () method. As for how the WebView sent the request, how to parse the server, these details are completely transparent to us, we do not need to care.

Also need to mention is, when using WebView browsing the web, do not handle, press the phone's return key will directly end the activity webview, by rewriting the onkeydown () method, when WebView can return, let it perform the return operation.

Second, use WebView to load HTML code.

WebView provides a loaddata (string data, String mimetype, String encoding) method that can be used to load and display HTML code, although this method is likely to have garbled behavior when loading HTML code. It is recommended that another method of WebView be Loaddatawithbaseurl (string baseurl, String data, String mimetype, String encoding, String historyurl). This method can be considered as an enhanced version of LoadData (), it will not produce garbled. Here are some of his parameter descriptions:

data: Specifies the HTML code that needs to be loaded.

mimetype: Specifies the MIME type of the HTML code, which can be specified as text/html for HTML code.

encoding: Specifies the character set used for HTML code encoding.

Here's a simple example of using WebView to load HTML code, and the effect is as follows:

The Java code is as follows:

Public void loadhtmldata () {        string data =   "

The above code is very simple, is to use the Loaddatawithbaseurl () method to load the HTML code, here is not too much introduction.

The following is an introduction to the focus of this article by loading the local HTML file to implement the cool boot page.

Third, load the local HTML file to implement Cool guide page.

Next, for this focus, you can easily make a cool boot page by loading the H5, but if you have to make or find a good H5 boot page file first. Need to explain are already in the beginning of the article said, no nonsense, first on the effect chart:





I believe that you can understand, the most left is the first page, the middle is the excessive animation effect, the most right is the last one, which has a button on the last one, the jump link to capture this button is the key. Here's the code (the HTML file is under the assets folder):


public class webviewloadhtml extends activity {    private 
string url;
    WebView webView;      @Override     protected void oncreate (bundle 
savedinstancestate)  {        super.oncreate (savedInstanceState);         //screen is set to Full-screen          GetWindow (). SetFlags (Windowmanager.layoutparams.flag_fullscreen, windowmanager.layoutparams.flag_
fullscreen);         //Remove title bar         
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);    &NBSP}           @SuppressLint ({ ) Javascriptinterface ", " setjavascriptenabled " }"     public void  Loadlocalhtml (string url) {        websettings ws =
 webview.getsettings ();         ws.setjavascriptenabled (TRUE);//open JavaScript support          webview.setwebviewclient (New webviewclient () {              @Override              public boolean shouldoverrideurlloading (webview view, string  URL)  {               &NBsp;//Override this method to capture a jump link on a page                  if  ("http://start/". Equals (URL)) {                     //the button jump address in the HTML code needs to be consistent with this address                      toast.maketext
(Getapplicationcontext (),  "Start Experience",  toast.length_short). Show ();                   
  finish ();                 }   
               return true;             }       
  });   &nbSp;     webview.loadurl (URL);    &NBSP}}

The code above first sets the program to full screen without a title bar, which is more like a boot page (note: The screenshot is not full screen should be used when the screenshot tool called out the status bar). Note that when loading a file with JS, you need to use the WebSettings setjavascriptenabed () method to open the support for JS. The Shouldoverrideurlloading () method is then overridden by Setwebviewclient (), which is given in the source code comment.

which uses the HTML file button Jump link source code is as follows:


<div class= "Swiper-slide" >
<span> third page </span>
<span class= "subtitle" > This is the third page of < /SPAN>
<a href= "javascript: onclick=" window.open (' Http:start ') "class=" Swiper_read_more "> Open App Tour </a>
</div>


Example two: WebView loads the HTML5 page from the assets, realizes the geographical position

Today, research a HTML5 page positioning problem, found in the mobile browser HTML5 can be achieved positioning, but in the webview could not be positioned. And I actually thought that HTML5 's geographical location in the WebView is not OK. The contents of the HTML5 page are as follows:


<! doctype html public  "-//w3c//dtd html 4.01 transitional//en"   "http:// Www.w3.org/TR/html4/loose.dtd "> 
 
 
 Then looked up the internet and found that something needed to be set up. Set properties for 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);
/** *  The following section can not * *// //Enable database// websettings.setdatabaseenabled (TRUE);  string dir = this.getapplicationcontext (). Getdir ("Database",  context.mode_private)
. GetPath ();
 //Enable geo-location// websettings.setgeolocationenabled (true);
 //sets the location of the database path// websettings.setgeolocationdatabasepath (dir);
/** *  Here is very important, must be * *//*** the most important method, must be set, which is not the main reason for websettings.setdomstorageenabled (true); Webview.setwebchromeclient (New webchromeclient () {//configure permissions (also implemented in webchromeclient) @Override public void  ongeolocationpermissionsshowprompt (String origin, Callback callback)  {Callback.invoke (
Origin, true, false); Super.ongeolocationpermissionsshowprompt (ORIGIN,&NBSp;callback); }
});
 
 
 Problem Resolution! 
 
 specifically tried: 
 
 to open the network and GPS at the same time can be positioned to obtain latitude information. The 
 
 only turns on the network to locate, and only the GPS can be positioned. 
 
 To turn off the network and GPS can also be positioned. 
 
 This shows that the geographical location of the results, only to obtain latitude and longitude information. 
 
 To obtain detailed address information, you need to invoke the Map API implementation. As follows: 
 
 Latitude: 116.40387397, Longitude: 39.91488908 Detailed Address: Beijing Tiananmen Square