Students will work with table views, learn about protocols, and implement the UITableViewDataSource and UITableViewDelegate protocols to build .
Students who complete this project independently are able to:
- instantiate and place a UITableView on the screen
- work with UITableViewControllers
- implement a master-detail interface
- implement the UITableViewDataSource protocol
- use the UITableViewDelegate protocol methods to respond to user interaction
- instantiate and place UIImages on the screen
- use a Model Object Controller to access model objects
Build a view that lists the planets. You will use a UITableViewController and implement the UITableViewDataSource protocol methods. Note than one could use a UIViewController with a UITableView placed on it, but UITableViewController implements a full screen UITableView by default, and comes with other benefits discussed in the lesson.
The UITableViewController subclass template comes with a lot of boilerplate and commented code. For readability, please remove all unused boilerplate from your code.
- Add a UITableViewController as your root view controller in Main.storyboard and embed it into a UINavigationController
- Create a PlanetListViewController file as a subclass of UITableViewController and set the class of your root view controller scene
- Implement the UITableViewDataSource methods using the PlanetController.planets array
- note: Pay attention to your
reuseIdentifier
in the Storyboard scene and your dequeue function call
- note: Pay attention to your
- Set up your cells to display the name, image, and index of the planet
- note: Look at the included properties and various styles of a UITableViewCell
- note: Experiment with the content modes on the cell's UIImageView to display the image in different ways
Build a view that displays the details of a planet. Display an image of the planet and include planet data for distance, day length, and diameter. This view will be reused for each planet.
- Add a new scene to Main.storyboard
- Create a PlanetDetailViewController file as a subclass of UIViewController and set the class of your detail view scene
- Add a UIImageView and UILabels to display the data
- note: Experiment with Autolayout automatic constraints or UIStackViews to create an appealing detail view
- Create outlets from the UIImageView and UILabels to your PlanetDetailViewController class
- Add a new function called
updateWithPlanet
that takes a planet as a parameter and updates the view controller's title, UIImageView and UILabels with the planet's data- note: This is an extremely common design pattern. Commit it to memory. If you have a detail view or table view cell template that displays data, use an 'updateWith' method that accepts the model data and updates the view elements with the correct data.
You can test your view and the update function by setting the detail view as the initial view controller and calling updateWithPlanet(PlanetController.planets[0])
in the viewDidLoad()
function. Be sure to reverse those changes when done checking that the view works, or you may have undesired behavior as you create your segue.
Create a segue between your List View and Detail View that will pass the selected planet to the detail view for display.
- Option drag from your prototype cell in the List View to the Detail View to create a segue
- Select the segue and give it an identifier
- note: As a matter of best practice, the identifier should describe what the segue does, for example
toPlanetDetail
- note: As a matter of best practice, the identifier should describe what the segue does, for example
- Add the
prepareForSegue
function to your PlanetListViewController class- note: Remember that
prepareForSegue
will get called on all segues triggered from the current scene and accompanying view controller class
- note: Remember that
- Implement the
prepareForSegue
method by checking for the correct segue identifier, capturing an instance of the selected planet, capturing an instance of the PlanetDetailViewController, and calling theupdateWithPlanet
function on the PlanetDetailViewController- note: Look at UITableView documentation to find a way to capture the indexPath of the selected row
- note: You can call
_ = detailViewController.view
to force drawing of the destination view controller's subviews for updating
- Add additional model data to the Planet class, update the PlanetController to include it, and update the PlanetDetailViewController to display it
- Add an image of the entire Solar System as a header view to the list UITableView
- Create a Unit or UITest that verifies the number of cells in the PlanetListViewController
- Create a Unit or UITest that verifies the values of PlanetController.planets
Please refer to CONTRIBUTING.md.
© DevMountain LLC, 2015. Unauthorized use and/or duplication of this material without express and written permission from DevMountain, LLC is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to DevMountain with appropriate and specific direction to the original content.