Implementing UI Designs in Interface Builder

Transcription

1 Developer Tools #WWDC15 Implementing UI Designs in Interface Builder Session 407 Kevin Cathey Interface Builder Engineer Tony Ricciardi Interface Builder Engineer 2015 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

2

3

4

5

6

7

8

9

10

11

12

13

14 Design Time

15 Design Time Build Time

16 Design Time Build Time Run Time

17 Design Time Build Time Run Time

18 Demo Design Time Best Practices, Tips and Tricks

19 Takeaways Best practices

20 Takeaways Best practices Stack Views

21 Takeaways Best practices Stack Views Dynamic Type

22 Takeaways Best practices Stack Views Dynamic Type Designables

23 Takeaways Best practices Stack Views Dynamic Type Designables Inspectables

24 Takeaways Best practices Stack Views Dynamic Type Designables Inspectables Storyboard References

25 Takeaways Tips and tricks

26 Takeaways Tips and tricks Fast Selection

27 Takeaways Tips and tricks Fast Selection Canvas Customizations

28 Takeaways Tips and tricks Fast Selection Canvas Customizations Advanced Navigation

29 Takeaways Tips and tricks Fast Selection Canvas Customizations Advanced Navigation Multiple Bar Items

30 Takeaways Tips and tricks Fast Selection Canvas Customizations Advanced Navigation Multiple Bar Items Simulated Metrics

31 Design Time Build Time Run Time

32 Design Time Build Time Run Time

33 Design Time Build Time Run Time

34 Design Time XML Documents Build Time Run Time

35 Design Time XML Documents Build Time ibtool Run Time

36 Design Time Build Time Run Time XML Documents ibtool Nib Files

37 Compiling Storyboards

38 Compiling Storyboards

39 Compiling Storyboards

40 Compiling Storyboards

41 Compiling Storyboards

42 Compiling Storyboards

43 Compiling Storyboards

44 Compiling Storyboards

45 Loading Storyboards At Run Time

46 Loading Storyboards At Run Time UIStoryboard init(name:bundle:)

47 Loading Storyboards At Run Time UIStoryboard instantiateinitialviewcontroller() UIStoryboard init(name:bundle:)

48 Loading Storyboards At Run Time UIStoryboard instantiateinitialviewcontroller() UIViewController view UIStoryboard init(name:bundle:)

49 Loading Storyboards At Run Time UIStoryboard instantiateinitialviewcontroller() UIViewController view UIStoryboard instantiateviewcontrollerwithidentifier(_:) UIStoryboard init(name:bundle:)

50 Loading Storyboards At Run Time UIStoryboard instantiateinitialviewcontroller() UIViewController view UIStoryboard instantiateviewcontrollerwithidentifier(_:) UIStoryboard init(name:bundle:)

51 Loading Storyboards At Run Time UIStoryboard instantiateinitialviewcontroller() UIViewController view UIStoryboard instantiateviewcontrollerwithidentifier(_:) UIStoryboard init(name:bundle:) UITableView dequeuereusablecellwithidentifier(_:)

52 Takeaways

53 Takeaways Performance. Nib files loaded on demand.

54 Takeaways Performance. Nib files loaded on demand. Reuse. Nib files enable reuse.

55 Takeaways Performance. Nib files loaded on demand. Reuse. Nib files enable reuse. Life cycle. Know when objects are created.

56 Design Time Build Time Run Time

57 Design Time Build Time Run Time

58 Design Time Build Time Run Time

59 Design Time Build Time Run Time

60 Interface Builder at Run Time Tony Ricciardi

61 { } Design Time Build Time Connections Adaptability Run API Time

62 { } Design Time Build Time Connections Adaptability Run API Time

63 { } Run Time Connections API Adaptability

64 { } Run Time Connections API Adaptability

65 { } Run Time Connections API Adaptability

66 { } Run Time Connections API Adaptability

67 Connections class AccountViewController : UIViewController var usernamelabel: UILabel! override func viewdidload() { } usernamelabel.text = username var username: String? { didset { usernamelabel?.text = username } } } }

68 Connections class AccountViewController : UIViewController var usernamelabel: UILabel! override func viewdidload() { } usernamelabel.text = username var username: String? { didset { usernamelabel?.text = username } } }

69 Connections class AccountViewController : UIViewController var usernamelabel: UILabel! override func viewdidload() { } usernamelabel.text = username var username: String? { didset { usernamelabel?.text = username } } }

70 Connections class AccountViewController : UIViewController var usernamelabel: UILabel! override func viewdidload() { } usernamelabel.text = username var username: String? { didset { usernamelabel?.text = username } } }

71 Connections class LoginViewController : UIViewController func toggledautologinswitch(sender: UISwitch) { } UserSettings.autoLogin = func tappedloginbutton() { if attemptlogin() { performseguewithidentifier("unwindafterlogin", sender: nil) } else { performseguewithidentifier("presentloginerror", sender: nil) } } }

72 Connections class LoginViewController : UIViewController func toggledautologinswitch(sender: UISwitch) { } UserSettings.autoLogin = func tappedloginbutton() { if attemptlogin() { performseguewithidentifier("unwindafterlogin", sender: nil) } else { performseguewithidentifier("presentloginerror", sender: nil) } } }

73 Connections class LoginViewController : UIViewController func toggledautologinswitch(sender: UISwitch) { } UserSettings.autoLogin = func tappedloginbutton() { if attemptlogin() { performseguewithidentifier("unwindafterlogin", sender: nil) } else { performseguewithidentifier("presentloginerror", sender: nil) } } }

74 API UIStoryboard: init(name:bundle:) func instantiateinitialviewcontroller() func instantiateviewcontrollerwithidentifier(_:) UIViewController: var storyboard: UIStoryboard? { get }

75 API UIViewController: func prepareforsegue(_:sender:) func performseguewithidentifier(_:sender:) func shouldperformseguewithidentifier(_:sender:) -> Bool func unwindforsegue(_:towardsviewcontroller:) UIStoryboardSegue: func perform() What s New in Storyboards Nob Hill Thursday 9:00AM

76 Adaptability

77 Adaptability Button

78 Adaptability Button

79 Adaptability Button

80 Adaptability Button1 Button2 Button3 Button4

81 Adaptability Button1 Button2 Button3 Button4

82 Adaptability Button1 Button2 Button3 Button4

83 Adaptability Button1 Button2 Button3 Button4

84 { } Connections API Adaptability

85 Demo Interface Builder at Run Time

86 Summary

87 Summary Design a flexible UI with constraints and stack views

88 Summary Design a flexible UI with constraints and stack views Rapidly iterate with designable views

89 Summary Design a flexible UI with constraints and stack views Rapidly iterate with designable views Modularize your UI with Storyboard References

90 Summary Design a flexible UI with constraints and stack views Rapidly iterate with designable views Modularize your UI with Storyboard References Reuse content with the storyboard API instantiateviewcontrollerwithidentifier(_:)

91 Summary Design a flexible UI with constraints and stack views Rapidly iterate with designable views Modularize your UI with Storyboard References Reuse content with the storyboard API Make your UI adaptive with Size Classes

92 More Information Apple Developer Forums Stefan Lesser Developer Tools Evangelist

93 Related Sessions What s New in Storyboards Mission Thursday 9:00AM Mysteries of Auto Layout, Part 1 Presidio Thursday 11:00AM Mysteries of Auto Layout, Part 2 Presidio Thursday 1:30PM Building Adaptive Apps with UIKit Taking Control of Auto Layout in Xcode WWDC14 WWDC13

94 Related Labs Interface Builder and Auto Layout Developer Tools Lab C Thursday 2:30PM

95