This project will help you practice the skills and concepts you learned related to table views, navigation, and segues in Swift, as well as practicing concepts you've learned previously. For this project you'll build an app that is a Swift vocabulary app. It will include Swift and programming vocabulary words and their definitions so you can practice your programming knowledge.
The screen recording below shows you what the final product should do:
- Create a new Xcode single view app project
- Name the project "Swift Vocabulary"
- Make sure you select Swift as the development language
- Make sure to select the "Storyboard" setting in the User Interface dropdown
- Create a new file in your Xcode project. Select the Cocoa Touch Class template.
- When you're asked for the class name for the new file choose
WordsTableViewController
, and make it a subclass ofUITableViewController
. - Create another file for
DefinitionViewController
, which should be a subclass ofUIViewController
.
- Open the app's Main.storyboard file.
- Delete the default view controller. You can also delete the corresponding ViewController.swift file from your project.
- Drag out a Table View Controller.
- Set the Table View Controller as the
initial view controller
(the little arrow should appear on the left of the scene). - Embed it in a Navigation Controller.
- Set the class of the table view controller to
WordsTableViewController
. - Make the table view's prototype cell type "Basic".
- Set the table view's reuse identifier to "WordCell".
- Drag out a regular view controller.
- Set its class to
DefinitionViewController
- Create a Show segue from the table view cell to the
DefinitionViewController
by control-dragging from the cell to the view controller. - Give the segue an identifier of
ShowDefinitionSegue
. - On the definition view controller, add a label for the word, and below that, a text view for the definition.
- Use Add Missing Constraints to add constraints.
- Add outlets from the definition view controller to the label and text view.
- Create a new file called "VocabularyWord.swift"
- Create a struct inside the file called
VocabularyWord
- Add
word: String
anddefinition: String
properties.
- Open
WordsTableViewController.swift
. - Add a variable property called
vocabWords
of type[VocabularyWord]
(array ofVocabularyWord
objects) - Implement
tableView(_ tableView:, numberOfRowsInSection section:)
. Make it return the number of vocab words invocabWords
property. - Implement
tableView(_ tableView:, cellForRowAt indexPath:)
. Dequeue the cell, get the rightVocabularyWord
for the index path, then set the cell'stextLabel
's text to the vocab word'sword
property. - In the
prepare(for:sender:)
(uncomment the method so it is live code):- Check to make sure the segue's identifier is
"ShowDefinitionSegue"
. - Get the destination
DefinitionViewController
by conditionally castingsegue.destination
toDefinitionViewController
. - Get the index path for the selected row using
tableView.indexPathForSelectedRow
. - Use that index path to get the appropriate
VocabularyWord
instance from the table view controller'svocabWords
array. - Assign the vocabulary word to the
DefinitionViewController
'svocabWord
property.
- Check to make sure the segue's identifier is
- Add a
vocabWord: VocabularyWord?
property. - Add a method called
updateViews()
. - In this method, unwrap the
vocabWord
property. If it is not nil, use itsword
anddefinition
properties to populate the label and text view. - Inside
viewDidLoad
, callupdateViews()
.
- Build and run your app using the simulator
- Check to make sure your vocabulary words show up.
- Tap on a vocabulary word, and verify that the definition screen appears with the correct definition.
- Test going back to the list of vocab words.
If you finish and want another challenge, try adding a button that allows you to create new vocab words inside the app.
Hint: The easiest way to add UI that allows the user to enter a word and its definition may be UIAlertController.