Expandable Tableview in iOS

Posted By : Gunjan Gumber | 10-Apr-2017

ios

In this Blog I have focused on explaining how we can easily expand tableView in iOS, some of the steps that you have to implement involve:

1) Firstly, Open Xcode and create a new Xcode Project. On the project template window, select ‘Single View Application’ and then click Next.

2) On the project options screen, fill out the ‘Product Name’, ‘Organisation Name’, and ‘Organisation Identifier’

3) Now go to Storyboard in your project and drag drop a UITableView object on your ViewController and let it cover the entire UIViewController Scene.

4) Now create a reference outlet for your UITableView object in ViewController.h class, and name it expandableTableView.

5)Now go to your ViewController.h class and include UITableViewDataSource and UITableViewDelegate . Also declare a NSMutableArray named DataArray and a NSMutableArray named arrayExpand. This dataArray will be used for showing data for main category and arrayExpand array will be used to show data when we expand or collapse a table cell. Now your ViewController.h class should be as shown below:

#import <uikit/uikit.h>

@interface ViewController : UIViewController
{
IBOutlet UITableView * expandableTableView;
    NSMutableArray *arrayExpand;
    NSMutableArray *DataArray;
    NSInteger selectbuttonindex;
    
}
@end

6) Go to your ViewController.m class and find the method -(void)viewDidLoad , Under this method, write the following code:

      DataArray=[NSMutableArray new];
    arrayExpand=[NSMutableArray new];

 for (int i=0; i<10; i++) {
        NSMutableDictionary *dic=[NSMutableDictionary new];
        
        [dic setObject:@"fullname" forKey:@"fullname"];
        [dic setObject:@"email" forKey:@"email"];
        [dic setObject:@"id" forKey:@"id"];
        [dic setObject:@"password" forKey:@"password"];
        [DataArray addObject:dic];
    }

   for (int j=0; j<DataArray.count;j++ )
    {
        NSMutableDictionary *dic=[NSMutableDictionary new];
        [dic setObject:@"Yes" forKey:@"Expand"];
        [arrayExpand addObject:dic];
    }

Here in the above code we are defining and setting value for two previously declared array.

7) And now we have to define the UITableView delegate and datasource method in our code. Add the following codes

 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return DataArray.count;
}


-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 4;
}


-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellidentifier=@"Cell";
    UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:cellidentifier];

    if (indexPath.row==0) {
        cell.textLabel.text=DataArray[indexPath.row][@“full name”];
    }
   else if (indexPath.row==1) {
        cell.textLabel.text=DataArray[indexPath.row][@“email”];
    }
   else if (indexPath.row==2) {
        cell.textLabel.text=DataArray[indexPath.row][@“id”];
    }
   else if (indexPath.row==3) {
       cell.textLabel.text=DataArray[indexPath.row][@“password”];
   }

    return cell;
}


-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *headerview=[[UIView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 40)];

    if (section%2) {
        headerview.backgroundColor=[UIColor cyanColor];

    }
    else{
        headerview.backgroundColor=[UIColor yellowColor];

    }

    UILabel *textlabel=[[UILabel alloc]initWithFrame:CGRectMake(10, 10, 100, 20)];
         textlabel.text = @"Details";

    [headerview addSubview:textlabel];
    UIButton *expandbtn=[[UIButton alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 40)];
    expandbtn.backgroundColor=[UIColor clearColor];
    expandbtn.tag=section;
        [expandbtn addTarget:self action:@selector(expandtableview:) forControlEvents:UIControlEventTouchUpInside];
    [headerview addSubview:expandbtn];
     return headerview;
}

We also need to tell the TableView what height to use for the different types of cells. The following function does this:

 -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if ([arrayExpand[indexPath.section][@"Expand"] isEqualToString:@"No"]) {
        return 40;
    }
    else{
        return 0;
    }
}


-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 40;
}


-(void)expandtableview:(id)sender
{
    UIButton *btn=(UIButton *)sender;
    NSLog(@"button tag ==== %li",btn.tag);
    //NSLog(@"sender tag %li",sender.tag);

    selectbuttonindex=btn.tag;
    

    for (int i=0; i<DataArray.count; i++) {
        if (i==selectbuttonindex) {
        if ([arrayExpand[i][@"Expand"] isEqualToString:@"Yes"])
        {
            NSMutableDictionary *dic=[NSMutableDictionary new];
            [dic setObject:@"No" forKey:@"Expand"];
            [arrayExpand replaceObjectAtIndex:selectbuttonindex withObject:dic];
            NSLog(@"array expand === 2 == %@",arrayExpand);

        }
        else{
            NSMutableDictionary *dic=[NSMutableDictionary new];
            [dic setObject:@"Yes" forKey:@"Expand"];
            [arrayExpand replaceObjectAtIndex:selectbuttonindex withObject:dic];
            NSLog(@"array expand === 2 == %@",arrayExpand);

        }
        }
        else
        {
        }
    }
    NSLog(@"array expand === 2 == %@",arrayExpand);
    [ expandableTableView beginUpdates];
    [ expandableTableView endUpdates];

}

We have used UITableView sections for showing the Category list, added a UIView with UILabel on the each section , to show the category name ,using ViewForHeaderInSection method. I have also added a method called expandtableview , this method will show the sub-category list when called