Table View
In Tutorial 3, We Added another View to Storyboard now come to Tableview. Table view one of the mostly used Tools during iOS development. As the name suggests Table view is used to show a listing of similar data in an organized manner.In blows screenshot you can see a how a simple table view could look like but you can also customize your table view to show more data and a better look.
From Where Table gets the data
Well data which is to be display in your Table View can come from different sources, but ultimately that data would be in form of Array or Dictionary.In Objective C their Array can be NSArray of NSMutableArray. Mutable Array are those in which you can add and delete data even after its initialization but in NSArray once you have allocated it than you cant change its data. While NSDictionary is like a HashTable of Objective C. One thing to remember about Arrays in Objective C is that unlike Array in C# or in Java they are not of any specific type, they can hold any kind of object.
So , for Table view to show data Table View Delegate and data source should be defined and both these thing about be your current View controller. Like the view controller you are currently working on is responsible for providing
its data and the same View will be is delegate.
Lets to a little Demo for this.Go ahead and create a new SingleView Application. When you have created your application first delete your current View on your app and also delete your ViewController Class. Now From Utility Bar Drag TableViewController. As shown in the screenshot below.
Now from Menu bar click on File , from their go to New and inside New click File. Now a windows would appear showing you plenty of items which you can add in your project.So , from CocoaTouch option click on “Objective C
class” and tab the next button .And after that you would move to a windows your you would name the class which you are about to make and also you have the mention the SubClass of the class you are about to make. So, when we want to make ViewController class for TableView than we would select the SubClass as “UITableViewController” and than name the class as PlayListViewContoller and than click next and it will ask you to change to location of the file if you want to.
Now you have just created a class which is inherited from UITableViewController.And any class which is inherited from this class does not have to mention UITableViewDelegate and UITableViewDataSource. For example if want to implement TableView in any UIViewController which is inherited from UIViewController than you have to define your Delegates you want to implement in
its hear just like in little code below.
@interface myViewController : UIViewController
Now have a look at the implementation file of the class we created. You would notice their is already a lot of code generating by Xcode.What Xcode has done here is created those methods which are compulsory for our TableViewControlls Delegate and Data Source to create Table View for us.Its just like implementing the interface
methods here.Some interface methods are compulsory and some are optional so same is the case here for our Delegate and datasource methods in our class. So in your current class delete all the comments present , we will current not
needing these methods.and than the remaining methods would be.
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;
In this method how many sections your Table View will have.Normally most of the time you would have only on section in your Table View but in some case you may need to create multiple sections.In image below you can see how data in Table View can be shown in multiple sections.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;
This method require to return a number of rows which is want to show in Table view.Normally you return the size of Array which is to be shown in table View.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
This is the method which is call for your every cell of your Table View.Like if your
Array of 9 item that this method would runs 9 times.
Now , going back to PlayListViewContoller , in interface of your implementation file define a property of NSArray type just as in the code below.
@property (nonatomic,strong) NSArray *playerList;
In your implementation part you will define data of your NSArray. So, fill your viewDidLoad method like shown below.
{
[super viewDidLoad];
self.playerList = @[@"Hafeez",@"Ahmed Shahzad",@"Younis
Khan",@"Misbah",@"Azhar Ali",@"Sarfaraz",@"Junaid
Khan",@"Saeed Ajmal",@"Abdur Rehman",@"Umer Gul",@"Muhammad
Irfan"];
}
In numberOfSectionsInTableView methods just return 1 as our Table View will have just one section.
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
For numberOfRowsInSection methods we will return the count of our array.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return [self.playerList count];
}
In tableView cellForRowAtIndexPath we will get the indexPath.Row and get the item from playerList Array and set it as cell text.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier
forIndexPath:indexPath];
cell.textLabel.text = [self.playerList objectAtIndex:indexPath.row];
return cell;
}
Now after implementing these if you run the app you would still see empty table view.Why? Because we have not defined the ViewController class for our ViewController.So lets do that. In your storyboard select the View Controller that we had drag and select it and after selecting it look into the identity inspector and in Custom class option write the name of your custom TableView Class as shown in the screenshot below.
And try running your app , instead of showing empty Table View your app would crash.The reason for this is that you have your Table View Cell Identifier.Now have a look at our tableView cellForRowAtIndexPath method and in its first line we have defined a string of out Cell Identifier so in order to this to work this Cell name should match our storyboard cell name so for doing that go to Storyboard Cell the prototype cell and from identity inspector set your Identifier as shown in the screenshot below.
And now when we run the app you would see the list of players we defined in the Array.