Um die Pich-to-Zoom-Funktion im Phonegap-WebView nutzen zu können, sind ein paar Anpassungen in der Hauptmethode der Applikation nötig. Pinch-To-Zoom wird häufig für das Skalieren bzw. Zoomen von Bildern genutzt. Diese Funktion kann man wie folgt in Phonegap aktivieren. Sobald man jedoch Pinch-To-Zoom aktiviert, ist zu beachten, dass alle Elemente auf der Seite ebenfalls gezoomt werden. Daher ist es ratsam nur ein Bildelement auf einer zoomfähigen Seite zu setzen. Sobald sich auch andere Elemente auf der Seite befinden, z.B. Vor- oder Zurück-Button, Header, Footer etc., sind auch diese Elemente vom Zoom nicht ausgeschlossen, da die weiteren Elemente sich ebenfalls im selben WebView befinden.
Zoom-Funktion aktivieren
Zuerst muss die Hauptdatei bearbeitet werden. Unter der Zeile
super.loadUrl("file:///android_asset/www/index.html");
müssen folgende Einstellungen eingefügt werden:
// Gibt ein Settings-Objekt vom AppView zurück
WebSettings settings = appView.getSettings();
// Aktiviert die internen WebView Zoom-Controls
settings.setBuiltInZoomControls(true);
// Aktiviert die Unterstützung des On-Screen-Zooms und über die Zoom-Steuerelemente
settings.setSupportZoom(true);
// Legt den Standard-Zoom der Seite fest
settings.setDefaultZoom(ZoomDensity.MEDIUM);
// Das WebView wird komplett rausgezoomt geladen
settings.setLoadWithOverviewMode(true);
// Das WebView wird wie auf einem normalen Desktop-Rechner angezeigt
setting.setUseWideViewPort(true);
Die nötigen Imports:
import android.webkit.WebSettings;
import android.webkit.WebSettings.ZoomDensity;
In der zu “zoomenden” HTML-Datei z.B. noch folgende Code-Zeile im HEAD-Bereich einfügen: