Customizing Your App's Appearance for iOS 7
Session 214 Jacob Xiao
iOS Apps and Frameworks
These are confidential sessionsplease refrain from streaming, blogging, or taking pictures
What You Will Learn
Whats changed Advanced customization Making custom controls
Separating Images
Text Attributes
Alignment Insets
Retina Images
Bar Metrics
Theming
UIAppearance
Resizable Images
Background Images
Control State
Whats Changed
Status Bar
Status Bar
UIStatusBarStyleDefault
Status Bar
UIStatusBarStyleDefault
UIStatusBarStyleLightContent
Status Bar
UIStatusBarStyleDefault
UIStatusBarStyleLightContent
Status Bar
Status Bar
Status Bar
Status Bar
568 pt 480 pt
320 pt
320 pt
Status Bar
568 pt 480 pt
320 pt
320 pt
Status Bar
Status Bar
Status Bar
Status Bar
window.tintColor = [UIColor redColor];
Tint Color
Tint Color
Tint Color
@property(nonatomic,retain) UIColor *tintColor;
Tint Color
@property(nonatomic,retain) UIColor *tintColor; window.tintColor = [UIColor redColor];
Bar Tint Color
Bar Tint Color
bar.tintColor = [UIColor redColor];
Bar Tint Color
Bar Tint Color
bar.tintColor = [UIColor redColor];
Bar Tint Color
bar.barTintColor = [UIColor yellowColor];
Bar Tint Color
bar.tintColor = [UIColor redColor]; bar.barTintColor = [UIColor yellowColor];
Bar Tint Backgrounds Color
@property(nonatomic,retain) UIColor *barTintColor;
Bar Backgrounds
Bar Backgrounds
Bar Backgrounds
44 pt
Bar Backgrounds
44 pt
64 pt
Bar Backgrounds
Bar Backgrounds
Bar Backgrounds
32 pt
Bar Backgrounds
32 pt
52 pt
Bar Backgrounds
Bar Backgrounds
[bar setBackgroundImage:tallImage forBarPosition:UIBarPositionTopAttached barMetrics:UIBarMetricsDefault];
Bar Backgrounds
[bar setBackgroundImage:tallImage forBarPosition:UIBarPositionTopAttached barMetrics:UIBarMetricsDefault];
[bar setBackgroundImage:image forBarPosition:UIBarPositionTop barMetrics:UIBarMetricsDefault];
Bar Backgrounds
[bar setBackgroundImage:tallImage forBarPosition:UIBarPositionTopAttached barMetrics:UIBarMetricsDefault];
[bar setBackgroundImage:image forBarPosition:UIBarPositionTop barMetrics:UIBarMetricsDefault];
[bar setBackgroundImage:image forBarPosition:UIBarPositionAny barMetrics:UIBarMetricsDefault];
Bar Backgrounds
44 pt
64 pt
Bar Backgrounds
44 pt
64 pt
@property(nonatomic,retain) UIImage *shadowImage;
Translucency
Translucency
Normal
Translucency
Normal
Bar Tint Color
Translucency
Normal
Bar Tint Color
Custom Background
Translucency
Translucency
Translucency
Translucency
UIViewController.h
Navigation Bar
Navigation Bar
Navigation Bar
@property(nonatomic,retain) UIImage *backIndicatorImage;
Navigation Bar
@property(nonatomic,retain) UIImage *backIndicatorImage;
Navigation Bar
@property(nonatomic,retain) UIImage *backIndicatorImage;
Navigation Bar
@property(nonatomic,retain) UIImage *backIndicatorImage;
Navigation Bar
@property(nonatomic,retain) UIImage *backIndicatorImage; @property(nonatomic,retain) UIImage *backIndicatorTransitionMaskImage;
Navigation Bar
@property(nonatomic,retain) UIImage *backIndicatorImage; @property(nonatomic,retain) UIImage *backIndicatorTransitionMaskImage;
Navigation Bar
@property(nonatomic,retain) UIImage *backIndicatorImage; @property(nonatomic,retain) UIImage *backIndicatorTransitionMaskImage;
Tab Bar
Tab Bar
@property(nonatomic) UIBarStyle barStyle;
Tab Bar
UIBarStyleDefault
@property(nonatomic) UIBarStyle barStyle;
Tab Bar
UIBarStyleDefault
UIBarStyleBlack
@property(nonatomic) UIBarStyle barStyle;
Tab Bar
Tab Bar
Tab Bar
@property(nonatomic,retain) UIImage *image;
Tab Bar
@property(nonatomic,retain) UIImage *image; @property(nonatomic,retain) UIImage *selectedImage;
Tab Bar
@property(nonatomic,retain) UIImage *image; @property(nonatomic,retain) UIImage *selectedImage;
Table View
Table View
Table View
Table View
Table View
@property(nonatomic,retain) UIView *selectedBackgroundView;
Buttons
Buttons
UIButtonTypeSystem
Buttons
UIButtonTypeSystem
UIButtonTypeRoundedRect
Buttons
UIButtonTypeSystem
Buttons
UIButtonTypeSystem
Buttons
UIButtonTypeSystem
pauseButton.selected = YES;
Buttons
UIButtonTypeSystem
Other Controls
Other Controls
Asset Catalog
Advanced Customization
Tint Color
Tint Color
window.tintColor = [UIColor redColor];
Tint Color
Tint Color
Tint Color
Specific
Inherited
Tint Color
window.tintColor = [UIColor redColor];
Specific
Inherited
Tint Color
window.tintColor = [UIColor redColor];
Specific
Inherited
Tint Color
window.tintColor = [UIColor redColor];
Specific
Inherited
Tint Color
window.tintColor = [UIColor redColor];
Specific
Inherited
Tint Color
window.tintColor = [UIColor redColor]; window.tintColor = nil;
Specific
Inherited
Tint Color
window.tintColor = [UIColor redColor]; window.tintColor = nil;
Specific
Inherited
Tint Color
window.tintColor = [UIColor redColor]; window.tintColor = nil;
Specific
Inherited
Tint Color
window.tintColor = [UIColor redColor]; window.tintColor = nil;
Specific
Inherited
Tint Color
Specific
Inherited
Tint Color
view.tintColor = [UIColor greenColor];
Specific
Inherited
Tint Color
view.tintColor = [UIColor greenColor];
Specific
Inherited
Tint Color
view.tintColor = [UIColor greenColor]; window.tintColor = [UIColor redColor];
Specific
Inherited
Tint Color
view.tintColor = [UIColor greenColor]; window.tintColor = [UIColor redColor];
Specific
Inherited
typedef NS_ENUM(NSInteger, UIViewTintAdjustmentMode) { UIViewTintAdjustmentModeAutomatic, UIViewTintAdjustmentModeNormal, UIViewTintAdjustmentModeDimmed,
};
Tint Adjustment Mode
Tint Adjustment Mode
@property(nonatomic) UIViewTintAdjustmentMode tintAdjustmentMode;
Normal
Normal
Normal
Normal
Normal
Normal
Tint Adjustment Mode
@property(nonatomic) UIViewTintAdjustmentMode tintAdjustmentMode;
Dimmed Normal
window.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed;
Normal
Normal
Normal
Normal
Normal
Tint Adjustment Mode
@property(nonatomic) UIViewTintAdjustmentMode tintAdjustmentMode;
Dimmed Normal
window.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed;
Normal
Normal
Normal
Normal
Normal
Tint Adjustment Mode
@property(nonatomic) UIViewTintAdjustmentMode tintAdjustmentMode;
Dimmed Normal
window.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed;
Dimmed Normal
Dimmed Normal
Dimmed Normal
Normal
Normal
Tint Adjustment Mode
@property(nonatomic) UIViewTintAdjustmentMode tintAdjustmentMode;
Dimmed Normal
window.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed;
Dimmed Normal
Dimmed Normal
Dimmed Normal
Normal
Normal
Tint Adjustment Mode
@property(nonatomic) UIViewTintAdjustmentMode tintAdjustmentMode;
Dimmed Normal
window.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed;
Dimmed Normal
Dimmed Normal
Dimmed Normal
Dimmed Normal
Dimmed Normal
Tint Adjustment Mode
Tint Adjustment Mode
Tint Adjustment Mode
Normal
Normal
Normal
Normal
Normal
Normal
Tint Adjustment Mode
Auto
Normal
Specific
Inherited
Auto
Normal
Auto
Normal
Auto
Normal
Auto
Normal
Auto
Normal
Tint Adjustment Mode
window.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed;
Dimmed Auto
Normal
Specific
Inherited
Auto
Normal
Auto
Normal
Auto
Normal
Auto
Normal
Auto
Normal
Tint Adjustment Mode
window.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed;
Dimmed Auto
Dimmed Normal
Specific
Inherited
Auto
Normal
Auto
Normal
Auto
Normal
Auto
Normal
Auto
Normal
Tint Adjustment Mode
window.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed;
Dimmed Auto
Dimmed Normal
Specific
Inherited
Auto
Normal
Auto
Normal
Auto
Normal
Auto
Normal
Auto
Normal
Tint Adjustment Mode
window.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed;
Dimmed Auto
Dimmed Normal
Specific
Inherited
Auto
Dimmed Normal
Auto
Dimmed Normal
Auto
Dimmed Normal
Auto
Normal
Auto
Normal
Tint Adjustment Mode
window.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed;
Dimmed Auto
Dimmed Normal
Specific
Inherited
Auto
Dimmed Normal
Auto
Dimmed Normal
Auto
Dimmed Normal
Auto
Normal
Auto
Normal
Tint Adjustment Mode
window.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed;
Dimmed Auto
Dimmed Normal
Specific
Inherited
Auto
Dimmed Normal
Auto
Dimmed Normal
Auto
Dimmed Normal
Auto
Dimmed Normal
Auto
Dimmed Normal
Tint Adjustment Mode
window.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed; view.tintAdjustmentMode = UIViewTintAdjustmentModeNormal;
Dimmed Auto Dimmed Normal
Specific
Inherited
Auto
Dimmed Normal
Auto
Dimmed Normal
Normal Auto
Dimmed Normal
Auto
Dimmed Normal
Auto
Dimmed Normal
Tint Adjustment Mode
window.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed; view.tintAdjustmentMode = UIViewTintAdjustmentModeNormal;
Dimmed Auto Dimmed Normal
Specific
Inherited
Auto
Dimmed Normal
Auto
Dimmed Normal
Normal Auto
Dimmed Normal
Auto
Dimmed Normal
Auto
Dimmed Normal
Tint Adjustment Mode
window.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed; view.tintAdjustmentMode = UIViewTintAdjustmentModeNormal;
Dimmed Auto Dimmed Normal
Specific
Inherited
Auto
Dimmed Normal
Auto
Dimmed Normal
Normal Auto
Dimmed Normal
Auto
Dimmed Normal
Auto
Dimmed Normal
Tint Adjustment Mode
window.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed; view.tintAdjustmentMode = UIViewTintAdjustmentModeNormal;
Dimmed Auto Dimmed Normal
Specific
Inherited
Auto
Dimmed Normal
Auto
Dimmed Normal
Normal Auto
Dimmed Normal
Auto
Dimmed Normal
Auto
Dimmed Normal
Tint Adjustment Mode
Auto
Normal
Specific
Inherited
Auto
Normal
Auto
Normal
Auto
Normal
Auto
Normal
Auto
Normal
Tint Adjustment Mode
window.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed;
Dimmed Auto
Normal
Specific
Inherited
Auto
Normal
Auto
Normal
Auto
Normal
Auto
Normal
Auto
Normal
Tint Adjustment Mode
window.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed;
Dimmed Auto
Dimmed Normal
Specific
Inherited
Auto
Dimmed Normal
Auto
Dimmed Normal
Auto
Dimmed Normal
Auto
Dimmed Normal
Auto
Dimmed Normal
Tint Adjustment Mode
window.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed; window.tintAdjustmentMode = UIViewTintAdjustmentModeAutomatic;
Auto Dimmed Normal
Specific
Inherited
Auto
Dimmed Normal
Auto
Dimmed Normal
Auto
Dimmed Normal
Auto
Dimmed Normal
Auto
Dimmed Normal
Tint Adjustment Mode
window.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed; window.tintAdjustmentMode = UIViewTintAdjustmentModeAutomatic;
Auto Normal
Specific
Inherited
Auto
Normal
Auto
Normal
Auto
Normal
Auto
Normal
Auto
Normal
Tint Adjustment Mode
Tint Adjustment Mode
Tint Adjustment Mode
Template Images
Template Images
Template Images
Template Images
Rendering Mode
UIImageRenderingMode
Rendering Mode
UIImageRenderingMode
Automatic UIImageView
AlwaysOriginal
AlwaysTemplate
UIBarButtonItem
Rendering Mode
UIImageRenderingMode
Automatic UIImageView
AlwaysOriginal
AlwaysTemplate
UIBarButtonItem
Rendering Mode
UIImageRenderingMode
Automatic UIImageView
AlwaysOriginal
AlwaysTemplate
UIBarButtonItem
Rendering Mode
UIImageRenderingMode
Automatic UIImageView
AlwaysOriginal
AlwaysTemplate
UIBarButtonItem
Rendering Mode
UIImageRenderingModeAutomatic
image = [UIImage imageNamed:@favorite];
Rendering Mode
UIImageRenderingModeAutomatic
image = [UIImage imageNamed:@favorite];
item = [[UIBarButtonItem alloc] initWithImage:image ...];
Rendering Mode
UIImageRenderingModeAlwaysOriginal
image = [UIImage imageNamed:@favorite]; image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; item = [[UIBarButtonItem alloc] initWithImage:image ...];
Rendering Mode
Rendering Mode
- (void)setFinishedSelectedImage:(UIImage *)selectedImage withFinishedUnselectedImage:(UIImage *)unselectedImage;
Rendering Mode
- (void)setFinishedSelectedImage:(UIImage *)selectedImage withFinishedUnselectedImage:(UIImage *)unselectedImage;
Rendering Mode
- (void)setFinishedSelectedImage:(UIImage *)selectedImage withFinishedUnselectedImage:(UIImage *)unselectedImage;
UIImageRenderingModeAlwaysOriginal
Rendering Mode
- (void)setFinishedSelectedImage:(UIImage *)selectedImage withFinishedUnselectedImage:(UIImage *)unselectedImage;
UIImageRenderingModeAlwaysOriginal @property(nonatomic,retain) UIImage *image; @property(nonatomic,retain) UIImage *selectedImage;
Rendering Mode
image = [UIImage imageNamed:@x];
Rendering Mode
backgroundImage = [UIImage imageNamed:@segmentedBackground]; image = [UIImage imageNamed:@x];
Rendering Mode
backgroundImage = [UIImage imageNamed:@segmentedBackground]; image = [UIImage imageNamed:@x]; image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
Rendering Mode
Rendering Mode
image = [UIImage imageNamed:@victory];
cell.imageView.image = image;
Rendering Mode
image = [UIImage imageNamed:@victory]; image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
cell.imageView.image = image;
View Controller Based Status Bar
View Controller Based Status Bar
- (UIStatusBarStyle)preferredStatusBarStyle; - (BOOL)prefersStatusBarHidden;
View Controller Based Status Bar
- (UIStatusBarStyle)preferredStatusBarStyle; - (BOOL)prefersStatusBarHidden; [self setNeedsStatusBarAppearanceUpdate];
View Controller Based Status Bar
View Controller Based Status Bar
- (UIViewController *)childViewControllerForStatusBarStyle; - (UIViewController *)childViewControllerForStatusBarHidden;
View Controller Based Status Bar
- (UIViewController *)childViewControllerForStatusBarStyle; - (UIViewController *)childViewControllerForStatusBarHidden; [self setNeedsStatusBarAppearanceUpdate];
View Controller Based Status Bar
- (UIViewController *)childViewControllerForStatusBarStyle; - (UIViewController *)childViewControllerForStatusBarHidden; [self setNeedsStatusBarAppearanceUpdate];
View Controller Based Status Bar
View Controller Based Status Bar
View Controller Based Status Bar
View Controller Based Status Bar
- (UIStatusBarStyle)preferredStatusBarStyle { return ([self isOver] ? UIStatusBarStyleLightContent : UIStatusBarStyleDefault); }
View Controller Based Status Bar
- (UIStatusBarStyle)preferredStatusBarStyle { return ([self isOver] ? UIStatusBarStyleLightContent : UIStatusBarStyleDefault); }
[self setNeedsStatusBarAppearanceUpdate];
View Controller Based Status Bar
- (UIStatusBarStyle)preferredStatusBarStyle { return ([self isOver] ? UIStatusBarStyleLightContent : UIStatusBarStyleDefault); }
[UIView animateWithDuration:0.5 animations:^{ // Update necessary state [self updateBackgroundColor]; [self setNeedsStatusBarAppearanceUpdate]; }];
View Controller Based Status Bar
Making Custom Controls
Rating Control
Rating Control
UIImageView
UILabel
keypad
UIImageView
UILabel
keypad
UIButton UIButton
UIButton
UIImageView
UIButton
UIImageView
UIImageView
UIButton
UIImageView
UIButton
button.selected = YES;
Customizing UIButton
UIButtonTypeCustom
Customizing UIButton
- (CGRect)backgroundRectForBounds:(CGRect)bounds; - (CGRect)titleRectForContentRect:(CGRect)contentRect; - (CGRect)imageRectForContentRect:(CGRect)contentRect;
UIButtonTypeCustom
Dynamic Images
Dynamic Images
UIGraphicsBeginImageContextWithOptions(size, NO, 0.0); // Drawing UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext();
Dynamic Images
UIGraphicsBeginImageContextWithOptions(size, NO, 0.0); // Drawing UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); imageView.image = image;
Dynamic Images
image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
imageView.image = image;
Dynamic Images
image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
imageView.image = image;
Dynamic Images
image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
imageView.image = image;
Dynamic Images
image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]; image = [image resizableImageWithCapInsets:UIEdgeInsetsMake(...)];
imageView.image = image;
Sending Actions
@interface TTTRatingControl : UIControl
Sending Actions
@interface TTTRatingControl : UIControl
- (void)touchButton:(UIButton *)button { self.rating = button.tag; [self sendActionsForControlEvents:UIControlEventValueChanged]; }
Sending Actions
@interface TTTRatingControl : UIControl
- (void)touchButton:(UIButton *)button { self.rating = button.tag; [self sendActionsForControlEvents:UIControlEventValueChanged]; }
[ratingControl addTarget:self action:@selector(changeRating:) forControlEvents:UIControlEventValueChanged];
Count View
Count View
- (void)drawRect:(CGRect)rect { [[self tintColor] set]; // Drawing }
Tint Color
Tint Color
- (void)tintColorDidChange;
Tint Color
- (void)tintColorDidChange;
Tint Color
Auto
Normal
- (void)tintColorDidChange;
Auto
Normal
Auto
Normal
Normal Auto
Normal
Auto
Normal
Auto
Normal
Tint Color
Dimmed Auto
Dimmed Normal
- (void)tintColorDidChange;
Auto
Dimmed Normal
Auto
Dimmed Normal
Normal Auto
Dimmed Normal
Auto
Dimmed Normal
Auto
Dimmed Normal
- (void)tintColorDidChange { [super tintColorDidChange]; [self setNeedsDisplayInRect:[self rectForCount:self.count]]; }
- (void)tintColorDidChange { [super tintColorDidChange]; self.detailTextLabel.textColor = self.tintColor; }
Accessibility
Accessibility
- (BOOL)isAccessibilityElement { return NO; }
Accessibility
- (BOOL)isAccessibilityElement { return NO; }
[button setAccessibilityLabel:[NSString stringWithFormat: NSLocalizedString(@"%d stars", @"%d stars"), rating + 1]];
Accessibility
- (BOOL)isAccessibilityElement { return YES; }
Accessibility
- (BOOL)isAccessibilityElement { return YES; } - (UIAccessibilityTraits)accessibilityTraits { return UIAccessibilityTraitImage; }
Accessibility
- (BOOL)isAccessibilityElement { return YES; } - (UIAccessibilityTraits)accessibilityTraits { return UIAccessibilityTraitImage; } - (NSString *)accessibilityLabel { return [NSString stringWithFormat:@"%d", self.count]; }
Demo
Summary
Whats changed Advanced customization Making custom controls
