iOS Catalog App: Part 2

Hopefully everyone enjoyed Part 1 of the Catalog App Tutorial series. Once again, if anybody needs any help, feel free to contact me. Just to review, in the last section, we created a Parse account, set up an Xcode project and create our initial view by using a TabBarController, NavigationController, and UITableViewController. Today, we're going to create the cell that will hold our catalog's information and begin the code for the table view. This is the main part of the app so make sure you follow closely and understand all of the details. Let's begin!

First things first, open up the Xcode project we made yesterday. Once thats up, get into your storyboard and focus on the UITableViewController. We're going to start off by creating the file that will control your UITableViewController. Press "File" in the upper left corner of your computer screen. Then go to "New" and then select "File". From there, you'll have a lot of choices appear. Under "iOS", select "Source" and then "Cocoa Touch Class". Next, choose "UITableViewController" in the section that says "Subclass of". Then name your file and make sure "Objective-C" is checked and "Create XIB file" is unchecked. Then press next and your file should be made! Now we need to make a second file for our custom UITableViewCell. Press "File" again and then go to "New" and then "File". From there, select "iOS", then "Source", then "Cocoa Touch Class". Next choice "UITableViewCell" in the section that says "Subclass of". Then name your file and make sure "Objective-C is checked and "Create XIB file" is unchecked. Press "Next" and your custom table view cell is ready! Get back to your storyboard and select the UITableViewController. In the right hand pane, click the button at the top that looks like an ID and says Identity Inspector when you hover over it. Click the section that says "Class" and find the name of the class that we just created. Set the class to this file. Now on your UITableViewController, you should see a little view that says "Prototype Cells". Click on this view and you should see a small area where you can drag the view at the bottom of the view. Drag this to a height of about 372. You can change it if you want, but thats just what I used for myself. Next, drag in a UIImageView and make the width the same as the Prototype Cell. The height should be around 371, but this is also up to you. Now, drag in three labels. One will be for the name, one will be for the price, and one will be for the description. Bring the price label to the top left hand corner of the image view. Make the width of the label almost as long as the cell. Make the name label to the left of the cell and directly under the ImageView. Under the name label place the description label. Make the width of both of these almost as long as the cell. Make the description label a bit longer than the name label so it can hold a long description. Also, select the name label and on the right hand pane, make the section that says "Lines" have two. Do the same with the description label, but make the "Lines" section say 3 or 4. Next add a UIPageControl and put that toward the bottom of the UIImageView but horizontally centered. Finally, drag three buttons onto the storyboard. Click on each one and to the right enter in the name field as "Share", "Buy", and "Wishlist" respectively. Drag these to the very bottom of the cell. You image should look like the image below minus the "Filter" button and the search bar, we'll add those later.

Now, we'll move onto making connections. Open the assistant editor by clicking on a button that looks like two intersecting circles in the top right corner. This will create two different screens. Select the custom table view cell file we made earlier to place on the second screen using a selector at the top. To make connections, we right click on an interface piece and drag it over to the area under "@interface". We'll start with the UIImageView. Right click on the UIImageView and drag it over to the area under the "@interface". When you let go make sure the "Connection" area says "Outlet" and make a name for the UIImageView. I used "clothingImage" as the name of the connection since I was making a fashion catalog app. Name yours whatever you want. Go over this same procedure with the UIPageControl, name label, description label, and price label. The procedure is a little different with the button. Do the same right click drag under "@interface", but when the box pops up, make the "Connection" area say "Action" then make sure it says "TouchUpInside". After that create a name for this action. Do the same with the other two button. Now your UITableViewCell is all connected!

Now we'll start the basics of the UITableViewController. Open up the UITableViewController we created a little while ago. Scroll to an area that says "numberOfSectionsInTableView" replace the section that says "return 0;" say "return 1;". This creates one section for the UITableView. Now, uncomment the area that says "cellForRowAtIndexPath". Replace the old cell declaration code with this:

YourCellFileName *cell = (YourCellFileName *)[self.tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];

Go back to your UITableViewController in the Storyboard. After that select the "Prototype Cell" that is inside the TableViewController. When you click on the cell, look to the right pane. In this section, make sure the area that says "Identifier" say "cell". Make sure this is lower case because Objective-C is Case Sensitive. This is it for today. Later, we'll be making many more adjustments to these two views. However, first we'll need to make Parse imports so we can successfully download the objects that we will end up displaying in the UITableViewController. Stay tuned for Part 3 of this tutorial series! Have a good night!