Android developer must know--webview load HTML5 implement cool boot page

Most people know that an app's boot page is still very important, but to make a very cool guide page through the native Android code is relatively complex, it happened that HTML5 in the production of cool animated pages compared to the force, we might as well first use HTML5 to make a mobile phone guide page, Then embed it in the app.

First of all, what do we need to do to analyze the work?

1, make 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 boot page, end the boot page, and enter the program.

In short, the whole work is divided into four steps, which involves the android in a self-contained browser control--webview, before the introduction of the Guide page, first of all, to roughly say the basic usage of WebView.

First, using WebView to browse the Web

Using WebView to browse the Web, which is the most common and simplest usage, is basically similar to the use of common imageview components, and it also provides a number of ways to perform browser operations, several of which are commonly used as follows:

void GoBack (): Back.

void GoForward (): Go ahead.

void Loadurl (String URL): Loads the URL page.

boolean zoomin (): Enlarge Web page.

boolean zoomout (): Shrinks the page.

......

Below to see an example, through WebView to browse Baidu homepage, as follows.

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

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

The layout file is as follows:

1 <LinearLayoutxmlns: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     <WebView8         Android:id= "@+id/wv_webview"9 Android:layout_width= "Fill_parent"Ten Android:layout_height= "Fill_parent" /> One </LinearLayout>

The Java code is as follows:

1  Public classWebviewloadwebextendsActivity {2 WebView WebView;3 @Override4     protected voidonCreate (Bundle savedinstancestate) {5         Super. OnCreate (savedinstancestate);6 Setcontentview (r.layout.webview);7WebView =(WebView) Findviewbyid (R.id.wv_webview);8 Loadweb ();9     }Ten      Public voidLoadweb () { OneString url = "https://www.baidu.com/"; A         //This method can open a link in webview without jumping to an external browser -Webview.setwebviewclient (Newwebviewclient ()); - webview.loadurl (URL); the     } - @Override -      Public BooleanOnKeyDown (intKeyCode, KeyEvent event) {     -         //rewrite onkeydown, when browsing the Web page, WebView can back up when performing a fallback operation.  +         if(KeyCode = = Keyevent.keycode_back &&Webview.cangoback ()) { - Webview.goback (); +             return true; A         }  at         return Super. OnKeyDown (KeyCode, event); -     } -}

The above code first loads the layout file in the WebView view and then sets the open new connection through the Setwebviewclient () method without jumping to the external browser. Finally, the URL is loaded via the Loadurl () method. As for how the WebView sends the request, how to parse the server, these details are completely transparent to us and we don't need to be concerned.

It is also necessary to mention that when using WebView to browse the Web page, do not do processing, press the phone's return button will directly end the activity of WebView, by overriding the OnKeyDown () method, when WebView can return, let it perform the return operation.

Second, load the HTML code with WebView.

WebView provides a loaddata (string data, String MimeType, String encoding) method that can be used to load and display HTML code, but this method is likely to be garbled when loading HTML code. Another method of WebView is recommended 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 a few 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 by the HTML code encoding.

Here is a simple example that uses WebView to load HTML code, as follows:

　　

The Java code is as follows:

1  Public voidLoadhtmldata () {2String data = "3+ "4+ "<title> Welcome </title>"5+ "6+ "<body>"7+ "<p> I am an HTML code </p>"8+ "</body>"9+ ";TenWebview.setwebviewclient (Newwebviewclient ()); One         //using the Simple LoadData () method always leads to garbled characters, which may be bugs in the Android API A         //webview.loaddata (data, "text/html", "GBK"); -Webview.loaddatawithbaseurl (NULL, data, "text/html", "Utf-8",NULL); -}

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

Let's go to the focus of this article and implement the Cool guide page by loading the local HTML file.

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

Next, the focus of this article, by loading H5 way can easily make a cool guide page, of course, if you have to make or find a good H5 boot page file. Need to explain all have been said at the beginning of the article, no nonsense, first on:

　　

I believe that you can understand without my explanation, the leftmost is the first page, the middle is the excessive animation effect, the rightmost is the last one, in which there is a button on the last one, the jump link to catch this button is the key. Let's look at the code (HTML file under the assets folder):

1  Public classWebviewloadhtmlextendsActivity {2     PrivateString URL;3 WebView WebView;4 @Override5     protected voidonCreate (Bundle savedinstancestate) {6         Super. OnCreate (savedinstancestate);7         //set the screen to full screen8 GetWindow (). SetFlags (WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN );9         //Remove title barTen requestwindowfeature (window.feature_no_title); One Setcontentview (r.layout.webview); AWebView =(WebView) Findviewbyid (R.id.wv_webview); -url = "File:///android_asset/guide/index.html"; - loadlocalhtml (URL); the     } -      -@SuppressLint ({"Javascriptinterface", "setjavascriptenabled" }) -      Public voidloadlocalhtml (String url) { +WebSettings ws =webview.getsettings (); -Ws.setjavascriptenabled (true);//turn on JavaScript support +Webview.setwebviewclient (Newwebviewclient () { A @Override at              Public Booleanshouldoverrideurlloading (WebView view, String URL) { -                 //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 (); in                 }  -                 return true; to             } +         }); - webview.loadurl (URL); the     } *}

The above code first sets the program to a full-screen untitled bar, so that it is more like the boot page (note: There is no full screen in the use of the tool when the status bar). It is important to note that when loading a file with JS, it is necessary to turn on JS support by WebSettings's setjavascriptenabed () method. Then through Setwebviewclient () rewrite the shouldoverrideurlloading () method, the specific usage is given in the source code comment.

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

1 <Divclass= "Swiper-slide">2        <span>Third page</span>3        <spanclass= "subtitle">This is Page three.</span>4        <ahref= "javascript:"OnClick= "window.open (' Http:start ')"class= "Swiper_read_more">Start the App Tour</a>5 </Div>

All the Android code and HTML files involved in this blog post have been shared to Baidu cloud disk, download link: http://pan.baidu.com/s/1kTxmayj.

Welcome reprint, when reproduced please indicate this article address: http://www.cnblogs.com/codingblock/p/4742580.html.

　　

　　

Android developer must know--webview load HTML5 implement cool boot page