dans tutoriel

Construire des applications Android à l’aide des WebView

Android MarketUne méthode facile pour passer d’une application (service) web, à une application native Android est l’utilisation d’une classe bien spéciale sous Android appelée WebView. Cette classe, qui hérite de la classe View offre la possibilité d’afficher une page web à l’intérieur d’une activité. On peut donc, à partir d’un site web (à peu près) optimisé pour les mobiles, créer une application dite native. Voyons comment ça marche.

  • Ajouter le WebView au layout

C’est la première chose à faire. Cliquez donc sur votre fichier layout.xml ou une chose du genre, et ajouter les lignes suivantes :

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>

 

On y dit simplement que notre WebView (et donc notre page web) s’affichera de façon à occuper tout l’espace qui lui est offert par son élèment parent (fill_parent).

 

  • Appeler le WebView dans votre activité

A prèsent dans votre activité principale, il vous suffit d’initialiser votre WebView et d’afficher le site, en utilisant la méthode loadUrl():

1
2
3
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://m.charlesen.fr");
myWebView.setWebViewClient(new WebViewClient()); // Tous les liens s'ouvriront directement depuis la WebView

 

La dernière chose à faire est d’autoriser l’accès internet à votre application, en modifiant le fichier manifest :

1
2
3
4
<manifest ... >
<uses-permission android:name="android.permission.INTERNET" />
...
</manifest>

 

Voici un exemple complet, avec mon site web mobile développé à l’aide de jQuery Mobile, et porté sous Android :

Activité principale
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
package fr.charlesen.projets;
 
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
 
public class charlesenmob extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
 
// Instanciation du WebView...
WebView wvSite = (WebView)findViewById(R.id.webview);
 
//...on active JavaScript...
WebSettings webSettings = wvSite.getSettings();
webSettings.setJavaScriptEnabled(true);
 
//...et on charge la page
wvSite.loadUrl("http://m.charlesen.fr");
}
}

 

main.xml
1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview" android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
 

 

strings.xml
1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">charlesen.fr</string>
<string name="homepage">charlesen.fr - Version Mobile</string>
</resources>
 

 

Fichier manifest
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="fr.charlesen.projets" android:versionCode="1"
android:versionName="1.0">
<uses-permission android:name="android.permission.INTERNET" />
<uses-sdk android:minSdkVersion="9" />
<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".charlesenmob" android:label="@string/homepage">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>

 

Ca donne ça avec l’émulateur :

 

charlesen.fr Mobile

WebView myWebView =(WebView) findViewById(R.id.webview);
myWebView
.loadUrl("http://www.example.com");

Laisser un commentaire