Beginning iOS Development

Course No. 10-152-143

Chapter 10 — Editing UITableView

Editing Mode

  • Make a copy of your Homepwner project. It still needs to be named Homepwner so you will need to save it in another location.
  • Open the new copy of the project in Xcode.
  • Create a new XIB file by selecting the “File→New→File…” menu item.
  • Click on iOS→User Interface on the left and select the Empty option on the right.

  • Make the new XIB file for an iPhone.

  • Name it HeaderView and save it to your project.

  • Click on the HeaderView.xib file. Select the File’s Owner and change its class to ItemsViewController.

  • Drag a UIView object to the blank canvas. Click on the View and the File Inspector tab. Uncheck the Use Autolayout checkbox.

  • Select the View and click on the Attributes Inspector tab.

  • Change the size popup to Freeform so we can change its dimensions.

  • Add two buttons to the view. Make them about 130×44 in size.

  • Make the View 320 pixels wide and about 62 high.

  • Change the button labels to Edit and New.

  • Make the background color of the view clear by clicking on the View and then selecting Clear Color from the Background popup menu.

  • Add a class extension to the ItemsViewController.m file.
  • Open both the HeaderView.xib file and the ItemsViewController.m file. Control-click on the View and drag a connection to the class extension.

  • Name the Outlet headerView.

  • Create two *IBAction*s with the following names.
    • addNewItem:
    • toggleEditingMode:

  • Add the following method to ItemsViewController.m. This method will load the HeaderView.xib nib file if it hasn’t already been loaded. This method is the getter method for the headView property and means that the compiler will not generate it for us.
  • Add the following method to ItemsViewController.m. It will define the headerView as the header for the table view.
  • We also need to have this method to set the size of the header to match the size of our view.
  • Run the app and you should see this.

  • Next, we’ll fill in toggleEditingMode:. This method will switch the table view into editing mode.
  • Run the app and we can edit our table view.

Adding Rows

  • To add new rows to our table view we’ll implement the addNewItem: method.
  • You can now add rows! Run the app and add some.

  • Since we can add rows lets not bother creating the initial 5. Delete these rows from the init method.
  • One more little change. We noticed that the randomly generated items are always the same. We can easily fix this by changing the randomItem method to use arc4random() instead of rand().
  • Run the app and there won’t be any items.

  • Tap the New button and add some truly random items.

Deleting Rows

  • Deleting rows is a bit more complicated than adding them. We have to delete the item in the store first and then delete the row from the table view.
  • First, we have to add a method to our BNRItemStore class. This needs to be a public method so add a declaration for removeItem: in the BNRItemStore.h file.
  • Implement the method in the BNRItemStore.m file.
  • Now we need to add a method from the UITableViewDataSource protocol. When the user taps on the button to delete a row, the table view will call the tableView:commitEditingStyle:forRowAtIndexPath: method. This is how we’ll implement it.
  • Run the app and create and delete items!

Moving Rows

  • We need another method in our BNRItemStore class so we can reorder the items. Add this declaration to the BNRItemStore.h file.
  • Implement the method like this.
  • Now we need to shift to the ItemsViewController.m file and add this method.
  • Run the app and move some rows around.