114 Customizing the Appearance of Uikit Controls

51
These are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 114 Customizing the Appearance of UIKit Controls Chris Parker iOS Frameworks Engineer 1

Transcript of 114 Customizing the Appearance of Uikit Controls

Page 1: 114 Customizing the Appearance of Uikit Controls

These are confidential sessions—please refrain from streaming, blogging, or taking pictures

Session 114

Customizing the Appearanceof UIKit Controls

Chris ParkeriOS Frameworks Engineer

1

Page 2: 114 Customizing the Appearance of Uikit Controls

2

Page 3: 114 Customizing the Appearance of Uikit Controls

3

Page 4: 114 Customizing the Appearance of Uikit Controls

4

Page 5: 114 Customizing the Appearance of Uikit Controls

Tint color

5

Page 6: 114 Customizing the Appearance of Uikit Controls

Tint color

6

Page 7: 114 Customizing the Appearance of Uikit Controls

Tint color

7

Page 8: 114 Customizing the Appearance of Uikit Controls

8

Page 9: 114 Customizing the Appearance of Uikit Controls

Images

9

Page 10: 114 Customizing the Appearance of Uikit Controls

setBackgroundImage:forBarMetrics:

typedef enum { UIBarMetricsDefault, UIBarMetricsLandscapePhone,} UIBarMetrics;

10

Page 11: 114 Customizing the Appearance of Uikit Controls

titleTextAttributes:

leftBarButtonItems:rightBarButtonItems:

leftItemsSupplementBackButton

11

Page 12: 114 Customizing the Appearance of Uikit Controls

titleTextAttributes:

leftBarButtonItems:rightBarButtonItems:

leftItemsSupplementBackButton

12

Page 13: 114 Customizing the Appearance of Uikit Controls

titleTextAttributes:

leftBarButtonItems:rightBarButtonItems:

leftItemsSupplementBackButton

13

Page 14: 114 Customizing the Appearance of Uikit Controls

setBackgroundImage:forState:barMetrics:

setBackButtonBackgroundImage:forState:barMetrics:

14

Page 15: 114 Customizing the Appearance of Uikit Controls

setBackgroundImage:forState:barMetrics:

setBackButtonBackgroundImage:forState:barMetrics:

15

Page 16: 114 Customizing the Appearance of Uikit Controls

Customizing instancesDemo

Marian GoldeeniOS Frameworks Mountain Biker

16

Page 17: 114 Customizing the Appearance of Uikit Controls

Writing customization API is difficult

17

Page 18: 114 Customizing the Appearance of Uikit Controls

Using customization API is difficult

18

Page 19: 114 Customizing the Appearance of Uikit Controls

Consistent look

Easy

Support application features

19

Page 20: 114 Customizing the Appearance of Uikit Controls

20

Page 21: 114 Customizing the Appearance of Uikit Controls

[aSlider setMinimumTrackTintColor:[UIColor redColor]];

21

Page 22: 114 Customizing the Appearance of Uikit Controls

[[UISlider appearance] setMinimumTrackTintColor:[UIColor redColor]];

22

Page 23: 114 Customizing the Appearance of Uikit Controls

[[UISlider appearance] setMinimumTrackTintColor:[UIColor redColor]];

23

Page 24: 114 Customizing the Appearance of Uikit Controls

[[UISlider appearance] setMinimumTrackTintColor:[UIColor redColor]];

24

Page 25: 114 Customizing the Appearance of Uikit Controls

Appearance ProxyUIAppearance.h

@protocol UIAppearance <NSObject>

+ (id)appearance;...

@end

25

Page 26: 114 Customizing the Appearance of Uikit Controls

Appearance ProxyUIAppearance.h

@protocol UIAppearance <NSObject>

+ (id)appearance;...

@end

#define UI_APPEARANCE_SELECTOR

26

Page 27: 114 Customizing the Appearance of Uikit Controls

Appearance proxy basicsDemo

27

Page 28: 114 Customizing the Appearance of Uikit Controls

Zap

28

Page 29: 114 Customizing the Appearance of Uikit Controls

Zap

29

Page 30: 114 Customizing the Appearance of Uikit Controls

Appearance ProxyUIAppearance.h

@protocol UIAppearance <NSObject>

+ (id)appearance;+ (id)appearanceWhenContainedIn:(Class<UIAppearanceContainer>)containerClass, ...;

@end

30

Page 31: 114 Customizing the Appearance of Uikit Controls

Appearance ProxyUIAppearance.h

@protocol UIAppearance <NSObject>

+ (id)appearance;+ (id)appearanceWhenContainedIn:(Class<UIAppearanceContainer>)containerClass, ...;

@end

31

Page 32: 114 Customizing the Appearance of Uikit Controls

Containment

[[UIButton appearanceWhenContainedIn: [UINavigationController class], nil] setTitleColor:[UIColor redColor] forControlState:UIControlStateNormal];

32

Page 33: 114 Customizing the Appearance of Uikit Controls

Containment

[[UIButton appearanceWhenContainedIn: [UINavigationController class], nil] setTitleColor:[UIColor redColor] forControlState:UIControlStateNormal];

33

Page 34: 114 Customizing the Appearance of Uikit Controls

Zap

34

Page 35: 114 Customizing the Appearance of Uikit Controls

Zap

35

Page 36: 114 Customizing the Appearance of Uikit Controls

Containment

[[UIButton appearanceWhenContainedIn: [CustomViewController class], [UINavigationController class], nil] setTitleColor:[UIColor redColor] forControlState:UIControlStateNormal];

36

Page 37: 114 Customizing the Appearance of Uikit Controls

Zap

37

Page 38: 114 Customizing the Appearance of Uikit Controls

Zap

38

Page 39: 114 Customizing the Appearance of Uikit Controls

ContainmentComposition rules

The button’s appearance……when contained in a CustomViewController…when contained in a UINavigationController

[[UIButton appearanceWhenContainedIn: [CustomViewController class], [UINavigationController class], nil] setTitleColor:[UIColor redColor] forControlState:UIControlStateNormal];

39

Page 40: 114 Customizing the Appearance of Uikit Controls

ContainmentDemo

40

Page 41: 114 Customizing the Appearance of Uikit Controls

What is Happening?Rule application

• Just before -[UIView layoutSubviews] is called…■ Rules are evaluated■ Customizations are applied

•Updates are applied at the time the hierarchy is changed■ At the hierarchy change point■ Does not update in real time

41

Page 42: 114 Customizing the Appearance of Uikit Controls

Zap

42

Page 43: 114 Customizing the Appearance of Uikit Controls

Zap[ setTitleColor: [UIColor greenColor] forControlState: UIControlStateNormal];

43

Page 44: 114 Customizing the Appearance of Uikit Controls

Zap

44

Page 45: 114 Customizing the Appearance of Uikit Controls

Zap

45

Page 46: 114 Customizing the Appearance of Uikit Controls

[[UISlider appearance] setMinimumTrackTintColor:[UIColor redColor]];

46

Page 47: 114 Customizing the Appearance of Uikit Controls

Zap

47

Page 48: 114 Customizing the Appearance of Uikit Controls

Zap

48

Page 49: 114 Customizing the Appearance of Uikit Controls

49

Page 50: 114 Customizing the Appearance of Uikit Controls

Bill DudneyApplication Frameworks [email protected]

DocumentationiOS Dev Centerhttp://developer.apple.com/devcenter/ios/

Apple Developer Forumshttp://devforums.apple.com

More Information

50

Page 51: 114 Customizing the Appearance of Uikit Controls

51