4.8 Regelbasierte Anpassung der Oberfläche

Mit iOS 5 hat Apple auch neue Gestaltungsmöglichkeiten für die Oberflächenelemente eingeführt. Sie können jetzt bei der Navigations- und Werkzeugleiste nicht nur die Hintergrundfarbe, sondern auch die Farben der Buttons selbst festlegen. Dazu stellt der Attributinspektor für diese Buttons im Interface Builder eine Farbauswahl unter dem Punkt Tint bereit. Außerdem gibt es eine Reihe weiterer neuer Methoden.

4.8.1 Gestaltungsregeln ...

Neben den Möglichkeiten, die Oberfläche über direkte Anpassungen an den Views zu gestalten, bietet iOS 5 auch die Alternative, Regeln dafür festzulegen. Bisher haben Sie das Aussehen eines Views entweder über den Interface Builder und dessen Propertys beziehungsweise Methoden festgelegt. Mit diesem Vorgehen können Sie indes immer nur einen View auf einmal ändern. Bei der regelbasierten Oberflächengestaltung geben Sie, wie der Name schon vermuten lässt, Regeln an, um die Eigenschaften der Oberflächenelemente festzulegen.

Der Aufbau einer solchen Regel ist einfach und erfolgt über die Klasse, für die eine Einstellung gelten soll. Dabei können Sie die Einstellungen noch auf die Klassen der Superviews einschränken. Dieses System ist trotz seines simplen Aufbaus relativ mächtig. Das folgende Beispiel veranschaulicht dieses Regelsystem anhand einiger umgangssprachlicher Regeln:

1. Alle Labels haben eine graue Schriftfarbe.
2. Die Buttons in einer Navigationsleiste sind rot.
3. Die Labels in einem Tableview sind blau, sofern sie nicht in einer Zelle liegen.

Diese Regel lassen sich folgendermaßen umsetzen:

// Alle Labels haben eine graue Schriftfarbe
[[UILabel appearance] setTextColor:[UIColor darkGrayColor]];
// Die Buttons in einer Navigationsleiste sind rot.
[[UIBarButtonItem appearanceWhenContainedIn:
    [UINavigationBar class], nil]
    setTintColor:[UIColor redColor]];
// Die Labels in einem Tableview sind blau, sofern sie nicht
// in einer Zelle liegen.
[[UILabel appearanceWhenContainedIn:[UITableView class], nil]
    setTextColor:[UIColor blueColor]];
[[UILabel appearanceWhenContainedIn:
    [UITableViewCell class], [UITableView class], nil]
    setTextColor:[UIColor darkGrayColor]];

Listing 4.63 Regeldefinitionen für die Oberflächengestaltung

Die Definition der Regeln erfolgt also über die Klassenmethoden appearance und appearanceWhenContainedIn:. Diese beiden Methoden liefern jeweils ein Objekt zurück, bei dem Sie die Einstellungen vornehmen, die Sie auch bei dem entsprechenden View anwenden würden. Das Objekt nimmt den Methodenaufruf entgegen und sorgt für die Konfiguration der jeweiligen Views. Objekte, die Methodenaufrufe für andere Objekte entgegennehmen, nennt man auch Proxys. Für die erste Beispielregel greift die erste Anweisung in Listing 4.63 auf ein Proxy für Labels zu, bei dem es die Textfarbe setzt.

Die zweite Regel beschreibt die Farbe der Buttons in einer Navigationsleiste. Sie ist komplexer als die erste Regel, da sie nicht nur die Klasse der Zielobjekte enthält, sondern auch die Einschränkung, dass sich diese Objekte in einer Navigationsleiste befinden müssen. Diese Regel lässt sich über die Methode appearanceWhenContainedIn: beschreiben. Dabei gibt der Parameter eine Klasse an, in deren Views sich die Objekte befinden müssen, damit die Regel greift. Die zweite Anweisung in Listing 4.63 greift also auf ein Proxyobjekt für Buttons zu, das auf Navigationsleisten eingeschränkt ist.

Die dritte Beispielregel hat gegenüber der zweiten eine weitere Komplexitätsstufe, da sie auch die Einschränkung einschränkt. Regeln dieser Art lassen sich nur durch mehrere Anweisungen formulieren, indem Sie erst die Einschränkung und danach deren Einschränkungen beschreiben. Deshalb setzt die vorletzte Anweisung in Listing 4.63 die Textfarbe aller Labels auf blau, und die letzte Anweisung ersetzt diese Regel innerhalb von Tabellenzellen durch eine neue Regel. Bei dieser Regel geben Sie zwei Klassen in der Parameterliste an, die die Hierarchie der Views widerspiegeln. Sie können aus der Anweisung direkt die umgangssprachliche Regel herleiten, indem Sie die Klassennamen folgendermaßen von links nach rechts lesen: Die Regel betrifft alle UILabels, die in einer UITableViewCell liegen, die in einem UITableView liegt.

Wenn Sie die Angabe der Klasse UITableView aus der letzten Anweisung weglassen, funktioniert sie übrigens nicht mehr, und auch die Labels in den Zellen haben eine blaue Schrift. Das liegt daran, dass für Cocoa Touch die Regeln der beiden Anweisungen gleichwertig sind. Durch die zusätzliche Klassenangabe spezialisieren Sie die Regel in der letzten Anweisung stärker gegenüber der Regel in der vorletzten Anweisung.

Wenn Sie sich schon mal mit der Webseitengestaltung über CSS-Anweisungen beschäftigt haben, kommt Ihnen dieses Konzept vielleicht bekannt vor. Auch dort beschreiben Sie das Aussehen der Elemente über Regeln, wobei speziellere Regeln einfachere überschreiben. Das Beispiel lässt sich wie in Listing 4.64 in HTML und CSS abbilden.

<html>
  <head>
    <style>
      .label { color: #444444; }
      .tableview .label { color: #0000FF; }
      .tableview .cell .label { color: #444444; }
    </style>
  </head>
  <body>
    <label class="label">Label</label>
    <div class="tableview">
      <label class="label">Label in Tableview</label>
      <div class="cell">
        <label class="label">Label in Tableviewcell</label>
      </div>
    </div>
  </body>
</html>

Listing 4.64 HTML-Seitengestaltung über CSS-Regeln

Die CSS-Regeldefinitionen befinden sich im style-Tag am Anfang des Listings. Bei diesen Definitionen müssen Sie die Klassen vor einer öffnenden, geschweiften Klammer jeweils von rechts nach links lesen. Die dritte Regel betrifft also alle Elemente mit der Klasse label, die sich in einem Element mit der Klasse cell befinden, die sich wiederum in einem Element mit der Klasse tableview befindet.

4.8.2 ... und Gestaltungsmöglichkeiten

Den Code aus Listing 4.63 finden Sie in der Methode application:didFinishLaunchingWithOptions: der Wecker-App in der Version für iOS 5 mit Storyboard. Durch diese Anweisungen sind beispielsweise die Abschnittsüberschriften im Einstellungsdialog blau. Die Farbe dieser Elemente können Sie allerdings nicht über den Interface Builder setzen, und so erlaubt Ihnen die regelbasierte Oberflächengestaltung die Anpassung von Elementen, auf die Sie keinen direkten Zugriff haben. Das kann ein Segen sein, wie bei den Abschnittsüberschriften. Andererseits führen die Regeln manchmal auch zu unerwünschten Änderungen. In der Beispiel-App ist der Text eines oder beider nicht ausgewählten Segmente in der Zeiteinteilungsauswahl jetzt grau. Es kann also passieren, dass Sie durch die Regeln auch Elemente verändern, die Sie nicht verändern wollten.

Die Beispiele haben bislang nur die Farbe von Elementen verändert. Sie können indes nahezu beliebige Einstellungen der Views damit verändern. Die Methoden zum Lesen und Schreiben der Einstellung müssen dabei nur einen festen Aufbau haben. Dabei kann die eigentliche Einstellung laut Dokumentation einen der folgenden Typen haben: id oder eine Klasse, NSInteger, NSUInteger, CGFloat, CGPoint, CGSize, CGRect, UIEdgeInsets oder UIOffset. Die Accessoren auf diese Einstellungen dürfen auch noch weitere Parameter entgegennehmen, wenn diese ganze Zahlen sind. Hierzu ein paar Beispiele:

• Die Propertys backgroundColor, textColor, tintColor, image und backgroundImage können Sie verwenden, weil der Typ dieser Einstellungen jeweils eine Klasse ist. Sie können auch die Propertys textAlignment, bounds, frame, lineBreakMode über Regeln setzen, weil deren Typen in der Liste oben auftreten. Die Ganzzahltypen NSInteger und NSUInteger decken dabei übrigens auch Aufzählungstypen wie UITextAlignment ab.
• Die zustandsabhängigen Eigenschaften eines Buttons wie beispielsweise setTitleColor:(UIColor*)forState:(UIControlState) lassen sich auch über Regeln setzen, da der Typ des ersten Parameters eine Klasse und der Typ des zweiten Parameters ein Aufzählungs- also ein Ganzzahltyp ist. Sie können auch die Methode setBackgroundImage:(UIImage*)forState:(UIControlState)barMetrics:(UIBarMetrics) verwenden, da auch hier der erste Parametertyp eine Klasse ist und alle weiteren Parameter Ganzzahltypen haben.
• Ein Gegenbeispiel sind die Property transform und die Methode setFinishedSelectedImage:(UIImage*)withFinishedUnselectedImage:(UIImage*) der Klasse UITabBarItem. Die Property scheidet aus, weil sie die C-Struktur CGAffineTransform als Typ hat, den die obige Liste nicht enthält. Bei der Methode ist der Typ des zweiten Parameters ebenfalls eine Klasse und kein Ganzzahltyp, weswegen Sie sie nicht verwenden dürfen.

Diese Beispiele sind sehr unvollständig. Sie können über zwei Verfahren ermitteln, ob sich eine Eigenschaft über Regeln anpassen lässt. Zum einen können Sie sich die Deklaration der Property beziehungsweise der Methode in der Headerdatei ansehen. Das geht am einfachsten, wenn Sie mit der Maus auf den Namen klicken und dabei die Taste drücken. Dann springt Xcode zur Deklaration des angeklickten Symbols. Alle Propertys oder Methoden, die sich über Regeln konfigurieren lassen, enthalten das Makro UI_APPEARANCE_SELECTOR am Ende. Allerdings können Sie aus dem Fehlen des Makros nicht darauf schließen, dass diese Einstellung sich nicht über Regeln setzen lässt.

Aus diesem Grund gibt es noch ein weiteres, zuverlässigeres Verfahren. Probieren Sie es aus, indem Sie eine entsprechende Anweisung in Ihren Code einfügen. Entweder akzeptiert Cocoa Touch den Aufruf oder das Programm stürzt mit der Meldung

*** Terminating app due to uncaught exception 'NSInvalidArgumentException', 
reason: '*** Illegal property type, XXX in invocation selector, YYY'

ab.

Sie können über Regeln sogar die Einstellungen Ihrer eigenen Klassen verändern. Beispiel: Die Farbe des Ziffernblattes der Wecker-App soll sich in der Version für iOS 5 über die Property dialColor von außen setzen lassen. Dazu fügen Sie in den Header der Klasse ClockView die Property-Deklaration

@property (nonatomic, strong) UIColor *dialColor;

ein und in den Implementierungsteil die entsprechende Synthetisierung:

@synthesize dialColor;

Außerdem müssen Sie den Anfang der drawRect:-Methode ändern. Dort ersetzen Sie den bisherigen Funktionsaufruf zum Setzen der Füllfarbe durch den Aufruf der Methode setFill bei der neuen Property. setFill legt die Füllfarbe im aktuellen Grafikkontext fest. Listing 4.65 zeigt den Ausschnitt aus der Methode, der dazu geändert wurde:

CGContextSaveGState(theContext);
[self.dialColor setFill];
CGContextAddEllipseInRect(theContext, theBounds);
CGContextFillPath(theContext);

Listing 4.65 Setzen der Ziffernblattfarbe über eine Property

Wenn Sie nun die Wecker-App starten, zeigt sie ein schwarzes Ziffernblatt mit grauer Beschriftung. Das liegt daran, dass Sie noch keine Füllfarbe festgelegt haben. Fügen Sie nun in die Methode application:didFinishLaunchingWithOptions: des App-Delegates die Anweisung

[[ClockView appearance] setDialColor:[UIColor whiteColor]];

ein, und importieren Sie dort auch die Headerdatei ClockView.h des Ziffernblattes, um Übersetzungsfehler zu vermeiden. Durch diese Änderung zeigt der Wecker wieder ein weißes Ziffernblatt an.

Ihr Kommentar

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