Uitableview with custom cell using storyboard and objective c
Storyboards make working with table views easier with the prototype cell feature. You can design your won table view cells almost completely in the storyboard editor. In this tutorial we create a table view containing customized cells of some of the all-time best movies.
Open Xcode and create a new Single View Application. For product name, use CustomizingTableviewCell and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Make sure only iPhone is selected in Devices, and that the Use Storyboards checkbox and Use Automatic Reference Counting checkbox are selected.
Go to the MainStoryboard.storyboard file and select the View Controller. Delete this View Controller and drag a Table View Controller to the canvas. With the Table View Controller selected, choose Editor\Embed in\Navigation Controller from the menubar. This adds the Navigation Controller to the canvas, with the Table View Controller embedded in the Navigation Controller. Double click the titlebar of the Table View Controller and name it "Top Movies". The storyboard should look like this.
Now we can delete the ViewController.m and ViewController.h files from our project, since they are not needed anymore.Add a new file to the project, with the Objective-C class template. Name it MoviesViewController and make it a subclass of UITableViewController. return to the storyboard and select the Table View Controller. In the identity inspector set the class to MoviesViewController.
In MoviesViewController.h add a property that contains the data model for our app.
@property (nonatomic,strong) NSMutableArray *movies;
Add a new file to the project, with the Objective-C class template. Name it Movie and make it a subclass of NSObject. Change Movie.h to
@interface Movie : NSObject @property (nonatomic, copy) NSString *title; @property (nonatomic, copy) NSString *year; @property (nonatomic, copy) NSString *poster; @end[
This will contain the title, year and a reference to the filename of the poster image of a movie. I've created a zip-file containing the poster images. Download it here, unzip and add the files to the project. Make sure you select "Copy items into the destinations group's folder" checkbox.
In MoviesViewController.m import our newly created class
#import "Movie.h"
Change viewDidLoad to
- (void)viewDidLoad { [super viewDidLoad]; self.movies = [NSMutableArray arrayWithCapacity:5]; Movie *movie = [[Movie alloc] init]; movie.title = @"The Shawshank Redemption"; movie.year = @"1994"; movie.poster = @"ShawshankRedemption_poster.jpg"; [self.movies addObject:movie]; movie = [[Movie alloc] init]; movie.title = @"The Godfather"; movie.year = @"1972"; movie.poster = @"TheGodfather_poster.jpg"; [self.movies addObject:movie]; movie = [[Movie alloc] init]; movie.title = @"The Godfather Part 2"; movie.year = @"1974"; movie.poster = @"TheGodfatherPart2_poster.jpg"; [self.movies addObject:movie]; movie = [[Movie alloc] init]; movie.title = @"Pulp Fiction"; movie.year = @"1994"; movie.poster = @"Pulpfiction_poster.jpg"; [self.movies addObject:movie]; movie = [[Movie alloc] init]; movie.title = @"The Good,The Bad and The Ugly"; movie.year = @"1966"; movie.poster = @"TheGoodTheBadAndTheUgly_poster.jpg"; [self.movies addObject:movie]; }
This simply creates some Movie objects, which are added to the movies array. Now our data model is ready, we can continue building the data source for MoviesViewController. in MoviesViewController.m, change the following methods to
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 1; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return [self.movies count]; }
To implement the tableView:cellForRowAtIndexPath method, we first need to create our own prototype cells. Add a new file to the project, with the Objective-C class template. Name it MovieCell and make it a subclass of UITableViewCell. Change MovieCell.h to
interface MovieCell:UITableviewCell @property (nonatomic, weak) IBOutlet UILabel *titleLabel; @property (nonatomic, weak) IBOutlet UILabel *yearLabel; @property (nonatomic, weak) IBOutlet UIImageview *posterImageView; @end
In MainStoryboard.storyboard, select the prototypecell and in the Identity Inspector change its class to MovieCell.
Prototype cells allow you to design a custom layout for your cells directly from within the storyboard editor. Select the empty prototype cell and in the Attributes inspector give the Cell the Reuse Identifier MovieCell.
Next, we make the cell a bit taller. Select the Table View Cell and in the Size Inspector tick the custom checkbox and set the Row Height to 100.
Next to the Table View Cell, we need to change the Table View Row Height value, so select the Table View and set the Row Height to 100.
Drag two Labels and an Image View to the Prototype Cell. Change the values in the Property and Size inspector to
- label1 - Font (System Bold 15.0). Width 150, Height 40
- label2 - Font (System 13.0). Color - Light Gray color. Width 150, Height 40
- Image View - mode Aspect Fit. Width 60, Height 80.
The cell should look like this
Now connect our outlets from our MovieCell class to the Labels and Image View.
In MoviesViewController.m import our MovieCell class
#import "MovieCell.h"
Now change the tableView:cellForRowAtIndexPath to
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"MovieCell"; MovieCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath]; Movie *movie = (self.movies)[indexPath.row]; cell.titleLabel.text = movie.title; cell.yearLabel.text = movie.year; return cell; }
Build and Run, the top movies are displayed in our custom Table View Cells.
You can download the source code of the CustomizingTableviewCell at the ioscreator repository on github.
For more please visit :- http://www.ioscreator.com/tutorials/customize-tableviewcells-with-storyboards