iOS200
iOS Platform Development - Intermediate
Day 3
In the last class we learned...
- How to implement
- Storyboards
- Segues
- UINavigationControllers
- UITabBarControllers
- UITableViewControllers
- Prototype Cells
- Custom Cells
- UITableViewCell Subclassing
- Single Table Views
Lets Review!
"PuppyPicker"
Download the code:
Todays Goals
- Learn more about UITableViews
- Detecting Cell Selections
- Deleting Rows
- Adding Rows
- Multi Section Table Views
Detecting Cell Selections
- UITableViewDelegate Protocol implements
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
}- This method is used to tell the delegate object that a cell in the table has been selected
- indexPath.row = exact cell that was selected
- This delegate method is helpful in creating segues to new views based on specific cells being selected
Add a "PuppyDetailViewController" to PuppyList
- We'll embed the new view into the navigation controller
- Use a push segue called "ViewDetails" to switch from the PuppyListViewController to "PuppyDetailViewController"
PuppyDetailViewController
- Create a new class called "PuppyDetailViewController"
- Should be a subclass of UIViewController
- Add the following Puppy object property to the class
Don't forget to set custom class on the view in the storyboard!
Implement didSelectRowAtIndexPath:
- We need a way to know what Puppy object is being used at the selected index...
Don't forget to prepareForSegue!
Showing Data
- Now that we can receive a Puppy object containing the details for the selected puppy, lets show them on the screen
PuppyDetailViewController
Deleting Rows
- Swipe left to reveal delete button
- Must implement delegate method
- tableView:commitEditingStyle forRowAtIndexPath
- Delete object from data model
- Tell the table view about the deleted cell
- Update the UI to remove the cell
- Add special built-in "editButtonItem" to put table view into editing mode
- self.editButtonItem
Deleting a Puppy from Puppy List
Add an edit button to the left side of the navigation bar
Then implement
This allows us to remove the Puppy object from our model and delete the corresponding cell from the table view in an animated fashion
Adding Rows
- More complex...
- Must add a Puppy object with all of it's properties defined
- Name
- Age
- Popularity
- This will require us to add a new view where we can set the values for each property
- A perfect opportunity to use a grouped table view
Adding a "+" button to nav bar
- Open up Main.storyboard
- Drag a Bar Button Item into the right slot of the navigation bar on the Puppy List screen.
- In the Attributes inspector change its Identifier to Add to make it a standard + button
- When the user taps this button the app pops up a new modal screen for entering the details of a new puppy.
Create a new Navigation Controller
- Drag a new Navigation Controller into the canvas to the right of the Puppy List screen.
- This new Navigation Controller comes with a Table View Controller attached, so that’s handy.
-
Select the + button that you just added on the Puppy List screen and ctrl-drag (or right click-drag) to the new Navigation Controller
- Select the segue to be a modal
Add a new class
- Add a new class to the project called "NewPuppyViewController" that is a subclass of UITableViewController
- Hook this new class up to the storyboard by switching back to Main.storyboard and selecting the new Table View Controller scene.
- In the Identity inspector set its Class to NewPuppyViewController.
- Change the title of the screen to Add Puppy.
- Add two Bar Button Items to the navigation bar
- Cancel
- Done
Static Cells
-
No need to write cellForRowAtIndexPath to populate cells
- Select the table view in the Add Puppy screen
- In the Attributes inspector change Content to Static Cells.
- Change Style from Plain to Grouped and give the table view 2 sections.
- When you change the value of the Sections attribute, the editor will clone the existing section.
- The finished screen will have only one row in each section, so select the superfluous cells and delete them.
Static Cells
- Select the top-most section and in its Attributes inspector and give the Header field the value Name
- In the second section, do the same thing but change the header to the value Details
- Make an outlet for the labels on the right (the one that says “Detail”) and name them ageLabel and popularityLabel
- Add a UITextField to the first section's cell
- Remove its border so you can’t see where the text field begins or ends
- Set the Font to System 17 and uncheck Adjust to Fit.
- Open the Assistant Editor and create and IBOutlet called ""
Override UITextField Delegate Method
DetailsViewControllerDelegate
- In order to communicate back to the PuppyListViewController we need to implement a protocol that will call methods when a user taps the "Done" or "Cancel" buttons
- Add a protocol named "NewPuppyViewControllerDelegate" that has two required methods
-
@class NewPuppyViewController; @protocol NewPuppyViewControllerDelegate <NSObject> - (void)newPuppyViewControllerDidCancel:(NewPuppyViewController *)controller; - (void)newPuppyViewController:(NewPuppyViewController *)controller didAddPuppy:(Puppy *)puppy; @end
Add a new delegate property and delegate methods to NewPuppyViewController
Connect & Implement IBActions
-
These are the action methods for the two bar buttons
- They simply let the delegate know what just happened
