Tips to create Custom Cells And Delegates

Tips to create Custom Cells And Delegates

Create A New Project

Open Xcode, click on File->New->Project and select Single View Application. Name the project Tableview Tutorial 3 and set class prefix as TVT. Create the project.
– Download the resources here. Unzip them and drag them to your project’s navigation panel. Make sure copy items into destination group’s folder is selected, leave the rest of the fields as they are and click finish.
– Next, Right click on Tableview Turorial 3 folder in the navigation panel and select new file. Select Objective-C class. Set the class name as TableCell and subclass of UITableViewCell. This class will handle our cell methods, properties and delegate.
Creating Views

– Go to mainstoryboard.storyboard in the navigation panel, select file inspector in the Utilities panel and deselect Autolayout. We will learn about autolayout in the later tutorials.
– Drag a UITableview from object library on our view controller and re-size it to cover the entire screen. Create an outlet in TVTViewController.m or .h and name it tableView.
-Keeping the tableview selected, click on attributes inspector and set the following properties
Content – Dynamic Properties
Prototype cells – 1
-Next click on the cell that shows when you set Prototype cell =1 and set the properties
In the identity inspector set class as TableCell (the name of the class we created before). This will link the cell’s view to our custom class.
In the attributes inspector, set Style as custom and Identifier as TableCellID
In the size inspector, check custom and set row height = 150.
-Let’s make our cell more custom by giving it a different syle. On the newly created cell, make the following changes –
Drag an imageView to fill out the entire cell and set it’s image as cell_bg.jpg. This will act as cell background
Next drag a button and place it somewhere on the lower right. Set it’s image as delete.png. Also create an IBAction as deleteTapped in the class TableCell.m
Drag another imageView and place it somewhere on the middle left and set it’s outlet as cellImage in TableCell.h. This will be used to show a thumbnail for each cell.
Drag a UILabel whereever there is some place left on the cell and set it’s outlet as title.
Your cell should look something like this –
ios Uitableview Tutorial – custom cell
Let’s Code –

We will first setup our cell to show the title and corresponding thumbnail image and later on we will make a custom delegate for our cell for delete button to work.
Replace the TVTViewController.h with the following –

3) Here we are using TableCell *(our custom class ) instead of UITableViewCell * so that we can access our custom properties (cellImage and title) directly from here.
3.2)We fetch the dictionary corresponding to the cell using indexPath and set our cell’s title and image.
Run the App (Command+R) and you should be able to see your first custom cell. Only the delete button will not work which we will handle now!
Custom Delegates – iOS TableView Tutorial

We are now going to create our very first custom delegate. You have been setting tableview.delegate = self; many times before without knowing whats really happening. Well the time has come for you to know the ultimate secret. Well! not so ultimate or secret. Anyways lets start
Firstly, we will create a delegate – Go to TableCell.h and add the following lines of code right before @interface:TableCell and right after #import statements if any –

5) This is how we make a delegate @protocol delegate-name <NSObject>, followed by delegate methods – (such as cellForRowAtIndexPath as in the case of tableview.
Next, add the following property inside @interface and @end
@property (nonatomic, strong) id delegate;
Here the name delegate can be changed to anything. So if we replace delegate as someDelegate, the only difference would be that while setting the delegate we will use tablecell.someDelegate = self;
Your tableCell.h should look something like this –

This method will be called whenever delete is tapped on a cell. First we get the indexPath for the cell tapped. We then remove the object from the tweets array. We could have called [tableView reloadData]; but we use the above method deleteRowsAtIndexPath for a sweet animation when deleting.