UIWebView Tutorial deutsch – Websites anzeigen

Einleitung

In diesem Tutorial geht es um den UIWebView. Mit Hilfe dieses Objects ist es möglich, Websites innerhalb der eigenen App anzuzeigen. Außerdem behandle ich noch das Object Activity Indicator View, das man benutzen kann, um anzuzeigen, dass eine App gerade Daten lädt. Wir werden ihn verwenden, um den User darauf hinzuweisen, dass die Website geladen wird.

Was Du in diesem Tutorial lernst:

• Implementieren eines Web Views und Anzeigen einer Website
• Implementieren eines Activity Indicator Views

Diese Tutorial wurde für iOS 5 und Xcode Version 4.2 oder neuer (4.3) geschrieben.

Falls Du noch neu in der iOS Entwicklung bist, solltest Du vorher dieses Tutorial zum Einstieg lesen: Einsteiger Tutorial deutsch.
Außerdem solltest dich schon mit dem Storyboard auskennen: Storyboard Tutorial Part 1, Part 2, Part 3.

1. Die App

Der User kann die URL einer Website eingeben  und diese dann auf Knopfdruck in einem neue View anzeigen lassen. Selbstverständlich kann man sich dann frei auf der Website bewegen.

2. Das Interface

Öffne Xcode und erstelle ein neues Projekt. Wir benutzen für dieses Tutorial das Single View Application-Template. Nenne das Projekt beispielsweise “UIWebViewTutorial” und stelle folgende Projekt-Optionen ein:

Klicke auf Next und speichere das Projekt ab.

Wir beginnen wie immer im Storyboard. Öffne die Datei “MainStoryboard.storyboard”.

Zuerst fügen wir zum View Controller einen Navigation Controller hinzu, um die Navigation zu vereinfachen. Wähle dazu den “View Controller” aus, indem du auf das schwarze Dock unter ihm klickst und wähle dann in der Menüleiste von Xcode Editor->Embed In->Navigation Controller. Der Navigation Controller erscheint damit im Editor-Bereich und der “View Controller” besitzt nun eine Navigation Bar.

Wir ändern gleich mal den Titel der Navigation Bar von “View Controller”. Klicke dazu doppelt auf die Navigation Bar und gib dann “Web View” ein.

Als nächstes fügen wir ein paar Objects hinzu, ein Textfeld und einen Button (s. Bild unten). Wähle dann gleich das Textfeld aus, öffne den Attributes inspector und gib bei Text ”iosdevgermany.de” ein. Außerdem sollte der Haken bei “Clear when editing begins” gesetzt sein. Das bewirkt, dass sobald das Textfeld ausgewählt wird, der Text im Textfeld verschwindet.

Nun erstellen wir einen neuen View Controller für unseren Web View. Der View Controller ist gleich das erste Object in der Library. Ziehe es rechts neben den ersten View Controller. Um die Controller besser anordnen zu können, kannst Du mit dem Lupensymbol rauszoommen.

Bevor wir den Web View hinzufügen, verbinden wir die beiden View Controller mit einer Segue. Klicke dazu mit gedrückter ctrl-Taste auf den Button “Website anzeigen” und ziehe den blauen Faden auf den anderen View Controller. Wähle im daraufhin erscheinenden Menü “Push”.

Da wir später im Code Daten zwischen den beiden Controllern schieben wollen, müssen wir auf die Segue zugreifen können. Das funktioniert nur, wenn wir dieser einen eindeutigen Identifier geben. Wähle also die Segue aus und öffne den Attributes inspector. Gib bei Identifier ”ShowWebsite” ein.

Jetzt müssen wir nur noch einen Web View aus der Library in unsere ganz rechten View Controller ziehen. Dann sind wir mit dem Interface für’s Erste fertig. Achte darauf, dass der Web View den ganzen freien Platz im View einnimmt.

Bevor wir weitermachen, testen wir die App. Führe sie also aus und klicke auf den Button “Website anzeigen”. Daraufhin sollte der neue View Controller erscheinen.

3. Die Dateien für den neuen View Controller erstellen

Zunächst benötigen wir die .m- und die .h-Datei für den neuen View Controller, in dem der Web View liegt.

Klicke mit der rechten Maustaste auf den Projektordner “UIWebViewTutorial” und wähle New File…

Unter Xcode 4.3 befindet sich das View Controller subclass-Template mit im Objective-C class-Template. Wähle es deshalb aus und gib bei Class ”WebViewViewController” ein. Außerdem sollte bei Subclass of ”UIViewController” ausgewählt sein. Weder der Haken bei Targeted for iPad noch bei With XIB for user interface sollte gesetzt sein.

Klicke dann im nächsten Fenster auf Create.

Schließlich müssen wir die Dateien nur noch einem View Controller im Storyboard zuordnen. Öffne wieder “MainStoryboard.storyboard” und wähle den ganz rechten View Controller aus, den mit dem Web View. Öffne dann den Identity inspector und gib bei Class ”WebViewViewController” ein.

4. Die Outlets erstellen

Wir benötigen die Outlets von zwei der Objects, dem Textfeld und dem Web View. Um diese zu erstellen, wähle zuerst das Textfeld an und aktiviere dann den Assistant editor (mittlere Button von Editor in der Toolbar). Auf der rechten Seite sollte die Datei “ViewController.h” angezeigt werden. Klicke dann mit gedrückter ctrl-Taste auf das Textfeld und ziehe den Faden über die @end-Zeile. Nenne das Outlet “textField” und klicke auf Connect.

Wiederhole diesen Schritt für den Web View: Wähle ihn aus, ziehe den Faden über @end in “WebViewViewController.h” und nenne das Outlet “webView”.

5. Die Website anzeigen

Jetzt kommen wir zum eigentlich wichtigen Teil des Tutorials. Dem Anzeigen der Website.

Der User gibt eine Adresse ins Textfeld ein, zum Beispiel “iosdevgermany.de”. Dieser Text wird dann dem WebViewViewController übergeben. In diesem fügen wir noch “http://www.” an die Webadresse an und öffne die Website im Web View. Das setzen wir jetzt im Code um.

Zuerst wollen wir also den Textfeld-Text dem WebViewViewController übergeben. Dazu benötigt dieser View Controller eine weitere Membervariable, in der wie den Text speichern.

Öffne also die Datei “WebViewViewController.h” und ändere sie wie folgt ab:

#import <UIKit/UIKit.h>

@interface WebViewViewController : UIViewController {
    NSString *websiteName;
}
@property (copy, nonatomic) NSString * websiteName;
@property (weak, nonatomic) IBOutlet UIWebView *webView;
@end

Das einzig neue ist die Membervariable websiteName vom Typ NSString.

In “WebViewViewController.m” muss diese noch synthetisiert werden:

@synthesize websiteName=_websiteName;

Das ist die Standard-@synthesize Zeile für eine weak-Property (Genaueres im Storyboard-Tutorial Part 3).

Selbstverständlich müssen wir den “WebViewViewController” noch in den “ViewController” einbinden, damit wir auf die neue Membervariable zugreifen können.

Öffne “ViewController.m” und füge

#import "WebViewViewController.h"

unter der anderen #import-Zeile ein.

Jetzt können wir diesem View Controller den Textfeld-Text übergeben. Füge folgende Methode hinzu:

-(void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    if ([[segue identifier] isEqualToString:@"ShowWebsite"]) {
        WebViewViewController *website = [segue destinationViewController];
        website.websiteName = textField.text;
    }
}

In der Methode prepareForSegue:sender übergeben wir dem WebViewViewController den Text aus dem Textfeld, noch bevor dieser View Controller aufgerufen wird. Hier kommt der vorhin festgelegte Identifier, “ShowWebsite”, der Segue zum Einsatz. Dann wird der Textfeld-Text in der eben erstellten Membervariable von WebViewViewController, websiteName, gespeichert.

Als nächstes muss der WebViewViewController nur noch dafür sorgen, dass die angegeben Website auch angezeigt wird. Damit er dies auch kann, müssen wir ein Protokoll, also ein Delegate, implementieren. Das sogenannte UIWebViewDelegate.

Öffne “WebViewViewController.h” und ändere die @interface-Zeile ab:

@interface WebViewViewController : UIViewController <UIWebViewDelegate> {

Nun muss das Delegate noch dem Web View im Storyboard zugewiesen werden. Öffne “MainStoryboard.storyboard” und suche im Document Outline nach dem Web View. Klicke dann mit gedrückter ctrl-Taste auf den Web View und ziehe den blauen Faden auf den Web View View Controller. Wähle dann den Punkt delegate.

Schlussendlich kommen wir nun zum Öffnen der Website. Öffne die Datei “WebViewViewController.m” und ändere die Methode viewDidLoad wie folgt ab:

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view.
    self.title = self.websiteName;
    NSString *fullURL = [NSString stringWithFormat:@"http://www.%@", self.websiteName];
    NSURL *websiteURL = [NSURL URLWithString:fullURL];
    NSURLRequest *requestObj = [NSURLRequest requestWithURL:websiteURL];
    [self.webView loadRequest:requestObj];
}

Zeile 5: Der Vollständigkeit halber ändern wir den Titel der Navigation Bar im WebViewViewController auf den Namen der Website. Das heißt in der Navigation Bar stünde beispielsweise “iosdevgermany.de”.
Zeile 6: An den Namen der Website wird “http://www.” angehängt, damit eine vollständige Web-Adresse entsteht. Diese wird im NSString fullURL gespeichert.
Hinweis: Um zwei Zeichenketten zusammenzufügen verwendet man die Methode stringWithFormat. In dem String “http://www.%@” wird für %@ die dahinterstehende Variable, der Website-Name, eingefügt.
Zeile 7: Hier wird eine weitere Variable erstellt, vom Typ NSURL. Aus dem String fullURL wird so eine richtige URL.
Zeile 8: requestObj ist ein Objekt, das angibt, das eine Website geladen werden soll. Welche das ist wird mit requestWithURL: websiteName festgelegt.
Zeile 9: Schließlich öffnet der Web View die Website, indem er die Request lädt.

Endlich ist unser Web View funktionstüchtig. Führe die App nun einmal aus und klicke auf “Website anzeigen”. Nach einer kurzen Ladezeit sollte die Website angezeigt werden:

Was mir allerdings noch nicht so gut gefällt, ist, dass immer nur ein kleiner Ausschnitt der Website angezeigt wird. Auch Zoomen ist nicht möglich. Das lässt sich schnell beheben.

Öffne “MainStoryboard.storyboard” und wähle den Web View aus. Lass ihn dir im Attributes inspector anzeigen und setze dann das Häkchen bei Scales Page To Fit.

Führe die App nun erneut aus. Jetzt wird die ganze Website angezeigt und man kann sogar mit Hilfe der alt-Taste im Simulator zoomen.

6. Der Activity Indicator View

Leider benötigen manche Website etwas länger zum Laden. Deshalb ist es sinnvoll, den Benutzer darauf hinzuweisen, das die Website noch lädt. Dazu eignet sich am Besten ein Activity Indicator View. Diesen werden wir jetzt einbauen.

Öffne “MainStoryboard.storyboard”, wenn sie nicht schon geöffnet ist, und suche in der Library nach dem Activity Indicator View. Ziehe ihn dann irgendwohin in den Web View, zum Beispiel in die Mitte. Öffne dann den Attributes inspector und ändere Color auf Schwarz:

Als nächstes benötigen wir das Outlet diese Objects. Schalte also wieder auf Assistant editor um und ziehe den blauen Faden vom Object zu den andere properties. Nenne das Outlet loadingSign:

Zum Schluss müssen wir noch zwei neue Methode zu “WebViewViewController.m” hinzufügen:

-(void) webViewDidStartLoad:(UIWebView *)webView {
    [self.loadingSign startAnimating];
    self.loadingSign.hidden = NO;
}

-(void) webViewDidFinishLoad:(UIWebView *)webView {
    [self.loadingSign stopAnimating];
    self.loadingSign.hidden = YES;
}

Zuerst die Methode webViewDidStartLoad:, die aufgerufen wird, wenn die Website beginnt zu laden. In dieser Methode starten wir die Animation des Activity Indicator Views und machen ihn sichtbar.

In webViewDidFinishLoad: machen wir das genaue Gegenteil. Wir stoppen die Animation und verstecken das Object.

Und schon sind wir fertig. Starte nun die App. Wenn der “Website anzeigen”-Button gedrückt wird, erscheint zuerst der kleine drehende Kreis, bevor die Website angezeigt wird.

5. Schluss

Du kannst das fertige Xcode-Projekt wie immer downloaden: UIWebViewTutorial

Dieses Tutorial wurde sich von einem Leser gewünscht. Du kannst mir gerne auch ein Tutorial vorschlagen. Entweder über die Kommentarfunktion oder das Kontakt-Formular.

Bei Fragen kannst Du mir gerne ein Kommentar hinterlassen. Wenn Du keine Tutorials mehr verpassen willst, abonniere einfach den Blog RSS oder folge mir auf Twitter.