Une 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" />
|
</p>
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
|
</p>
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>
|
</p>
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 :
WebView myWebView =(WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://www.example.com");
</p>