Advance UIKit controls customization

The slides of the presentation I made for the first iOS meetup in Chile (http://www.meetup.com/ILove-iOS/).
It's all about design. Think about it

Transcript

1. Ignacio Romero Zurbuchen UX Designer & iOS Developer Twitter: _dzen Mail: iromero@hop.in Advanced Graphic Customization of UIKit controls Friday, July 27, 12
2. What will we talk about • Why should I customize my apps • General Tips • Controls Customization • Appearance API • New tool for usability testing Friday, July 27, 12
3. Why should I customize my apps Some facts • There is more than 650,000 apps on the AppStore. • 225,000 apps designed specially for iPad. • 30 billon apps downloaded so far. • 400 million AppStore accounts. • Developers have earn 5 billion USD. Friday, July 27, 12
4. Why should I customize my apps Design really matters • Creates an unique experience. • Far more attractive and engaging. • Looks professional and worth the price. • Stands out from the competition. Higher standard. • Makes people talk about it. • Apps are now collected gems on user’s srpingboard. Friday, July 27, 12
5. Why should I customize my apps Typical app development process... Design Testing Debug Coding orgasm Friday, July 27, 12
6. Why should I customize my apps But it’s all about design Design Testing Debug Coding Friday, July 27, 12
7. Why should I customize my apps Really, design Design Testing Debug Coding Friday, July 27, 12
8. General Tips Icons • Icons are the gateway to success. • Easier recognition on the AppStore and SpringBoard. • App icons: collectable items. • From iOS6, AppStore icons should now be 1024x1024. • You should optimize the design for each scale format. Friday, July 27, 12
9. General Tips Icons 512x512 29x29 58x58 (retina) 72x72 114x114 (retina) Friday, July 27, 12
10. General Tips Artwork for density clock.png clock@2x.png 64 x 64 px 128 x 128 px Friday, July 27, 12
11. General Tips Artwork for density [UIImage imageNamed:@”clock”]; clock.png clock@2x.png 64 x 64 px 128 x 128 px Friday, July 27, 12
12. General Tips Artwork for device types fader~iphone.png fader@2x~iphone.png fader~ipad.png fader@2x~ipad.png Friday, July 27, 12
13. General Tips Artwork for device types [UIImage imageNamed:@”clock”]; fader~iphone.png fader@2x~iphone.png fader~ipad.png fader@2x~ipad.png Friday, July 27, 12
14. General Tips Separating foreground from background Friday, July 27, 12
15. General Tips Separating foreground from background Friday, July 27, 12
16. General Tips Separating foreground from background Friday, July 27, 12
17. General Tips Resizable images Friday, July 27, 12
18. General Tips Resizable images - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capinsets; Friday, July 27, 12
19. General Tips Resizable images - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capinsets; UIEdgeInsetsMake(top,left,bottom,right) Friday, July 27, 12
20. General Tips Resizable images - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets; UIEdgeInsetsMake(top,left,bottom,right) Friday, July 27, 12
21. General Tips Streching vs. Tiling Friday, July 27, 12
22. General Tips Streching vs. Tiling - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets Friday, July 27, 12
23. General Tips Streching vs. Tiling - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode; * New on iOS6 Friday, July 27, 12
24. General Tips Don’t reinvent the wheel : Use standard controls. • Inherits standard behaviors • Now, more customizable • Faster to implement than making your own controls. • Think of subclassing or extending the class with category files to improve controls behaviors and graphic customizations. Friday, July 27, 12
25. General Tips Tint & Background Color • Almost all objects that inherits from UIView have this properties. • Plane color or image pattern color. Friday, July 27, 12
26. Controls customization UINavigationBar This is how an old school implementation looked like for a simple UINavigationBar graphic customization: Friday, July 27, 12
27. Controls customization UINavigationBar This is how an old school implementation looked like for a simple UINavigationBar graphic customization: for (UIView *subview in self.navigationController.navigationBar.subviews){ if ([subview isKindOfClass:[UIImageView class]]){ UIImageView *subImgview = (UIImageView *)subview; [subImgview setImage:[UIImage imageNamed:@"navBar_bkgd"]]; } } Friday, July 27, 12
28. Controls customization UINavigationBar - (void)setBackgroundImage:(UIImage *)backgroundImage forBarMetrics:(UIBarMetrics)barMetrics iOS5 introduced an easier and less hacky way: Friday, July 27, 12
29. Controls customization UINavigationBar - (void)setBackgroundImage:(UIImage *)backgroundImage forBarMetrics:(UIBarMetrics)barMetrics iOS5 introduced an easier and less hacky way: UIImage *image = [UIImage imageNamed:@"NavBar_bkgd"]; [self.navigationController.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault]; Friday, July 27, 12
30. Controls customization UINavigationBar - (void)setBackgroundImage:(UIImage *)backgroundImage forBarMetrics:(UIBarMetrics)barMetrics iOS5 introduced an easier and less hacky way: UIImage *image = [UIImage imageNamed:@"NavBar_bkgd"]; [self.navigationController.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault]; Friday, July 27, 12
31. Controls customization UINavigationBar Old technique of customizing the UINavigationBar text appearance. Friday, July 27, 12
32. Controls customization UINavigationBar Old technique of customizing the UINavigationBar text appearance. UILabel *title = [[UILabel alloc] initWithFrame:CGRectZero]; title.backgroundColor = [UIColor clearColor]; title.textColor = [UIColor whiteColor]; title.font = [UIFont boldSystemFontOfSize:24]; title.textAlignment = UITextAlignmentCenter; title.text = self.title; self.navigationItem.titleView = title; [title sizeToFit]; Friday, July 27, 12
33. Controls customization UINavigationBar Since iOS5, you can set the customization with attributes like so: Friday, July 27, 12
34. Controls customization UINavigationBar Since iOS5, you can set the customization with attributes like so: NSDictionary *titleAttributes = [NSDictionary dictionaryWithObjectsAndKeys: [UIColor whiteColor], UITextAttributeTextColor, [UIColor colorWithWhite:0.2 alpha:0.5], UITextAttributeTextShadowColor, [UIFont boldSystemFontOfSize:20.f], UITextAttributeFont, [NSValue valueWithUIOffset:UIOffsetMake(0, 1)], UITextAttributeTextShadowOffset, nil]; self.navigationController.navigationBar.titleTextAttributes = titleAttributes; Friday, July 27, 12
35. Controls customization UINavigationBar Customizing the right button with an UIButton: Friday, July 27, 12
36. Controls customization UINavigationBar Customizing the right button with an UIButton: UIImage *foregroundImg = [UIImage imageNamed:@"NavBtn_Post_Normal"]; UIImage *backgroundImg = [[UIImage imageNamed:@"NavBtn_Bordered_Normal"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 6, 0, 6)]; UIButton *postBtn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 32, 30)]; [postBtn setImage:foregroundImg forState:UIControlStateNormal]; [postBtn setBackgroundImage:backgroundImg forState:UIControlStateNormal]; [postBtn addTarget:self action:@selector(newMessage:) forControlEvents:UIControlEventTouchUpInside]; UIBarButtonItem *postButton = [[UIBarButtonItem alloc] initWithCustomView:postBtn]; [self.navigationItem setRightBarButtonItem:postButton animated:NO]; Friday, July 27, 12
37. Controls customization UINavigationBar Customizing the left button image background: Friday, July 27, 12
38. Controls customization UINavigationBar UIImage *image = [[UIImage imageNamed:@"NavBtn_Normal.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 6, 0, 6)]; UIBarButtonItem *cancelButton = [[UIBarButtonItem alloc] initWithTitle:@"Cancelar" style:UIBarButtonItemStyleDone target:self action:@selector(cancelWriter:)]; [cancelButton setBackgroundImage:image forState:UIControlStateNormal barMetrics:UIBarMetricsDefault]; [self.navigationItem setLeftBarButtonItem:cancelButton animated:NO]; Customizing the left button image background: Friday, July 27, 12
39. Controls customization UINavigationBar Customizing the left button title appearance: Friday, July 27, 12
40. Controls customization UINavigationBar NSDictionary *attributes = [NSDictionary dictionaryWithObjectsAndKeys: [UIColor whiteColor], UITextAttributeTextColor, [UIFont fontWithName:@"HelveticaNeue-Bold" size:13.0], UITextAttributeFont, nil]; UIBarButtonItem *cancelButton = [[UIBarButtonItem alloc] initWithTitle:@"Cancelar" style:UIBarButtonItemStyleDone target:self action:@selector(cancelWriter:)]; [cancelButton setTitleTextAttributes:attributes forState:UIControlStateNormal]; [self.navigationItem setLeftBarButtonItem:cancelButton animated:NO]; Customizing the left button title appearance: Friday, July 27, 12
41. Controls customization UIToolBar - (void)setBackgroundImage:(UIImage *)backgroundImage forToolbarPosition:(UIToolbarPosition)topOrBottom barMetrics:(UIBarMetrics)barMetrics iOS5 also introduced an easier way to customize ToolBars background: Friday, July 27, 12
42. Controls customization UIToolBar - (void)setBackgroundImage:(UIImage *)backgroundImage forToolbarPosition:(UIToolbarPosition)topOrBottom barMetrics:(UIBarMetrics)barMetrics iOS5 also introduced an easier way to customize ToolBars background: UIImage *image = [UIImage imageNamed:@"ToolBar_bkgd"]; [self.navigationController.toolbar setBackgroundImage:image forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault]; Friday, July 27, 12
43. Controls customization UITabBar And finally, you can customize TabBars too: - (void)setBackgroundImage:(UIImage *)backgroundImage; - (void)setSelectionIndicatorImage:(UIImage *)backgroundImage; - (void)setFinishedSelectedImage:(UIImage *)selectedImage withFinishedUnselectedImage:(UIImage *)unselectedImage Friday, July 27, 12
44. Controls customization UITabBar And finally, you can customize TabBars too: Friday, July 27, 12
45. Controls customization UITabBar And finally, you can customize TabBars too: UIImage *backgroundImg = [UIImage imageNamed:@"TabBar_bkgd"]; UIImage *IndicatorImg = [UIImage imageNamed:@"TabBar_indicator"]; [[UITabBar appearance] setBackgroundImage:backgroundImg]; [[UITabBar appearance] setSelectionIndicatorImage: IndicatorImg]; Friday, July 27, 12
46. Controls customization UITabBar And finally, you can customize TabBars too: UIImage *backgroundImg = [UIImage imageNamed:@"TabBar_bkgd"]; UIImage *IndicatorImg = [UIImage imageNamed:@"TabBar_indicator"]; [[UITabBar appearance] setBackgroundImage:backgroundImg]; [[UITabBar appearance] setSelectionIndicatorImage: IndicatorImg]; UIImage *selImg = [UIImage imageNamed:@"TabBarBtn_Sel"]; UIImage *unselImg = [UIImage imageNamed:@"TabBarBtn_Unsel"]; [viewController.tabBarItem setFinishedSelectedImage: selImg withFinishedUnselectedImage: unselImg]; Friday, July 27, 12
47. Controls customization UIAppearance Proxy You can set the appearance of a class across all your application, for a specific class or even overwrite it for a special occasion. + (id)appearance; + (id)appearanceWhenContainedIn:(Class <UIAppearanceContainer>)ContainerClass,... Friday, July 27, 12
48. Controls customization UIAppearance Proxy You can set the appearance of a class across all your application, for a specific class or even overwrite it for a special occasion. + (id)appearance; + (id)appearanceWhenContainedIn:(Class <UIAppearanceContainer>)ContainerClass,... [[UITabBar appearance] setBackgroundImage:bkgdImg]; [[UITabBar appearance] setSelectionIndicatorImage:indicatorImg]; Friday, July 27, 12
49. Controls customization UIAppearance Proxy You can set the appearance of a class across all your application, for a specific class or even overwrite it for a special occasion. + (id)appearance; + (id)appearanceWhenContainedIn:(Class <UIAppearanceContainer>)ContainerClass,... [[UITabBar appearance] setBackgroundImage:bkgdImg]; [[UITabBar appearance] setSelectionIndicatorImage:indicatorImg]; [UITabBarItem appearanceWhenContainedIn: [MyCustomTabBarItem class], nil]; [anotherCustomTabBarItem class], nil]; Friday, July 27, 12
50. Controls customization A lot of controls at your disposal to be customized • UIButton • UIBarButton • UISwitch • UISegmentedControl • UISlider • UIProgressView • UISearchBar • UIScopeBar • UITextField • UINavigationBar • UIStepper • And more... Friday, July 27, 12
51. Summary • You should customize your apps • General Tips • Separate foreground from background • Resizable & Strechable/Tiled images • Tint & Background Color • Controls Customization • Straight forward implementation • Fully customizable bars & controls • Global Appearance Proxy Friday, July 27, 12
52. Last Tips • Read carefully the iPhone & iPad HIG (Human Interface Guidelines) • Watch some sessions from WWDC • Pay attention to the xCode library documentation • Download Apple’s sample code • StackOverflow.com is the sh*t! • TestFlightapp.com & Crashlytics.com are very useful for testing and debugging remote tools. Friday, July 27, 12