4.4 Der Splitviewcontroller

Das iPad bietet gegenüber dem iPhone eine circa fünfmal größere Anzeigefläche, die für die alleinige Darstellung einzelner Dialoge häufig zu groß ist. Beispielsweise ist die Fläche, die der Einstellungsdialog unserer Wecker-App benötigt, für den iPad-Bildschirm viel zu klein.

Das iPad bietet mit dem Splitviewcontroller die Möglichkeit, im Querformat die Views von zwei Viewcontrollern nebeneinander anzuzeigen. Da der linke Viewcontroller in der Regel den Inhalt des rechten festlegt, nennt Apple den linken Master- und den rechten Detailviewcontroller. Im Hochformat zeigt der Splitviewcontroller den Detailviewcontroller auf der kompletten Bildschirmfläche und den Masterviewcontroller optional in einem Pop-over an (siehe Abbildung 4.32). Damit das funktioniert, müssen beide Controller sowohl das Quer- als auch das Hochformat unterstützen. Für die Anzeige und die Steuerung des Pop-overs sollte der Detailviewcontroller außerdem eine Werkzeugleiste für den Button bieten, die in der Regel nicht zu einem Navigationcontroller gehört und am oberen Bildschirmrand liegt.

Abbildung 4.32 Splitviewcontroller im Hoch- und Querformat

Die Klasse UISplitViewController besitzt eine minimalistische Schnittstelle, die nur zwei Propertys enthält. Über viewControllers können Sie die beiden enthaltenen Viewcontroller in einem Array abfragen beziehungsweise festlegen. Dabei ist der erste Controller im Array der Master- und der zweite der Detailviewcontroller. Über die zweite Property bestimmen Sie das Delegate des Splitviewcontrollers.

4.4.1 Das Splitviewcontroller-Delegate

Das Delegate bietet drei optionale Methoden an, die Sie über Anzeigeereignisse des Masterviewcontrollers informieren. Der Splitviewcontroller ruft splitViewController:popoverController:willPresentViewController: auf, bevor er den Master im übergebenen Pop-over-Controller anzeigt. Wenn der Splitviewcontroller in das Querformat wechselt, ruft er splitViewController:willShowViewController:invalidatingBarButtonItem: auf und beim Wechsel in das Hochformat splitViewController:willHideViewController:withBarButtonItem:forPopoverController:.

Der Splitviewcontroller verwaltet jedoch nicht nur die beiden Viewcontroller für Sie, sondern auch den Pop-over-Viewcontroller und den Button für dessen Anzeige. Über die beiden letztgenannten Delegate-Methoden brauchen Sie nur die Anzeige des jeweils übergebenen Buttons verwalten, um den Pop-over-Viewcontroller anzeigen zu können. Die einfachste Möglichkeit dafür ist eine Toolbar, in die Sie den Button einfügen beziehungsweise aus der Sie den Button entfernen.

- (void)splitViewController:
    (UISplitViewController*)inSplitViewController
    willHideViewController:(UIViewController *)inMaster
    withBarButtonItem:(UIBarButtonItem*)inButton
    forPopoverController:(UIPopoverController*)inPopover {
    NSMutableArray *theItems = [NSMutableArray 
        arrayWithArray:self.toolbar.items mutableCopy];

    inButton.title = ...;
    [theItems insertObject:inButton atIndex:0];
    [self.toolbar setItems:theItems animated:YES];
    self.popoverController = inPopover;
}

Listing 4.30 Anzeige des Buttons für den Pop-over-Controller

Listing 4.30 enthält den Programmcode zur Anzeige des Buttons, über den Sie den Pop-over-Controller anzeigen lassen können. Wenn der Splitviewcontroller ins Querformat wechselt, müssen Sie den Button wieder aus der Werkzeugleiste entfernen. Dazu können Sie die zuletzt genannte Delegate-Methode verwenden. Den dafür notwendigen Programmcode finden Sie in Listing 4.31.

- (void)splitViewController:
    (UISplitViewController*)inSplitViewController
    willShowViewController:(UIViewController *)inViewController 
    invalidatingBarButtonItem:(UIBarButtonItem *)inButton { 
    NSMutableArray *theItems = [NSMutableArray 
        arrayWithArray:self.toolbar.items];

    [theItems removeObjectAtIndex:0];
    [self.toolbar setItems:theItems animated:YES];
    self.popoverController = nil;
}

Listing 4.31 Den Button für den Pop-over-Controller aus der Werkzeugleiste entfernen

4.4.2 Ein praktisches Beispiel

Die gute alte Wecker-App soll natürlich auch nicht vom Splitviewcontroller verschont bleiben. Die Umstellung lässt sich leicht bewerkstelligen. Auch hier sollten Sie zunächst die App für eine Sprache anpassen und danach die anderen Sprachen nachziehen.

Für die Umstellung öffnen Sie als Erstes das Storyboard der Sprache, mit der Sie beginnen möchten. Dort legen Sie einen Splitviewcontroller an, indem Sie das entsprechende Symbol aus der Bibliothek auf die Zeichenfläche ziehen. Der Interface Builder zeigt darauf vier neue Viewcontroller-Objekte auf der Zeichenfläche an (siehe Abbildung 4.33): neben dem Splitviewcontroller einen Navigationcontroller für den Master mit einem Tableviewcontroller als Wurzel. Außerdem legt er für die Detailansicht einen gewöhnlichen Viewcontroller an. Sie benötigen für den analogen Wecker allerdings nur den Splitview und den Navigationcontroller; löschen Sie also die beiden anderen Controller.

Abbildung 4.33 Ein Splitviewcontroller; frisch geschlüpft...

Die gelöschten Controller müssen Sie nun durch die bestehenden Controller ersetzen, damit der Splitviewcontroller seine Arbeit aufnehmen kann. Ziehen Sie dazu zunächst eine Verbindung vom Splitviewcontroller zu dem in Abschnitt 4.3.1 angelegten Navigationcontroller, und wählen Sie im Pop-over-Dialog den Eintrag detail view controller und Relationship Segue aus. Außerdem weisen Sie dem Navigationcontroller des Masters den Viewcontroller für die Einstellungen als neuen Rootviewcontroller zu, indem Sie eine entsprechende Verbindung ziehen. Danach legen Sie noch den Splitviewcontroller als neuen initialen Viewcontroller des Storyboards über das Feld Is Initial View Controller in dessen Attributinspektor fest und schließen damit die Arbeiten am Storyboard ab. Die endgültige Struktur der Viewcontroller im Storyboard sehen Sie in Abbildung 4.34.

Abbildung 4.34 ...und nach der Umstellung

Die geänderte Applikation zeigt den Einstellungsdialog und die Zeitanzeige nun in einem Splitview an, wenn Sie sie auf dem iPad oder im Simulator ausführen.

Von dem Splitviewcontroller bekommen Sie aber jetzt noch nicht viel zu sehen, da Ihre Applikation momentan nur eine Ausrichtung des Views unterstützt.

4.4.3 Anpassung des Rotationsverhaltens

Damit der Splitviewcontroller auch richtig zur Geltung kommen kann, sollte die Applikation auf einem iPad ihren View auch für andere Geräteausrichtungen als das Hochformat anpassen. Bei allen anderen Konfigurationen [iPhone und iPad ohne Splitviewcontroller] soll sie den View immer im Hochformat anzeigen. Dabei können Sie über die Pro3perty splitViewController der Klasse UIViewController den Splitviewcontroller erhalten, in dem sich der entsprechende Viewcontroller befindet; die Property liefert natürlich nil, wenn er nicht in einem Splitviewcontroller liegt. Bis iOS 5 können Sie über die Methode shouldAutorotateToInterfaceOrientation: festlegen, welche Viewausrichtungen ein Viewcontroller unterstützt:

- (BOOL)shouldAutorotateToInterfaceOrientation:
    (UIInterfaceOrientation)inOrientation {

    return inOrientation == UIInterfaceOrientationPortrait || 
        self.splitViewController != nil;
}

Listing 4.32 Unterstützte Viewausrichtungen dynamisch festlegen

Die Methode liefert YES, wenn der View des Controllers die angegebene Ausrichtung unterstützt, und ansonsten NO. Um das Ergebnis zu ermitteln, gibt es zum einen für jede Ausrichtung jeweils eine Konstante UIInterfaceOrientationPortrait, -PortraitUpsideDown, -LandscapeLeft und -LandscapeRight. Außerdem gibt es noch die beiden Makros UIInterfaceOrientationIsPortrait() und UIInterfaceOrientationIsLandscape(), mit denen Sie einen Wert auf Hoch- beziehungsweise Querformat prüfen können.

Ab iOS 6 gibt es neue Methoden, um die unterstützten Viewausrichtungen festzulegen. Das können Sie entweder für jeden Viewcontroller über die Methoden shouldAutorotate und supportedInterfaceOrientations getrennt festlegen, oder Sie wählen den zentralen Weg über application:supportedInterfaceOrientationsForWindow: des Application-Delegate. Die Methode shouldAutorotate legt dabei fest, ob sich der View des Controllers an die Geräteausrichtung anpassen soll. Wenn diese Methode NO liefert, dreht sich der View also nicht mit.

Das Beispielprojekt verwendet den zentralen Ansatz:

- (NSUInteger)application:(UIApplication *)inApplication 
    supportedInterfaceOrientationsForWindow:
    (UIWindow *)inWindow {
    return [inWindow.rootViewController 
        isKindOfClass:[UISplitViewController class]3] ? 
            UIInterfaceOrientationMaskAll : 
            UIInterfaceOrientationMaskPortrait;
}

Listing 4.33 Unterstützte Viewausrichtungen zentral festlegen

Die Methoden supportedInterfaceOrientations und application:supportedInterfaceOrientationsForWindow: liefern dabei jeweils eine Bitmaske mit den unterstützten Viewausrichtungen, für die es jeweils eine Konstante gibt. Sie können mehrere Ausrichtungen in den Rückgabewert über den Operator für das bitweise Oder | kodieren; beispielsweise lassen sich beide Hochformate durch

UIInterfaceOrientationMaskPortrait | 
    UIInterfaceOrientationMaskPortraitUpsideDown

ausdrücken. Außerdem gibt es für alle Ausrichtungen noch die Konstante UIInterfaceOrientationMaskAll.

Die Navigationsleiste über dem Ziffernblatt zeigt allerdings immer noch den Button zum Öffnen der Einstellungen an, der nach wie vor funktioniert. Bei einem Splitviewcontroller ist er jedoch unnötig. Sie können den Button zwar im Storyboard löschen, aber dann funktioniert die Variante mit dem Navigationcontroller nicht mehr einwandfrei. Alternativ lässt sich der Button auch über den Programmcode ausschalten, indem Sie ihn aus dem Navigation-Item des Controllers löschen. In Listing 4.34 sehen Sie den entsprechenden Code, den Sie in die Methode viewDidLoad des Alarmclockviewcontrollers einfügen.

if(self.splitViewController != nil) {
    self.NavigationItem.rightBarButtonItem = nil;
}

Listing 4.34 Entfernen Sie den Button bei Verwendung eines Splitviews.

Damit der Nutzer den Einstellungsdialog auch im Hochformat sehen kann, sollten Sie nun noch die Delegate-Methoden des Splitviewcontrollers implementieren. Als Delegate verwenden Sie dabei den Alarmclockviewcontroller. Damit er auch alle Delegate-Aufrufe des Splitviewcontrollers mitbekommt, erfolgt die Zuordnung in seiner awakeFromNib-Methode:

- (void)awakeFromNib {
    [super awakeFromNib];
    self.splitViewController.delegate = self;
}

Listing 4.35 Alarmviewcontroller als Splitviewcontrollerdelegate festlegen

Den Button zum Öffnen des Pop-overs zeigen Sie in der Toolbar des Navigationcontrollers im Detailview an. Diese Toolbar soll aber nur im Hochformat erscheinen, da der Platz im Querformat ansonsten zu klein ist. Die Anzeige können Sie über die Methode willRotateToInterfaceOrientation: steuern; dabei steuert die Hilfsmethode updateToolbarForInterfaceOrientation: die Anzeige.

- (void)updateToolbarForInterfaceOrientation:
    (UIInterfaceOrientation)inInterfaceOrientation {
    if(self.splitViewController) {
        [self.navigationController setToolbarHidden:
            UIInterfaceOrientationIsLandscape(
                inInterfaceOrientation) 
            animated:YES];
    }
}
- (void)willRotateToInterfaceOrientation:
    (UIInterfaceOrientation)inOrientation 
    duration:(NSTimeInterval)inDuration {
    [self updateToolbarForInterfaceOrientation:inOrientation];
}

Listing 4.36 Aktualisierung der Werkzeugleiste bei Gerätedrehungen

Der Viewcontroller ruft willRotateToInterfaceOrientation: allerdings nicht auf, wenn er auf dem Bildschirm erscheint, weshalb die Werkzeugleiste fehlt, wenn Sie die Applikation im Hochformat starten. Diesen Fehler können Sie jedoch leicht beheben, indem Sie die Methode updateToolbarForInterfaceOrientation: in viewDidAppear: aufrufen. Dabei können Sie die aktuelle Ausrichtung des Vie9ws über die Property interfaceOrientation des Viewcontrollers erfragen. Die entsprechende Änderung sehen Sie in Listing 4.37.

- (void)viewDidAppear:(BOOL)inAnimated {
    [super viewDidAppear:inAnimated];

    ...
    [self updateToolbarForInterfaceOrientation:
         self.interfaceOrientation];
}

Listing 4.37 Werkzeugleiste bei Erscheinen des Controllers aktualisieren

Mit diesen Änderungen sollte die Applikation auf einem iPad immer im Hochformat eine Werkzeugleiste anzeigen und im Querformat nicht. Die Implementierungen der beiden Delegate-Methoden fallen dagegen sehr kurz aus; Sie übergeben den Button zu den Toolbar-Items beziehungsweise entfernen ihn daraus. Außerdem legen Sie einen Titel für den Button fest.

- (void)splitViewController:
        (UISplitViewController *)inSplitViewController 
    willHideViewController:
        (UIViewController *)inViewController 
    withBarButtonItem:(UIBarButtonItem *)inBarButtonItem 
    forPopoverController:
        (UIPopoverController *)inPopoverController {
    inBarButtonItem.title = 
        NSLocalizedString(@"Preferences", @"Preferences");
    self.toolbarItems = @[inBarButtonItem];
}

- (void)splitViewController:
        (UISplitViewController *)inSplitViewController 
    willShowViewController:
        (UIViewController *)inViewController 
    invalidatingBarButtonItem:
        (UIBarButtonItem *)inBarButtonItem {
    self.toolbarItems = @[];
}

Listing 4.38 Aktualisierung des Buttons in der Werkzeugleiste

Ihr Kommentar

Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen.