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"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alexrodriguez/images/294456/Screen_Shot_2014-03-15_at_11.57.38_PM.png)
PuppyDetailViewController
- Create a new class called "PuppyDetailViewController"
- Should be a subclass of UIViewController
- Add the following Puppy object property to the class
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alexrodriguez/images/294483/Screen_Shot_2014-03-16_at_12.41.05_AM.png)
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...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alexrodriguez/images/294484/Screen_Shot_2014-03-16_at_12.43.38_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alexrodriguez/images/294486/Screen_Shot_2014-03-16_at_12.44.39_AM.png)
Don't forget to prepareForSegue!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alexrodriguez/images/294488/Screen_Shot_2014-03-16_at_12.46.15_AM.png)
Showing Data
- Now that we can receive a Puppy object containing the details for the selected puppy, lets show them on the screen
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alexrodriguez/images/294500/Screen_Shot_2014-03-16_at_1.19.17_AM.png)
PuppyDetailViewController
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alexrodriguez/images/294503/Screen_Shot_2014-03-16_at_1.20.30_AM.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alexrodriguez/images/295099/Screen_Shot_2014-03-16_at_1.13.10_PM.png)
Then implement
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alexrodriguez/images/295104/Screen_Shot_2014-03-16_at_1.16.39_PM.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alexrodriguez/images/295271/Screen_Shot_2014-03-16_at_3.40.28_PM.png)
- Make an outlet for the labels on the right (the one that says “Detail”) and name them ageLabel and popularityLabel
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alexrodriguez/images/295290/Screen_Shot_2014-03-16_at_3.56.25_PM.png)
- 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 ""
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alexrodriguez/images/299633/Screen_Shot_2014-03-18_at_9.38.08_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alexrodriguez/images/299629/Screen_Shot_2014-03-18_at_9.36.24_PM.png)
Override UITextField Delegate Method
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alexrodriguez/images/295298/Screen_Shot_2014-03-16_at_4.06.49_PM.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alexrodriguez/images/299642/Screen_Shot_2014-03-18_at_9.50.29_PM.png)
Connect & Implement IBActions
-
These are the action methods for the two bar buttons
- They simply let the delegate know what just happened
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alexrodriguez/images/299646/Screen_Shot_2014-03-18_at_9.53.35_PM.png)
To Be Continued...
iOS200 - iOS Platform Development Intermediate - Day 3
By Alex Rodriguez
iOS200 - iOS Platform Development Intermediate - Day 3
Today we will learn how to Detect Cell Selections, Delete Rows, Add Rows, Use Multi Section Table Views, Learn about UIImagePickerController, and Learn about UIActivityViewController.
- 1,560