WebView-applicaties voor webontwikkelaars

Gepubliceerd: 28 februari 2014

Leer hoe u een nieuw Android-project maakt, een webweergave toevoegt, een externe URL laadt en een lokale HTML-pagina laadt.

In deze tutorial wordt ervan uitgegaan dat je een ontwikkelaar bent met beperkte of geen ervaring met de Android-ontwikkelomgeving, maar wel enige ervaring met Kotlin. Als u al bekend bent met programmeren voor Android, raden we u aan Web-apps bouwen in WebView te lezen op de Android-ontwikkelaarssite.

Installeer Android Studio

Deze tutorial maakt gebruik van Android Studio , de design-and-build IDE voor Android.

Maak een nieuw Android-project

Zodra Android Studio is geïnstalleerd, wordt de installatiewizard gestart.

Om een ​​nieuw project aan te maken:

1. Klik op Nieuw project .
2. Klik op de sjabloon Lege activiteit om deze voor uw project te selecteren. Sjablonen creëren de structuur van het project en de bestanden die Android Studio nodig heeft om uw project te bouwen.
3. Klik op Volgende om het dialoogvenster Nieuw project te openen.
4. Configureer uw project. Voer uw applicatienaam, pakketnaam en doel-SDK's in. Klik vervolgens op Volgende .
5. Stel de minimaal vereiste SDK in op API 24: Android 7.0 (Nougat).
6. Klik op Voltooien

Android Studio opent het nieuwe project.

Projectstructuur

Het eerste project dat door Android Studio is gemaakt, bevat standaardcode om uw applicatie in te stellen. Enkele van de meer importmappen zijn:

• src/main/java . Android Java-broncode.
• src/main/res . Bronnen die door de toepassing worden gebruikt.
• src/main/res/drawable . Afbeeldingsbronnen die door de toepassing worden gebruikt.
• src/main/res/xml . XML-lay-outbestanden die de structuur van UI-componenten definiëren.
• src/main/res/values . Dimensies, tekenreeksen en andere waarden die u mogelijk niet hardcodeert in uw toepassing.
• src/main/AndroidManifest.xml . Het manifestbestand definieert wat er in de toepassing is opgenomen, zoals activiteiten, machtigingen en thema's.

Voeg de WebView toe

Voeg vervolgens een WebView toe aan de lay-out van de hoofdactiviteit.

1. Open het bestand activity_main.xml in de map src/main/res/xml als dit nog niet is geopend. (Mogelijk ziet u ook een bestand fragment_main.xml . U kunt dit negeren, aangezien dit niet vereist is voor deze zelfstudie.)

   Selecteer het tabblad Tekst onder aan de editor activity_main.xml om de XML-opmaak te bekijken.

   Dit bestand definieert de lay-out voor uw hoofdactiviteit en de voorbeeldvensters tonen een voorbeeld van de activiteit. De lay- out Lege activiteit bevat geen onderliggende activiteiten. U moet de WebView toevoegen.

2. Verwijder in het XML-paneel de zelfsluitende schuine streep van het einde van het FrameLayout element en voeg het <WebView> -element en een nieuwe afsluitende tag toe, zoals weergegeven:

   <FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
       xmlns:tools="https://schemas.android.com/tools"
       android:id="@+id/container"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:context=".MainActivity">
       tools:ignore="MergeRootFrame">
   
       <WebView
         android:id="@+id/activity_main_webview"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />
   </FrameLayout>
   

3. Om de WebView te gebruiken, moet u ernaar verwijzen in de Activiteit. Open het Java-bronbestand voor de hoofdactiviteit, MainActivity.java in de directory src/main/java/<PackageName> .

   Voeg de vetgedrukte regels toe.

   public class MainActivity extends Activity {
   
       private WebView mWebView;
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           mWebView = (WebView) findViewById(R.id.activity_main_webview);
   

   De bestaande code in de onCreate methode doet het werk om de activiteit aan de lay-out te koppelen. De toegevoegde regels creëren een nieuwe lidvariabele, mWebView , die naar de webweergave verwijst.

   Verwijder de volgende code:

   if (savedInstanceState == null) {
     getSupportFragmentManager().beginTransaction()
       .add(R.id.container, new PlaceholderFragment())
       .commit();
   }
   

   De WebView wordt geïdentificeerd door de resource-ID, die wordt gespecificeerd door deze regel in het lay-outbestand:

   android:id="@+id/activity_main_webview"
   

   Nadat u de code heeft toegevoegd, ziet u enkele waarschuwingsberichten in de marge van de editor. Dit komt omdat u niet de juiste klassen voor WebView heeft geïmporteerd. Gelukkig kan Android Studio je helpen de ontbrekende klassen in te vullen. De eenvoudigste manier om dit te doen is door op een onbekende klassenaam te klikken en de muisaanwijzer erop te plaatsen en te wachten tot een module een "snelle oplossing" toont - in dit geval door een import voor de WebView klasse toe te voegen.

   Druk op Alt + Enter (Option + Enter op Mac) om de snelle oplossing te accepteren.

   Met WebView in de hand kunt u doorgaan met het instellen en laden van sappige webinhoud.

Schakel JavaScript in

WebView staat standaard geen JavaScript toe. Om een ​​webapplicatie in WebView uit te voeren, moet u JavaScript expliciet inschakelen door de volgende regels toe te voegen aan de onCreate methode:

// Enable Javascript
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

Laad een externe URL

Als u gegevens van een externe URL gaat laden, heeft uw toepassing toestemming nodig voor toegang tot internet. Deze machtiging moet worden toegevoegd aan het manifestbestand van de toepassing .

1. Open het bestand AndroidManifest.xml in de map src/res . Voeg de vetgedrukte regel toe vóór de afsluitende tag </manifest> .

   <?xml version="1.0" encoding="utf-8"?>
   <manifest ...>
   ...
    
     </application>
     <uses-permission android:name="android.permission.INTERNET" />
   </manifest>
   

2. De volgende stap is het aanroepen van de loadUrl -methode op de webview. Voeg de volgende regel toe aan het einde van de onCreate methode.

   mWebView.loadUrl("[https://beta.html5test.com/][8]");
   

   Probeer nu het project uit te voeren. Als u geen apparaat bij de hand heeft, kunt u een emulator (AVD of Android Virtual Device) maken door naar Extra > Android > AVD Manager te gaan.

Behandel navigatie

Probeer de URL die u laadt te wijzigen in https://www.css-tricks.com/ en voer uw toepassing opnieuw uit. Je zult iets vreemds opmerken.

Als u de applicatie nu uitvoert met een site die een omleiding heeft zoals css-tricks.com , opent uw app de site uiteindelijk in een browser op het apparaat en niet in uw WebView - waarschijnlijk niet wat u had verwacht. Dit komt door de manier waarop WebView navigatiegebeurtenissen verwerkt.

Hier is de volgorde van de gebeurtenissen:

1. De WebView probeert de originele URL van de externe server te laden en krijgt een omleiding naar een nieuwe URL.
2. De WebView controleert of het systeem een ​​weergave-intentie voor de URL aankan. Als dat het geval is, handelt het systeem de URL-navigatie af, anders navigeert de WebView intern (bijvoorbeeld als de gebruiker geen browser op zijn apparaat heeft geïnstalleerd).
3. Het systeem kiest de voorkeursapplicatie van de gebruiker voor het verwerken van een https:// URL-schema, dat wil zeggen de standaardbrowser van de gebruiker. Als u meer dan één browser heeft geïnstalleerd, ziet u mogelijk op dit punt een dialoogvenster.

Als u een WebView in een Android-applicatie gebruikt om inhoud weer te geven (bijvoorbeeld een helppagina), is dit wellicht precies wat u wilt doen. Voor meer geavanceerde toepassingen wilt u wellicht de navigatielinks zelf beheren.

Om de navigatie binnen de WebView af te handelen, moet u de WebViewClient overschrijven, die verschillende gebeurtenissen afhandelt die door de WebView worden gegenereerd. U kunt het gebruiken om te bepalen hoe de WebView omgaat met klikken op links en pagina-omleidingen.

De standaardimplementatie van WebViewClient zorgt ervoor dat elke URL geopend is in de WebView:

// Force links and redirects to open in the WebView instead of in a browser
mWebView.setWebViewClient(new WebViewClient());

Dit is een goede stap voorwaarts, maar wat als u alleen links voor uw site wilt verwerken en andere URL's in een browser wilt openen?

Om dit te bereiken moet u de klasse WebViewClient uitbreiden en de methode shouldOverrideUrlLoading implementeren. Deze methode wordt aangeroepen wanneer de WebView naar een andere URL probeert te navigeren. Als het false retourneert, opent de WebView de URL zelf. (De standaardimplementatie retourneert altijd false, daarom werkt deze in het vorige voorbeeld.)

Maak een nieuwe klasse:

1. Klik met de rechtermuisknop op de pakketnaam van uw app en selecteer Nieuw > Java-klasse
2. Voer MyAppWebViewClient in als klassenaam en klik op OK

3. Voeg in het nieuwe MyAppWebViewClient.java bestand de volgende code toe (wijzigingen worden vetgedrukt weergegeven):

   public class MyAppWebViewClient extends WebViewClient {
     @Override
     public boolean shouldOverrideUrlLoading(WebView view, String url) {
       if(Uri.parse(url).getHost().endsWith("css-tricks.com")) {
         return false;
       }
                  
       Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
       view.getContext().startActivity(intent);
       return true;
     }
   }
   

   De nieuwe code definieert MyAppWebViewClient als een subklasse van WebViewClient en implementeert de methode shouldOverrideUrlLoading .

   De methode shouldOverrideUrlLoading wordt aangeroepen wanneer de WebView op het punt staat een URL te laden. Deze implementatie controleert op de tekenreeks "css-tricks.com" aan het einde van de hostnaam van de URL. Als de string bestaat, retourneert de methode false, wat het platform vertelt de URL niet te overschrijven, maar deze in de WebView te laden.

   Voor elke andere hostnaam doet de methode een verzoek aan het systeem om de URL te openen. Dit gebeurt door een nieuwe Android Intent te maken en deze te gebruiken om een ​​nieuwe activiteit te starten. Het retourneren van true aan het einde van de methode voorkomt dat de URL in de WebView wordt geladen.

4. Als u uw nieuwe aangepaste WebViewClient wilt gebruiken, voegt u de volgende regels toe aan uw MainActivity klasse:

   // Stop local links and redirects from opening in browser instead of WebView
   mWebView.setWebViewClient(new MyAppWebViewClient());
   

   Nu kan een gebruiker op een van de CSS Tricks-links klikken en binnen de app blijven, maar links naar externe sites worden in een browser geopend.

Behandel de Android-terugknop

Terwijl je begint te spelen en door de CSS Tricks-artikelen navigeert, verlaat je door op de terugknop op Android te klikken de applicatie.

De WebView-methode canGoBack vertelt u of er iets op de paginastapel staat dat kan worden geopend. Om een ​​druk op de terugknop te detecteren en te bepalen of u terug moet gaan in de geschiedenis van WebView of het platform het juiste gedrag moet laten bepalen, voegt u de onBackPressed() -methode toe aan uw MainActivity :

public class MainActivity extends Activity {

 private WebView mWebView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
     ...
 }

    @Override
    public void onBackPressed() {
      if(mWebView.canGoBack()) {
        mWebView.goBack();
      } else {
        super.onBackPressed();
      }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
       ...
    }
}

Laad HTML uit het bestandssysteem

Een groot voordeel van het gebruik van een WebView in een installeerbare applicatie is dat u assets in de app kunt opslaan. Hierdoor kan uw app offline werken en worden de laadtijden verbeterd, omdat de WebView assets rechtstreeks uit het lokale bestandssysteem kan ophalen.

Als u bestanden lokaal wilt opslaan, inclusief HTML, JavaScript en CSS, slaat u ze op in de activamap. Dit is een gereserveerde map die Android gebruikt voor onbewerkte bestanden. Uw app heeft toegang tot deze map nodig, omdat bepaalde bestanden mogelijk moeten worden geminimaliseerd of gecomprimeerd.

1. Maak de map assets/www in main ( src/main/assets/www ).

   • Het is een best practice om webbestanden in een submap van /assets te bewaren.

2. Upload alle bestanden naar de map.

3. Laad het juiste bestand:

   mWebView.loadUrl("file:///android_asset/www/index.html");
   

4. Werk de methode shouldOverrideUrlLoading bij om een ​​browser voor niet-lokale pagina's te openen:

   public class MyAppWebViewClient extends WebViewClient {
     @Override
     public boolean shouldOverrideUrlLoading(WebView view, String url) {
       if(Uri.parse(url).getHost().length() == 0) {
         return false;
       }
   
       Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
       view.getContext().startActivity(intent);
       return true;
     }
   }
   

Nu bent u klaar om een ​​geweldige WebView-app te bouwen.

Voor tips om de beelden precies goed te krijgen, zie Pixel-Perfect UI in de WebView .

Als u in de problemen komt, zijn de Chrome DevTools uw vrienden. Zie Foutopsporing op afstand op Android om aan de slag te gaan.