How to Create Android apps in webview

1. Two forms of Web apps

In Android, web
Apps can be accessed by users in two ways. One is to use a browser on a mobile phone to directly access network applications.ProgramIn this case, you do not need to install other applications as long as you have a browser.
Is to install the client application (.apk) on the user's mobile phone, and embed the Web
View to display the webpage data downloaded from the server, such as Sina Weibo and Renren client. For the former, the main task is to adjust the page display size and ratio based on the screen of the mobile client.
The latter needs to develop a web app Based on Web View separately. This article focuses on the development of the latter.

2. How to add a Web View to an android application?

2.1 Add the <webview> element to the layout file first.

<Webview xmlns: Android = "http://schemas.android.com/apk/res/android" Android: Id = "@ + ID/webview"
Android: layout_width = "fill_parent" Android: layout_height = "fill_parent"/>

2.2 because the application needs to access the network, you need to request network permissions in androidmanifest. xml:

<Uses-Permission Android: Name = "android. Permission. Internet"/>

2.3 use Web View:
Inland transportation

Webview mywebview = (webview) findviewbyid (R. Id. webview );

2.4 to load a page, you can use the loadurl () method, for example:

Mywebview. loadurl ("http://www.xxx.com ");

3. Use Javascript in Web View

3.1 If the webpage you load to the Web View uses JavaScript, You need to enable Javascript support in websetting because Javascript is not enabled by default in the Web View.

1234 // obtain websetting

Websettings = mywebview. getsettings (); // enable webview to support JavaScript websettings. setjavascriptenabled (true );

3.2 integrate JavaScript with the android ClientCode.

Why is it bound? Let's take a look at this example: if Javascript
The Code uses the android code to display a dialog instead of the Javascript alert () method. In this case, the android code and
Create an interface between JavaScript code to display the dialog box in Android code. Then, JavaScript calls this method.

1) create an interface for Android code and JavaScript code, that is, create a class. The method written in the class will be called by JavaScript.

Public class javascriptinterface {Women's brand ranking
Context mcontext;
/** Initialize the context for the parameters in the maketext Method */
Javascriptinterface (context c ){
Mcontext = C;
}

/** Create a method to display the dialog box for the JavaScript code to call */

Public void showtoast (string toast ){
Toast. maketext (mcontext, toast, Toast. length_short). Show ();
}
}

2) Call the addjavascriptinterface method to bind the interface class we created above to the Javascript running on the Web View.

12 // The second parameter is the name of the interface object to facilitate JavaScript calls.

Webview. addjavascriptinterface (New javascriptinterface (this), "android ");

3) now, we can call the showtoast () method in the Javascript section of HTML.

<SCRIPT type = "text/JavaScript">
Function showandroidtoast (toast ){
Android. showtoast (toast );
}
</SCRIPT>
<Input type = "button" value = "Say hello"
Onclick = "showandroidtoast ('Hello android! ') "/>

4. process the page navigation

When you click a hyperlink on the Web View page,
By default, Android starts an application that can process URLs. Generally, it starts the default browser. If we want to use the current web
View to open the page, you need to reload this behavior. In this way, you can navigate forward and backward by operating the Web View history.

4.1 provide a webviewclient for the Web View to open the user's link in the webview. If we want to have multiple control over page loading, We can inherit and implement a complicated webviewclient.

Mywebview. setwebviewclient (New webviewclient ());

Private class mywebviewclient extends webviewclient {@ override
Public Boolean shouldoverrideurlloading (webview view, string URL ){
If (URI. parse (URL). gethost (). Equals ("www.example.com ")){
// This is my Web site, so do not override; let my webview load the page
Return false;
}
// Otherwise, the link is not for a page on my site, so launch another activity that handles URLs
Intent intent = new intent (intent. action_view, Uri. parse (URL ));
Startactivity (intent );
Return true;
}
}

4.2 Use Web View history to implement page navigate Backword.

The onkeydown method in the activity is reloaded to implement this function:

@ Override
Public Boolean onkeydown (INT keycode, keyevent event ){
// Check if the key event was the back key and if there's history if (keycode = keyevent. keycode_back) & mywebview. cangoback (){
Mywebview. Goback ();
Return true;
}
// If it wasn' t the back key or there's no web page history, bubble up to the default
// System behavior (probably exit the activity)
Return super. onkeydown (keycode, event );
}

5. Now we have applied the above knowledge to implement a simple Android Application Based on Web View.

The main function of a program is to display a webpage with a news hyperlink. You can click the hyperlink to load the news content page in the Web View.

5.1 create an activity with a Web View: Home. Java

Package com. webapp;
Import Android. App. activity;
Import Android. OS. Bundle;
Import Android. View. keyevent;
Import Android. WebKit. websettings;
Import Android. WebKit. webview;
Public class home extends activity {
// Declare a webview
Private webview mywebview;
@ Override
Public void oncreate (bundle icicle ){
Super. oncreate (icicle );
Setcontentview (R. layout. Main );
// Initialize the webview
Mywebview = (webview) findviewbyid (R. Id. webview );
/* Enable the Javascript in Web View */
Websettings = mywebview. getsettings (); websettings. setjavascriptenabled (true );
// Bind the android code to JavaScript code mywebview. addjavascriptinterface (New myjavascriptinterface (), "myjs ");
// Load a Web page mywebview. loadurl ("file: // android_asset/first.html ");
}
/**
* This class is an interface between Android and JavaScript
* Whose methods can be accessed by JavaScript code
*/
Final class myjavascriptinterface {
Myjavascriptinterface (){
}
/**
* Load the content page
*/
Public void loadcontentpage (){
Mywebview. loadurl ("file: // android_asset/second.html ");
}
}
@ Override
Public Boolean onkeydown (INT keycode, keyevent event ){
// Check if the key event was the back key and if there's history
If (keycode = keyevent. keycode_back) & mywebview. cangoback ()){
Mywebview. Goback ();
Return true;
}
// If it wasn' t the back key or there's no web page history, bubble up to the default
// System behavior (probably exit the activity)
Return super. onkeydown (keycode, event );
}
}

5.2 create a page named first.html under the assetsdirectory under the androidproject file as the homepage

Google + is now under testing!

5.3 create a page named second.html under the assetsdirectory under the androidproject file as a content page

<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd">

<HTML>

<Head>

<Meta http-equiv = "Content-Type" content = "text/html; charset = ISO-8859-1">

<Title> Google + is under testing </title>

</Head>

<Body> Google + is in limited field trial right now, we're
Testing with a small number of people, but it won't be long before
Google + project is ready for everyone. Leave us your email address and
We'll make sure you're the first to know when we're re ready to invite more
People.

</Body>

</Html>

5.4 run the program and Test