I’m trying to create an app similar to the one in the screenshot:
https://i.stack.imgur.com/Xhi5Z.jpg
It looks like a table view with contents revealed under the cell on tap. Does anyone know how to do this. I’ve managed to to create a cell that have the content I want to reveal and restrict the height of the cell when the table is loaded. On tap the height just increases. But this is not how I want it. Also the content to be revealed could be of any height so i need to resize the cell accordingly.
Perhaps there is another way of doing what I’m trying to achieve?
Any inputs would be greatly appreciated.
EDIT:
Ok I’ve got this to work to an extent but there are certain issues with this:
1) Some of the rows just show the data from previous rows
2) Expanding and Collapsing the cell changes content, when it should just show/hide
My code:
#import "ViewController.h"
#import "Data.h"
@interface ViewController ()
@end
@implementation ViewController {
NSArray *data;
NSInteger selectedIndex;
NSIndexPath *selectedCellIndexPath;
}
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
selectedIndex = -1;
self.navigationItem.title = @"Test App";
UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle:@"Back" style:UIBarButtonItemStyleBordered target:nil action:nil];
[[self navigationItem] setBackBarButtonItem:backButton];
// Create Data array
Data *data1 = [Data new];
data1.text = @"Abhijit ipsum dolor sit amet, consectetur adipiscing elit.";
data1.translation = @"AbhijitDE ipsum dolor sit amet, consectetur adipiscing elit.";
Data *data2 = [Data new];
data2.text = @"Anurag ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
data2.translation = @"AnuragDE ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
Data *data3 = [Data new];
data3.text = @"Chetan ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
data3.translation = @"ChetanDE ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
Data *data4 = [Data new];
data4.text = @"Eric ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
data4.translation = @"EricDE ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
Data *data5 = [Data new];
data5.text = @"Neha ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsumiraj dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
data5.translation = @"NehaDE ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
Data *data6 = [Data new];
data6.text = @"Nilesh ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
data6.translation = @"NileshDE ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
Data *data7 = [Data new];
data7.text = @"Niraj ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsumiraj dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
data7.translation = @"NirajDE ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
data = [NSArray arrayWithObjects:data1, data2, data3, data4, data5, data6, data7, nil];
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return data.count;
}
// This just a convenience function to get the height of the label based on the comment text
-(CGFloat)getLabelHeightForIndex:(NSString *)string
{
CGSize maximumSize = CGSizeMake(320, 10000);
CGSize labelHeightSize = [string sizeWithFont:[UIFont fontWithName:@"Helvetica" size:14.0f] constrainedToSize:maximumSize lineBreakMode:NSLineBreakByWordWrapping];
return labelHeightSize.height + 10;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UILabel *mainLabel, *secondLabel;
static NSString *CellIdentifier = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (!cell) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
// First label
mainLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 36.00)];
mainLabel.font = [UIFont fontWithName:@"Helvetica" size:14.0f];
mainLabel.textColor = [UIColor blackColor];
mainLabel.backgroundColor = [UIColor clearColor];
mainLabel.numberOfLines = 0;
mainLabel.lineBreakMode = NSLineBreakByWordWrapping;
// mainLabel.autoresizingMask = UIViewAutoresizingFlexibleHeight;
// mainLabel.clipsToBounds = YES;
[cell.contentView addSubview:mainLabel];
// Second label
secondLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 10.0, 320.0, 36.00)];
secondLabel.font = [UIFont fontWithName:@"Helvetica" size:14.0f];
secondLabel.textColor = [UIColor whiteColor];
secondLabel.backgroundColor = [UIColor grayColor];
secondLabel.numberOfLines = 0;
secondLabel.lineBreakMode = NSLineBreakByWordWrapping;
// secondLabel.autoresizingMask = UIViewAutoresizingFlexibleHeight;
// secondLabel.clipsToBounds = YES;
[cell.contentView addSubview:secondLabel];
}
// Get data for the current row
Data *dataContent = [data objectAtIndex:indexPath.row];
CGFloat dataTextHeight = [self getLabelHeightForIndex:dataContent.text];
mainLabel.frame = CGRectMake(0.0, 0.0, 320.0, dataTextHeight);
mainLabel.text = dataContent.text;
CGFloat dataTranslationHeight = [self getLabelHeightForIndex:dataContent.translation];
secondLabel.frame = CGRectMake(0.0, dataTextHeight + 10.00, 320.0, dataTranslationHeight);
secondLabel.text = dataContent.translation;
if(selectedIndex == indexPath.row)
{
secondLabel.hidden = YES;
}
else
{
secondLabel.hidden = YES;
}
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
// Get data for the current row
Data *dataContent = [data objectAtIndex:indexPath.row];
CGFloat dataTextHeight = [self getLabelHeightForIndex:dataContent.text];
CGFloat dataTranslationHeight = [self getLabelHeightForIndex:dataContent.translation];
if(selectedIndex == indexPath.row)
{
return (dataTextHeight + dataTranslationHeight) + 10;
}
else
{
return dataTextHeight;
}
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
// An expanded cell is clicked, minimize it
if(selectedIndex == indexPath.row)
{
selectedIndex = -1;
[tableView reloadRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];
return;
}
// If any previous cell is expanded, minimize it
if(selectedIndex >= 0)
{
NSIndexPath *previousPath = [NSIndexPath indexPathForRow:selectedIndex inSection:0];
[tableView reloadRowsAtIndexPaths:[NSArray arrayWithObject:previousPath] withRowAnimation:UITableViewRowAnimationFade];
}
// Expand the currently expanded cell
selectedIndex = indexPath.row;
NSIndexPath *currentPath = [NSIndexPath indexPathForRow:selectedIndex inSection:0];
[tableView reloadRowsAtIndexPaths:[NSArray arrayWithObject:currentPath] withRowAnimation:UITableViewRowAnimationFade];
}
@end
OK. I figured it out.
Here’s my updated code if anyone needs it: