Dieser Blogeintrag befasst sich mit dem Skinning der UISegmentedControl-Komponente, was sich mit iOS 5 nun einfacher gestaltet. So sieht die Komponente in ihren normalen Zustand aus:
Seit iOS 5 werden die Methoden setBackgroundImage: forState: barMetrics: und setDividerImage: forLeftSegmentState: rightSegmentState: barMetrics: bereitgestellt, mit denen das Aussehen der Komponente im Handumdrehen verändert werden kann.
Der verwendete Code für die obrige Darstellung sieht folgendermaßen aus:
// navigation is an UISegmentedControl
// BACKGROUND
// unselected
UIImage *unselected = [[UIImage imageNamed:@"unselected.png"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)];
[[self navigation] setBackgroundImage:unselected
forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
// selected
UIImage *selected = [[UIImage imageNamed:@"selected.png"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)];
[[self navigation] setBackgroundImage:selected
forState:UIControlStateSelected
barMetrics:UIBarMetricsDefault];
// DIVIDER
// unselected/unselected
UIImage *unselectedUnselected = [UIImage imageNamed:@"unselected_unselected.png"];
[[self navigation] setDividerImage:unselectedUnselected
forLeftSegmentState:UIControlStateNormal
rightSegmentState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
// selected/unselected
UIImage *selectedUnselected = [UIImage imageNamed:@"selected_unselected.png"];
[[self navigation] setDividerImage:selectedUnselected
forLeftSegmentState:UIControlStateSelected
rightSegmentState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
// unselected/selected
UIImage *unselectedSelected = [UIImage imageNamed:@"unselected_selected.png"];
[[self navigation] setDividerImage:unselectedSelected
forLeftSegmentState:UIControlStateNormal
rightSegmentState:UIControlStateSelected
barMetrics:UIBarMetricsDefault];
Die Eigenschaften des Labels können mit der Methode setTitleTextAttributes: forState: verändert werden.
// navigation is an UISegmentedControl
// STATE NORMAL
[navigation setTitleTextAttributes:
[NSDictionary dictionaryWithObjectsAndKeys:
[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0],
UITextAttributeTextColor,
[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8],
UITextAttributeTextShadowColor,
[NSValue valueWithUIOffset:UIOffsetMake(0, -1)],
UITextAttributeTextShadowOffset,
nil] forState:UIControlStateNormal];
// STATE SELECTED
[navigation setTitleTextAttributes:
[NSDictionary dictionaryWithObjectsAndKeys:
[UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:1.0],
UITextAttributeTextColor,
[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8],
UITextAttributeTextShadowColor,
[NSValue valueWithUIOffset:UIOffsetMake(0, -1)],
UITextAttributeTextShadowOffset,
nil] forState:UIControlStateSelected];
Das hier verwendete Beispiel verändert die Farbe der Labels für den normalen und selektierten Zustand.
Die verwendeten Grafiken für die Segmente selber sind nicht auf die Buttonform beschränkt. Hier ein Beispiel, in dem die Segmente eher an Tabs erinnern:
Das komplette Beispiel mit allen Grafiken und dem Code könnte ihr hier als Xcode-Projekt herunterladen.