Create Single Expanded TableView in iOS.

Single Expanded Table View

When we need to show only single expanded table view, means to tap on any section then it will expand and show their child.

for this, we need to follow some steps.

1: Take one UITableView and create their outlet to class like sampletableView.

2: set their data source and delegate.

3: Now create their array here I Have taken two arrays one for boolean value and other their data .

-(void)initialization
{
    arrayForBool=[[NSMutableArray alloc]init];
    sectionTitleArray=[[NSArray alloc]initWithObjects:
                       @"Apple",
                       @"Strawberry",
                       @"Grapes",
                       @"Orange",
                       @"Banana",
                       @"Papaya",
                       @"Guava",
                       @"pineapple",
                       nil];
    
    for (int i=0; i<[sectionTitleArray count]; i++) {
        [arrayForBool addObject:[NSNumber numberWithBool:NO]];
    }
}

-(void)initialization

{

arrayForBool=[[NSMutableArray alloc]init];

sectionTitleArray=[[NSArray alloc]initWithObjects:

@"Apple",

@"Strawberry",

@"Grapes",

@"Orange",

@"Banana",

@"Papaya",

@"Guava",

@"pineapple",

nil];

for (int i=0; i<[sectionTitleArray count]; i++) {

[arrayForBool addObject:[NSNumber numberWithBool:NO]];

}

4: Now write their delegate methods.

#pragma mark TableView DataSource and Delegate Methods

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    
    if ([[arrayForBool objectAtIndex:section] boolValue]) {
        return 2; // here you can number of children 
    }
    else
    return 0;
    
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    
    
    static NSString *cellid=@"hello";
    UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:cellid];
    if (cell==nil) {
        cell=[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellid];
    }

    
        BOOL manyCells  = [[arrayForBool objectAtIndex:indexPath.section] boolValue];
    
             /********** If the section supposed to be closed *******************/
        if(!manyCells)
        {
            cell.backgroundColor=[UIColor clearColor];
            
            cell.textLabel.text=@"";
        }
             /********** If the section supposed to be Opened *******************/
        else
        {
            cell.textLabel.text=[NSString stringWithFormat:@"%@ %d",[sectionTitleArray objectAtIndex:indexPath.section],indexPath.row+1];
            cell.textLabel.font=[UIFont systemFontOfSize:15.0f];
            cell.backgroundColor=[UIColor whiteColor];
            cell.imageView.image=[UIImage imageNamed:@"point.png"];
            cell.selectionStyle=UITableViewCellSelectionStyleNone ;
        }
    cell.textLabel.textColor=[UIColor blackColor];
    
                  /********** Add a custom Separator with cell *******************/
    UIView* separatorLineView = [[UIView alloc] initWithFrame:CGRectMake(15, 40, _expandableTableView.frame.size.width-15, 1)];
    separatorLineView.backgroundColor = [UIColor blackColor];
    [cell.contentView addSubview:separatorLineView];

    return cell;
}


- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return [sectionTitleArray count];
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    
    /*************** Close the section, once the data is selected ***********************************/
    [arrayForBool replaceObjectAtIndex:indexPath.section withObject:[NSNumber numberWithBool:NO]];
    
     [_expandableTableView reloadSections:[NSIndexSet indexSetWithIndex:indexPath.section] withRowAnimation:UITableViewRowAnimationAutomatic];

   
    
    
}


- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if ([[arrayForBool objectAtIndex:indexPath.section] boolValue]) {
        return 40;
    }
    return 0;
    
}

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

#pragma mark - Creating View for TableView Section

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *sectionView=[[UIView alloc]initWithFrame:CGRectMake(0, 0, 280,40)];
    sectionView.tag=section;
    UILabel *viewLabel=[[UILabel alloc]initWithFrame:CGRectMake(10,40 , _expandableTableView.frame.size.width-10, 40)];
    viewLabel.backgroundColor=[UIColor blueColor];
    viewLabel.textColor=[UIColor blackColor];
    viewLabel.tag = section;
    viewLabel.font=[UIFont systemFontOfSize:15];
    viewLabel.userInteractionEnabled = true;
    viewLabel.text=[NSString stringWithFormat:@"List of %@",[sectionTitleArray objectAtIndex:section]];
    [sectionView addSubview:viewLabel];
    
             /********** Add a custom Separator with Section view *******************/
    UIView* separatorLineView = [[UIView alloc] initWithFrame:CGRectMake(15, 40, _expandableTableView.frame.size.width-15, 1)];
    separatorLineView.backgroundColor = [UIColor blackColor];
    [sectionView addSubview:separatorLineView];
    
    /********** Add UITapGestureRecognizer to SectionView   **************/
    
    UITapGestureRecognizer  *headerTapped   = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(sectionHeaderTapped:)];
    [viewLabel addGestureRecognizer:headerTapped];
    
    return  sectionView;
    
    
}


#pragma mark - Table header gesture tapped

- (void)sectionHeaderTapped:(UITapGestureRecognizer *)gestureRecognizer{
    
    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:gestureRecognizer.view.tag];
    if (indexPath.row == 0) {
        BOOL collapsed  = [[arrayForBool objectAtIndex:indexPath.section] boolValue];
        for (int i=0; i<[sectionTitleArray count]; i++) {
            if (indexPath.section==i) {
                [arrayForBool replaceObjectAtIndex:i withObject:[NSNumber numberWithBool:!collapsed]];
            }
        }
        [_expandableTableView reloadSections:[NSIndexSet indexSetWithIndex:gestureRecognizer.view.tag] withRowAnimation:UITableViewRowAnimationAutomatic];
        
    }
    NSLog(@"section tapped");
    
    
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

#pragma mark TableView DataSource and Delegate Methods

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

{

if ([[arrayForBool objectAtIndex:section] boolValue]) {

return 2; // here you can number of children

}

else

return 0;

}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

static NSString *cellid=@"hello";

UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:cellid];

if (cell==nil) {

cell=[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellid];

}

BOOL manyCells = [[arrayForBool objectAtIndex:indexPath.section] boolValue];

/********** If the section supposed to be closed *******************/

if(!manyCells)

{

cell.backgroundColor=[UIColor clearColor];

cell.textLabel.text=@"";

}

/********** If the section supposed to be Opened *******************/

else

{

cell.textLabel.text=[NSString stringWithFormat:@"%@ %d",[sectionTitleArray objectAtIndex:indexPath.section],indexPath.row+1];

cell.textLabel.font=[UIFont systemFontOfSize:15.0f];

cell.backgroundColor=[UIColor whiteColor];

cell.imageView.image=[UIImage imageNamed:@"point.png"];

cell.selectionStyle=UITableViewCellSelectionStyleNone ;

}

cell.textLabel.textColor=[UIColor blackColor];

/********** Add a custom Separator with cell *******************/

UIView* separatorLineView = [[UIView alloc] initWithFrame:CGRectMake(15, 40, _expandableTableView.frame.size.width-15, 1)];

separatorLineView.backgroundColor = [UIColor blackColor];

[cell.contentView addSubview:separatorLineView];

return cell;

}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView

{

return [sectionTitleArray count];

}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath

{

/*************** Close the section, once the data is selected ***********************************/

[arrayForBool replaceObjectAtIndex:indexPath.section withObject:[NSNumber numberWithBool:NO]];

[_expandableTableView reloadSections:[NSIndexSet indexSetWithIndex:indexPath.section] withRowAnimation:UITableViewRowAnimationAutomatic];

}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

{

if ([[arrayForBool objectAtIndex:indexPath.section] boolValue]) {

return 40;

}

return 0;

}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section

{

return 40;

}

#pragma mark - Creating View for TableView Section

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section

{

UIView *sectionView=[[UIView alloc]initWithFrame:CGRectMake(0, 0, 280,40)];

sectionView.tag=section;

UILabel *viewLabel=[[UILabel alloc]initWithFrame:CGRectMake(10,40 , _expandableTableView.frame.size.width-10, 40)];

viewLabel.backgroundColor=[UIColor blueColor];

viewLabel.textColor=[UIColor blackColor];

viewLabel.tag = section;

viewLabel.font=[UIFont systemFontOfSize:15];

viewLabel.userInteractionEnabled = true;

viewLabel.text=[NSString stringWithFormat:@"List of %@",[sectionTitleArray objectAtIndex:section]];

[sectionView addSubview:viewLabel];

/********** Add a custom Separator with Section view *******************/

UIView* separatorLineView = [[UIView alloc] initWithFrame:CGRectMake(15, 40, _expandableTableView.frame.size.width-15, 1)];

separatorLineView.backgroundColor = [UIColor blackColor];

[sectionView addSubview:separatorLineView];

/********** Add UITapGestureRecognizer to SectionView **************/

UITapGestureRecognizer *headerTapped = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(sectionHeaderTapped:)];

[viewLabel addGestureRecognizer:headerTapped];

return sectionView;

}

#pragma mark - Table header gesture tapped

- (void)sectionHeaderTapped:(UITapGestureRecognizer *)gestureRecognizer{

NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:gestureRecognizer.view.tag];

if (indexPath.row == 0) {

BOOL collapsed = [[arrayForBool objectAtIndex:indexPath.section] boolValue];

for (int i=0; i<[sectionTitleArray count]; i++) {

if (indexPath.section==i) {

[arrayForBool replaceObjectAtIndex:i withObject:[NSNumber numberWithBool:!collapsed]];

}

[_expandableTableView reloadSections:[NSIndexSet indexSetWithIndex:gestureRecognizer.view.tag] withRowAnimation:UITableViewRowAnimationAutomatic];

}

NSLog(@"section tapped");

}

kunal prasad 26 October 2021

. . .

Create Single Expanded TableView in iOS.

Single Expanded Table View

Leave a Comment Cancel Reply

Message Sent!