iOS Bootcamp: learning to create awesome apps on iOS using Swift (Lecture 05)

Jonathan Engelsma
Jonathan EngelsmaAssociate Professor
iOS TableViews Controllers /
Navigation Controllers
Lecture 05
Jonathan R. Engelsma, Ph.D.
TOPICS
• More onView Controllers
• Navigation Controllers
• TableView Overview
• StaticTableViews
• DynamicTableViews
VIEW CONTROLLERS
• We’ve seen previously that view controllers are the “glue”
between models and views. (e.g. looking inward)
• However, in addition to managing views & models, they also
communicate and coordinate with other view controllers
when UI transitions occur within the app. (e.g. looking outward)
• Storyboards make it much easier for us to handle these
outward looking concerns of view controllers.
VC RESPONSIBILITIES
• Making sure the view gets into the interface! Usually not the
managing view controller, but some other view controller…
• Provides animations as views appear/disappear.
• View Controllers work together to save / restore state, which
allow the app to restart if terminated or placed in the
background.
VC DATA MGMT GUIDELINES
• Unless self-contained, a destination view controller’s references
to app data should come from the source view controller.
• Use interface builder as much as possible!
• Always use a delegate to communicate back to other view
controllers. A view controller should not need to know the
type of its source view controller.
• Avoid unnecessary connections to objects external to your
view controller.
https://developer.apple.com/library/ios/featuredarticles/ViewControllerPGforiPhoneOS/ManagingDataFlowBetweenViewControllers/ManagingDataFlowBetweenViewControllers.html#//apple_ref/doc/uid/TP40007457-CH8-SW1
ROOTVIEW CONTROLLER
• The view controller that manages the view at the top of the
view hierarchy is know as the root view controller.
• Responsible for:
• handling rotation of the user interface
• manipulation of the status bar, present or not? light or dark
styling?
• There is only one root view controller in an app.
SUBORDINATE
RELATIONSHIPS
• Apps may consist of additional view controllers that are
subordinate to the root view controller.
• Subordinate relationships:
• parentage (containment)
• presentation (formally known as modal views)
PARENTAGE
• A view controller (parent) may contain a subordinate view
controller (child).
• A child view controller’s view, if visible is a subview of the
parent’s view.
• The parent view controller makes the views of its children
visible, or replaces with other views.
NAVIGATION CONTROLLERS
• Navigation controllers manage a stack of view controllers.
• Provide a drill-down interface for hierarchical content.
• Each view controller in the stack manages a distinct view.
• The navigation controller navigates within the stack of view
controllers.
UINavigationController
https://developer.apple.com/library/iOs/documentation/WindowsViews/Conceptual/ViewControllerCatalog/Chapters/NavigationControllers.html
NAV OBJECTS
• Stack is a LIFO collection of
view controllers.
• First item added to the stack
is known as the root view
controller.
HOWTO USE
• Using UINavigation Controller with Storyboards
1. Drag a UINavigationController from the object library
to the storyboard.
2. Cntrl-Click drag from nav controller to the “root” view.
3. Release click and select “root view”
4. In subsequent segues, make sure the type of the segue is
set to push.
PRESENTATION
RELATIONSHIP
• A view controller (presenting VC) can present another view
controller (presented VC)
• The presentedVC is NOT a child.
• The presentedVC’s view covers part or all of the presenting
VC’s view.
• Formally known (iOS 4 and earlier) as a modal view controller.
TABLEVIEWS IN IOS
• Table views have many purposes:
• To let users navigate through hierarchically structured data
• To present an indexed list of items
• To display detail information and controls in visually distinct
groupings
• To present a selectable list of options
UITABLEVIEW
• Multiple vertical rows, but only one column.
• Static or dynamic.
• Scrollable (inherits UIScrollView)
• Customized via a datasource and delegate protocol.
• Lots of different prefabricated layouts for the individual cells in
our UITableViews.
Dynamic / Plain
Indexed List
Static / Default
Layout / Grouped
Dynamic / Custom
Layout
Grouped Style
ATable Section
Disclosure Indicator
(indicates selecting
will navigate to a
new screen - often
the detail of that
row item.
ATable Header
ATable Footer
ATable Cell
Plain (ungrouped) Style
ATable Section
Disclosure Indicator
(indicates selecting
will navigate to a
new screen - often
the detail of that
row item.
ATable Header
ATable Footer
ATable Cell
UITableViewCellStyleDefault UITableViewCellStyleSubtitle UITableViewCellStyleValue2 UITableViewCellStyleValue1
CELL STYES
CONTROLLERS
• Most of the time we will manage UITableViews with
UITableViewControllers.
• Normally, the UITableView fills the entire view.
• Since the UITableView paradigm involves selecting a row to
“zoom” in on the details of that row, we need a way to
navigate back and forth between the table view and the detail
view.
• This is normally done with a Navigation Controller.
STATICTABLE DEMO
DEMO!!
DYNAMICTABLEVIEWS
• Static table views are great for use cases where the data is not
dynamic, such as setting screens, etc.
• If we are displaying data dynamically (e.g. displaying data
resulting from a DB query, or fetch to a web API.) we need to
use a different approach.
• We need to programmatically provide the UITableView with
its data!
UITABLEVIEW PROTOCOLS
• UITableView’s delegate and dataSource properties:
• dataSource (implements UITableViewDataSource): Mediates
the apps model data and the table view hierarchy (e.g.
specifies cells, headers, rows, etc.)
• delegate (implements UITableViewDelegate): manages how
the tableview will be displayed, row selection, etc.
UITABLEVIEW PROTOCOLS
• When we create a UITableViewController in Interface Builder:
• it has a property tableView that points to its UITableView
object.
• it automatically wires the controller object up to be the
delegate and dataSource.
UITABLEVIEWDATASOURCE
• Three important methods on UITableViewDataSource:
• numberOfSectionsInTableView: how many sections are in
the table?
• tableView:numberOfRowsInSection: how many rows are in
the given section?
• tableView:cellForRowAtIndexPath: provide a
IUTableViewCell for a given position within the table.
DYNAMICTABLE DEMO
DEMO!!
UITABLEVIEWDELEGATE
• The UITableView delegate handles a number of details
concerning how the table view will look.
• Handles what happens when a row is selected.
• We can also use it to edit the rows in a table view.
Table with 4 rows
Edit activated by
swiping from right to left
on the second row.
After delete is
pressed.
ROW EDIT DEMO
DEMO!!
READING ASSIGNMENT
• Chapter 6, 8: Programming
iOS 8 (by Neuburg)
1 of 31

More Related Content

Similar to iOS Bootcamp: learning to create awesome apps on iOS using Swift (Lecture 05)

Ui   5Ui   5
Ui 5Michael Shrove
736 views55 slides

Similar to iOS Bootcamp: learning to create awesome apps on iOS using Swift (Lecture 05)(20)

Intro to UIKit • Made by ManyIntro to UIKit • Made by Many
Intro to UIKit • Made by Many
kenatmxm1.5K views
Ui   5Ui   5
Ui 5
Michael Shrove736 views
Introduction of XcodeIntroduction of Xcode
Introduction of Xcode
Dhaval Kaneria5K views
iOS storyboardiOS storyboard
iOS storyboard
MinHyeok Kim666 views
iOS: Table ViewsiOS: Table Views
iOS: Table Views
Jussi Pohjolainen1.8K views
iOS (7) WorkshopiOS (7) Workshop
iOS (7) Workshop
Fábio Bernardo1.1K views
Marionette talk 2016Marionette talk 2016
Marionette talk 2016
Kseniya Redunova657 views
Mvc architectureMvc architecture
Mvc architecture
Surbhi Panhalkar44.4K views
iOS Coding Best PracticesiOS Coding Best Practices
iOS Coding Best Practices
Jean-Luc David62.8K views
MVP Clean  Architecture MVP Clean  Architecture
MVP Clean Architecture
Himanshu Dudhat2.9K views
아이폰강의(4) pdf아이폰강의(4) pdf
아이폰강의(4) pdf
sunwooindia747 views
IOS APPs RevisionIOS APPs Revision
IOS APPs Revision
Muhammad Amin517 views
iOS training (intermediate)iOS training (intermediate)
iOS training (intermediate)
Gurpreet Singh Sachdeva522 views
SwiftSwift
Swift
Larry Ball1.2K views

More from Jonathan Engelsma(6)

Recently uploaded(20)

ANATOMY AND PHYSIOLOGY UNIT 1 { PART-1}ANATOMY AND PHYSIOLOGY UNIT 1 { PART-1}
ANATOMY AND PHYSIOLOGY UNIT 1 { PART-1}
DR .PALLAVI PATHANIA156 views
ICANNICANN
ICANN
RajaulKarim2057 views
Azure DevOps Pipeline setup for Mule APIs #36Azure DevOps Pipeline setup for Mule APIs #36
Azure DevOps Pipeline setup for Mule APIs #36
MysoreMuleSoftMeetup75 views
Dance KS5 BreakdownDance KS5 Breakdown
Dance KS5 Breakdown
WestHatch52 views
Drama KS5 BreakdownDrama KS5 Breakdown
Drama KS5 Breakdown
WestHatch50 views
Psychology KS4Psychology KS4
Psychology KS4
WestHatch52 views
ICS3211_lecture 08_2023.pdfICS3211_lecture 08_2023.pdf
ICS3211_lecture 08_2023.pdf
Vanessa Camilleri68 views
Narration lesson plan.docxNarration lesson plan.docx
Narration lesson plan.docx
Tariq KHAN90 views
BYSC infopack.pdfBYSC infopack.pdf
BYSC infopack.pdf
Fundacja Rozwoju Społeczeństwa Przedsiębiorczego144 views
ACTIVITY BOOK key water sports.pptxACTIVITY BOOK key water sports.pptx
ACTIVITY BOOK key water sports.pptx
Mar Caston Palacio132 views
AI Tools for Business and StartupsAI Tools for Business and Startups
AI Tools for Business and Startups
Svetlin Nakov57 views
Structure and Functions of Cell.pdfStructure and Functions of Cell.pdf
Structure and Functions of Cell.pdf
Nithya Murugan142 views
Narration  ppt.pptxNarration  ppt.pptx
Narration ppt.pptx
Tariq KHAN62 views
Lecture: Open InnovationLecture: Open Innovation
Lecture: Open Innovation
Michal Hron82 views
Class 10 English  lesson plansClass 10 English  lesson plans
Class 10 English lesson plans
Tariq KHAN172 views

iOS Bootcamp: learning to create awesome apps on iOS using Swift (Lecture 05)

  • 1. iOS TableViews Controllers / Navigation Controllers Lecture 05 Jonathan R. Engelsma, Ph.D.
  • 2. TOPICS • More onView Controllers • Navigation Controllers • TableView Overview • StaticTableViews • DynamicTableViews
  • 3. VIEW CONTROLLERS • We’ve seen previously that view controllers are the “glue” between models and views. (e.g. looking inward) • However, in addition to managing views & models, they also communicate and coordinate with other view controllers when UI transitions occur within the app. (e.g. looking outward) • Storyboards make it much easier for us to handle these outward looking concerns of view controllers.
  • 4. VC RESPONSIBILITIES • Making sure the view gets into the interface! Usually not the managing view controller, but some other view controller… • Provides animations as views appear/disappear. • View Controllers work together to save / restore state, which allow the app to restart if terminated or placed in the background.
  • 5. VC DATA MGMT GUIDELINES • Unless self-contained, a destination view controller’s references to app data should come from the source view controller. • Use interface builder as much as possible! • Always use a delegate to communicate back to other view controllers. A view controller should not need to know the type of its source view controller. • Avoid unnecessary connections to objects external to your view controller. https://developer.apple.com/library/ios/featuredarticles/ViewControllerPGforiPhoneOS/ManagingDataFlowBetweenViewControllers/ManagingDataFlowBetweenViewControllers.html#//apple_ref/doc/uid/TP40007457-CH8-SW1
  • 6. ROOTVIEW CONTROLLER • The view controller that manages the view at the top of the view hierarchy is know as the root view controller. • Responsible for: • handling rotation of the user interface • manipulation of the status bar, present or not? light or dark styling? • There is only one root view controller in an app.
  • 7. SUBORDINATE RELATIONSHIPS • Apps may consist of additional view controllers that are subordinate to the root view controller. • Subordinate relationships: • parentage (containment) • presentation (formally known as modal views)
  • 8. PARENTAGE • A view controller (parent) may contain a subordinate view controller (child). • A child view controller’s view, if visible is a subview of the parent’s view. • The parent view controller makes the views of its children visible, or replaces with other views.
  • 9. NAVIGATION CONTROLLERS • Navigation controllers manage a stack of view controllers. • Provide a drill-down interface for hierarchical content. • Each view controller in the stack manages a distinct view. • The navigation controller navigates within the stack of view controllers.
  • 12. NAV OBJECTS • Stack is a LIFO collection of view controllers. • First item added to the stack is known as the root view controller.
  • 13. HOWTO USE • Using UINavigation Controller with Storyboards 1. Drag a UINavigationController from the object library to the storyboard. 2. Cntrl-Click drag from nav controller to the “root” view. 3. Release click and select “root view” 4. In subsequent segues, make sure the type of the segue is set to push.
  • 14. PRESENTATION RELATIONSHIP • A view controller (presenting VC) can present another view controller (presented VC) • The presentedVC is NOT a child. • The presentedVC’s view covers part or all of the presenting VC’s view. • Formally known (iOS 4 and earlier) as a modal view controller.
  • 15. TABLEVIEWS IN IOS • Table views have many purposes: • To let users navigate through hierarchically structured data • To present an indexed list of items • To display detail information and controls in visually distinct groupings • To present a selectable list of options
  • 16. UITABLEVIEW • Multiple vertical rows, but only one column. • Static or dynamic. • Scrollable (inherits UIScrollView) • Customized via a datasource and delegate protocol. • Lots of different prefabricated layouts for the individual cells in our UITableViews.
  • 17. Dynamic / Plain Indexed List Static / Default Layout / Grouped Dynamic / Custom Layout
  • 18. Grouped Style ATable Section Disclosure Indicator (indicates selecting will navigate to a new screen - often the detail of that row item. ATable Header ATable Footer ATable Cell
  • 19. Plain (ungrouped) Style ATable Section Disclosure Indicator (indicates selecting will navigate to a new screen - often the detail of that row item. ATable Header ATable Footer ATable Cell
  • 21. CONTROLLERS • Most of the time we will manage UITableViews with UITableViewControllers. • Normally, the UITableView fills the entire view. • Since the UITableView paradigm involves selecting a row to “zoom” in on the details of that row, we need a way to navigate back and forth between the table view and the detail view. • This is normally done with a Navigation Controller.
  • 23. DYNAMICTABLEVIEWS • Static table views are great for use cases where the data is not dynamic, such as setting screens, etc. • If we are displaying data dynamically (e.g. displaying data resulting from a DB query, or fetch to a web API.) we need to use a different approach. • We need to programmatically provide the UITableView with its data!
  • 24. UITABLEVIEW PROTOCOLS • UITableView’s delegate and dataSource properties: • dataSource (implements UITableViewDataSource): Mediates the apps model data and the table view hierarchy (e.g. specifies cells, headers, rows, etc.) • delegate (implements UITableViewDelegate): manages how the tableview will be displayed, row selection, etc.
  • 25. UITABLEVIEW PROTOCOLS • When we create a UITableViewController in Interface Builder: • it has a property tableView that points to its UITableView object. • it automatically wires the controller object up to be the delegate and dataSource.
  • 26. UITABLEVIEWDATASOURCE • Three important methods on UITableViewDataSource: • numberOfSectionsInTableView: how many sections are in the table? • tableView:numberOfRowsInSection: how many rows are in the given section? • tableView:cellForRowAtIndexPath: provide a IUTableViewCell for a given position within the table.
  • 28. UITABLEVIEWDELEGATE • The UITableView delegate handles a number of details concerning how the table view will look. • Handles what happens when a row is selected. • We can also use it to edit the rows in a table view.
  • 29. Table with 4 rows Edit activated by swiping from right to left on the second row. After delete is pressed.
  • 31. READING ASSIGNMENT • Chapter 6, 8: Programming iOS 8 (by Neuburg)