SlideShare ist ein Scribd-Unternehmen logo
1 von 20
Downloaden Sie, um offline zu lesen
iOS Storyboard
NHN NEXT
Min Hyeok Kim
What’s the best way to develop an iOS UI?
• iOS Storyboards
• NiBs (or XiBs)
• Custom code
Storyboard?
A storyboard is a visual representation of the app’s user interface,
showing screens of content and the transitions between them.
iOS5+ SDK
Present the content in the detail or master area
depending on the content of the screen.
Present the content modally.
Present the content as a popover anchored to
an existing view.
A custom segue enabling you
to write your own behaviors.
show
modal
popover
custom
A Scene Corresponds to a Single View Controller and Its Views
• On iPhone, each scene corresponds to a full screen’s worth of content; on iPad, multiple scenes can
appear on screen at once—for example, using popover view controllers. Each scene has a dock, which
displays icons representing the top-level objects of the scene. The dock is used primarily to make
action and outlet connections between the view controller and its views.
• As with all objects loaded from a story board, to finish initializing a view controller loaded from a
storyboard you override awakeFromNib.
A Segue Manages the Transition Between Two Scenes
• You can set the type of transition (for example, modal or push) on a segue. Additionally, you can
subclass a segue object to implement a custom transition.
• You can pass data between scenes with the method prepareForSegue:sender:, which is invoked
on the view controller when a segue is triggered. This method allows you to customize the setup of the
next view controller before it appears on the screen. Transitions usually occur as the result of some
event, such as a button being tapped, but you can programmatically force a transition by calling
performSegueWithIdentifier:sender: on the view controller.
Storyboards have a number of advantages:
• With a storyboard you have a better conceptual overview of all the
screens in your app and the connections between them.
• Storyboards can describe the transitions between the various
views. These transitions are called “segues” and you create them by
connecting your view controllers right in the storyboard.
• Storyboards make working with table views a lot easier with
prototype cells and static cells features.
• Storyboards make it easier to use Auto Layout, a feature that
allows you to define mathematical relationships between elements
that defined their position and sizing.
Storyboards as a useful tool, but not so much a replacement as a
complement for NIBs and custom code.
Storyboards are the right choice in some, but not all situations.
Large Storyboard
A classic beginner’s mistake is to create one massive project-wide
Storyboard.
A Storyboard is a board with a story to tell. It shouldn't be used to
mix unrelated stories into one big volume.
A storyboard should contain view controllers that are logically
related to each other—which doesn’t mean every view controller.
Large Storyboards, other than being difficult to browse and
maintain, add a layer of complexity to a team environment:
when multiple developers work on the same storyboard file at the
same time, source control conflicts are inevitable.
The id itself doesn’t provide any indication whatsoever as
to its true significance, so you have nothing to work with.
Performance
• when a Storyboard is loaded, all of its view controllers are instantiated immediately.
Fortunately, this is just an abstraction and not true of the actual implementation
Prototypes
• Storyboards simplify the prototyping and mocking up of user interfaces and flow.
Reusability
• a single view controller cannot be individually extracted and reused elsewhere as a
single independent entity; it’s dependent on the rest of the Storyboard to function.
Data flow
• Storyboards take care of handling the flow between view controllers, but not the flow
of data. So, the destination controller has to be configured with code, overriding the
visual experience.
References
• Storyboard - iOS Developer Library
• About Storyboards - iOS Developer Library
• iOS User Interfaces: Storyboards vs. NIBs vs. Custom Code -
toptal
• 10 practical tips for iOS developers using storyboards - xmcgraw
• Storyboard, Xibs & co… - polarios
• Storyboards Tutorial in Swift: Part1 - raywenderlich

Weitere ähnliche Inhalte

Ähnlich wie iOS storyboard

Session 8 - Xcode 5 and interface builder for iOS 7 application
Session 8 - Xcode 5 and interface builder for iOS 7 applicationSession 8 - Xcode 5 and interface builder for iOS 7 application
Session 8 - Xcode 5 and interface builder for iOS 7 application
Vu Tran Lam
 
Session 7 - Overview of the iOS7 app development architecture
Session 7 - Overview of the iOS7 app development architectureSession 7 - Overview of the iOS7 app development architecture
Session 7 - Overview of the iOS7 app development architecture
Vu Tran Lam
 
Android and IOS UI Development (Android 5.0 and iOS 9.0)
Android and IOS UI Development (Android 5.0 and iOS 9.0)Android and IOS UI Development (Android 5.0 and iOS 9.0)
Android and IOS UI Development (Android 5.0 and iOS 9.0)
Michael Shrove
 
Session 16 - Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhoneSession 16  -  Designing universal interface which used for iPad and iPhone
Session 16 - Designing universal interface which used for iPad and iPhone
Vu Tran Lam
 
Javascript spaghetti stirtrek_5_17
Javascript  spaghetti stirtrek_5_17Javascript  spaghetti stirtrek_5_17
Javascript spaghetti stirtrek_5_17
Jared Faris
 

Ähnlich wie iOS storyboard (20)

Session 8 - Xcode 5 and interface builder for iOS 7 application
Session 8 - Xcode 5 and interface builder for iOS 7 applicationSession 8 - Xcode 5 and interface builder for iOS 7 application
Session 8 - Xcode 5 and interface builder for iOS 7 application
 
Introduction of Xcode
Introduction of XcodeIntroduction of Xcode
Introduction of Xcode
 
Top 7 react developer tools to use in 2021
Top 7 react developer tools to use in 2021Top 7 react developer tools to use in 2021
Top 7 react developer tools to use in 2021
 
Session 7 - Overview of the iOS7 app development architecture
Session 7 - Overview of the iOS7 app development architectureSession 7 - Overview of the iOS7 app development architecture
Session 7 - Overview of the iOS7 app development architecture
 
From React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I startedFrom React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I started
 
Baparekraf Digital Talent Day: Monitoring dan Coaching Penerima Fasilitasi BD...
Baparekraf Digital Talent Day: Monitoring dan Coaching Penerima Fasilitasi BD...Baparekraf Digital Talent Day: Monitoring dan Coaching Penerima Fasilitasi BD...
Baparekraf Digital Talent Day: Monitoring dan Coaching Penerima Fasilitasi BD...
 
Building your first iOS app using Xamarin
Building your first iOS app using XamarinBuilding your first iOS app using Xamarin
Building your first iOS app using Xamarin
 
iOS Storyboards
iOS StoryboardsiOS Storyboards
iOS Storyboards
 
Android and IOS UI Development (Android 5.0 and iOS 9.0)
Android and IOS UI Development (Android 5.0 and iOS 9.0)Android and IOS UI Development (Android 5.0 and iOS 9.0)
Android and IOS UI Development (Android 5.0 and iOS 9.0)
 
Session 16 - Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhoneSession 16  -  Designing universal interface which used for iPad and iPhone
Session 16 - Designing universal interface which used for iPad and iPhone
 
MyAppconverter platform mappings
MyAppconverter platform mappings MyAppconverter platform mappings
MyAppconverter platform mappings
 
Service worker API
Service worker APIService worker API
Service worker API
 
Flutter workshop
Flutter workshopFlutter workshop
Flutter workshop
 
Android part1
Android part1Android part1
Android part1
 
Javascript spaghetti stirtrek_5_17
Javascript  spaghetti stirtrek_5_17Javascript  spaghetti stirtrek_5_17
Javascript spaghetti stirtrek_5_17
 
ios basics
ios basicsios basics
ios basics
 
Apple Watch and WatchKit - A Technical Overview
Apple Watch and WatchKit - A Technical OverviewApple Watch and WatchKit - A Technical Overview
Apple Watch and WatchKit - A Technical Overview
 
Swift
SwiftSwift
Swift
 
iOS (7) Workshop
iOS (7) WorkshopiOS (7) Workshop
iOS (7) Workshop
 
Ui 5
Ui   5Ui   5
Ui 5
 

Kürzlich hochgeladen

Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Dr.Costas Sachpazis
 
Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...
Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...
Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...
Christo Ananth
 
UNIT-V FMM.HYDRAULIC TURBINE - Construction and working
UNIT-V FMM.HYDRAULIC TURBINE - Construction and workingUNIT-V FMM.HYDRAULIC TURBINE - Construction and working
UNIT-V FMM.HYDRAULIC TURBINE - Construction and working
rknatarajan
 
AKTU Computer Networks notes --- Unit 3.pdf
AKTU Computer Networks notes ---  Unit 3.pdfAKTU Computer Networks notes ---  Unit 3.pdf
AKTU Computer Networks notes --- Unit 3.pdf
ankushspencer015
 

Kürzlich hochgeladen (20)

Java Programming :Event Handling(Types of Events)
Java Programming :Event Handling(Types of Events)Java Programming :Event Handling(Types of Events)
Java Programming :Event Handling(Types of Events)
 
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdfONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
 
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
 
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
 
(INDIRA) Call Girl Aurangabad Call Now 8617697112 Aurangabad Escorts 24x7
(INDIRA) Call Girl Aurangabad Call Now 8617697112 Aurangabad Escorts 24x7(INDIRA) Call Girl Aurangabad Call Now 8617697112 Aurangabad Escorts 24x7
(INDIRA) Call Girl Aurangabad Call Now 8617697112 Aurangabad Escorts 24x7
 
College Call Girls Nashik Nehal 7001305949 Independent Escort Service Nashik
College Call Girls Nashik Nehal 7001305949 Independent Escort Service NashikCollege Call Girls Nashik Nehal 7001305949 Independent Escort Service Nashik
College Call Girls Nashik Nehal 7001305949 Independent Escort Service Nashik
 
The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...
The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...
The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...
 
Call Girls Service Nagpur Tanvi Call 7001035870 Meet With Nagpur Escorts
Call Girls Service Nagpur Tanvi Call 7001035870 Meet With Nagpur EscortsCall Girls Service Nagpur Tanvi Call 7001035870 Meet With Nagpur Escorts
Call Girls Service Nagpur Tanvi Call 7001035870 Meet With Nagpur Escorts
 
The Most Attractive Pune Call Girls Manchar 8250192130 Will You Miss This Cha...
The Most Attractive Pune Call Girls Manchar 8250192130 Will You Miss This Cha...The Most Attractive Pune Call Girls Manchar 8250192130 Will You Miss This Cha...
The Most Attractive Pune Call Girls Manchar 8250192130 Will You Miss This Cha...
 
Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...
Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...
Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...
 
Introduction to IEEE STANDARDS and its different types.pptx
Introduction to IEEE STANDARDS and its different types.pptxIntroduction to IEEE STANDARDS and its different types.pptx
Introduction to IEEE STANDARDS and its different types.pptx
 
(PRIYA) Rajgurunagar Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(PRIYA) Rajgurunagar Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...(PRIYA) Rajgurunagar Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(PRIYA) Rajgurunagar Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
 
UNIT-III FMM. DIMENSIONAL ANALYSIS
UNIT-III FMM.        DIMENSIONAL ANALYSISUNIT-III FMM.        DIMENSIONAL ANALYSIS
UNIT-III FMM. DIMENSIONAL ANALYSIS
 
UNIT-V FMM.HYDRAULIC TURBINE - Construction and working
UNIT-V FMM.HYDRAULIC TURBINE - Construction and workingUNIT-V FMM.HYDRAULIC TURBINE - Construction and working
UNIT-V FMM.HYDRAULIC TURBINE - Construction and working
 
Online banking management system project.pdf
Online banking management system project.pdfOnline banking management system project.pdf
Online banking management system project.pdf
 
UNIT-II FMM-Flow Through Circular Conduits
UNIT-II FMM-Flow Through Circular ConduitsUNIT-II FMM-Flow Through Circular Conduits
UNIT-II FMM-Flow Through Circular Conduits
 
AKTU Computer Networks notes --- Unit 3.pdf
AKTU Computer Networks notes ---  Unit 3.pdfAKTU Computer Networks notes ---  Unit 3.pdf
AKTU Computer Networks notes --- Unit 3.pdf
 
Extrusion Processes and Their Limitations
Extrusion Processes and Their LimitationsExtrusion Processes and Their Limitations
Extrusion Processes and Their Limitations
 
Introduction to Multiple Access Protocol.pptx
Introduction to Multiple Access Protocol.pptxIntroduction to Multiple Access Protocol.pptx
Introduction to Multiple Access Protocol.pptx
 
Glass Ceramics: Processing and Properties
Glass Ceramics: Processing and PropertiesGlass Ceramics: Processing and Properties
Glass Ceramics: Processing and Properties
 

iOS storyboard

  • 2. What’s the best way to develop an iOS UI? • iOS Storyboards • NiBs (or XiBs) • Custom code
  • 4. A storyboard is a visual representation of the app’s user interface, showing screens of content and the transitions between them. iOS5+ SDK
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10. Present the content in the detail or master area depending on the content of the screen. Present the content modally. Present the content as a popover anchored to an existing view. A custom segue enabling you to write your own behaviors. show modal popover custom
  • 11. A Scene Corresponds to a Single View Controller and Its Views • On iPhone, each scene corresponds to a full screen’s worth of content; on iPad, multiple scenes can appear on screen at once—for example, using popover view controllers. Each scene has a dock, which displays icons representing the top-level objects of the scene. The dock is used primarily to make action and outlet connections between the view controller and its views. • As with all objects loaded from a story board, to finish initializing a view controller loaded from a storyboard you override awakeFromNib. A Segue Manages the Transition Between Two Scenes • You can set the type of transition (for example, modal or push) on a segue. Additionally, you can subclass a segue object to implement a custom transition. • You can pass data between scenes with the method prepareForSegue:sender:, which is invoked on the view controller when a segue is triggered. This method allows you to customize the setup of the next view controller before it appears on the screen. Transitions usually occur as the result of some event, such as a button being tapped, but you can programmatically force a transition by calling performSegueWithIdentifier:sender: on the view controller.
  • 12. Storyboards have a number of advantages: • With a storyboard you have a better conceptual overview of all the screens in your app and the connections between them. • Storyboards can describe the transitions between the various views. These transitions are called “segues” and you create them by connecting your view controllers right in the storyboard. • Storyboards make working with table views a lot easier with prototype cells and static cells features. • Storyboards make it easier to use Auto Layout, a feature that allows you to define mathematical relationships between elements that defined their position and sizing.
  • 13. Storyboards as a useful tool, but not so much a replacement as a complement for NIBs and custom code. Storyboards are the right choice in some, but not all situations.
  • 14.
  • 16. A classic beginner’s mistake is to create one massive project-wide Storyboard. A Storyboard is a board with a story to tell. It shouldn't be used to mix unrelated stories into one big volume. A storyboard should contain view controllers that are logically related to each other—which doesn’t mean every view controller.
  • 17. Large Storyboards, other than being difficult to browse and maintain, add a layer of complexity to a team environment: when multiple developers work on the same storyboard file at the same time, source control conflicts are inevitable.
  • 18. The id itself doesn’t provide any indication whatsoever as to its true significance, so you have nothing to work with.
  • 19. Performance • when a Storyboard is loaded, all of its view controllers are instantiated immediately. Fortunately, this is just an abstraction and not true of the actual implementation Prototypes • Storyboards simplify the prototyping and mocking up of user interfaces and flow. Reusability • a single view controller cannot be individually extracted and reused elsewhere as a single independent entity; it’s dependent on the rest of the Storyboard to function. Data flow • Storyboards take care of handling the flow between view controllers, but not the flow of data. So, the destination controller has to be configured with code, overriding the visual experience.
  • 20. References • Storyboard - iOS Developer Library • About Storyboards - iOS Developer Library • iOS User Interfaces: Storyboards vs. NIBs vs. Custom Code - toptal • 10 practical tips for iOS developers using storyboards - xmcgraw • Storyboard, Xibs & co… - polarios • Storyboards Tutorial in Swift: Part1 - raywenderlich