Accordian effect in a UITableView

I want to expand a cell in my table view when I select it. Initially it should look like this:

And on expanding, it should give more detail like this:

This is how I'm creating the cell initially:

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString * MyIdentifier = @"MyIdentifier";
    UITableViewCell * cell = [self.table dequeueReusableCellWithIdentifier:MyIdentifier];

    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:MyIdentifier] autorelease];
        cell.textLabel.frame = CGRectMake(0, 0, cell.textLabel.frame.size.width, 
        cell.textLabel.frame.size.height);
 }
 id key = [[articles allKeys] objectAtIndex:indexPath.section];
 cell.textLabel.text =@"TitleTitleTitle";        
 cell.detailTextLabel.text=@"DeatailDeatailDeatailDeatailDeatailDeatailDeatailDeatailDeatai";
 return cell;
}

Answers


I published a sample code at github

edit Your tabelView:cellForRowAtIndexPath: could look like this.

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString * MyIdentifier = @"MyIdentifier";
    UITableViewCell * cell = [self.table dequeueReusableCellWithIdentifier:MyIdentifier];

    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:MyIdentifier] autorelease];
        cell.textLabel.frame = CGRectMake(0, 0, cell.textLabel.frame.size.width, 
                                          cell.textLabel.frame.size.height);
    }
    id key = [[articles allKeys] objectAtIndex:indexPath.section];
    cell.textLabel.text =@"TitleTitleTitle";        
    cell.detailTextLabel.text=@"DeatailDeatailDeatailDeatailDeatailDeatailDeatailDeatailDeatai";


    //SEE MY NOTE BELOW
    if([indexPath isEqual:selectedIndexPath]){
        cell.textLabel.numberOfLines=0;
        cell.detailTextLabel.numberOfLines=0;

        CGSize constraintSize;
        constraintSize.width = cell.textLabel.frame.size.width;
        constraintSize.height = MAXFLOAT;
        cell.textLabel.frame = [cell.textLabel.text sizeWithFont:cell.textLabel.font constrainedToSize:constraintSize];

        constraintSize.width = cell.detailTextLabel.frame.size.width;
        constraintSize.height = MAXFLOAT;
        cell.detailTextLabel.frame = [cell.detailTextLabel.text sizeWithFont:cell.detailTextLabel.font constrainedToSize:constraintSize];
    } else {
        cell.textLabel.numberOfLines=1;
        cell.detailTextLabel.numberOfLines=1;
    }
    return cell;
}

BUT You will also need the height of the cell by dynamic in tableView:heightForRowAtIndexPath:, so you should refactor the sizing parts into a helper methods, that writes the sizes of the 2 labels and the height of the cell to ivars, call the method from tableView:heightForRowAtIndexPath:, use the cell height there and the labels sizes in tabelView:cellForRowAtIndexPath:


Need Your Help

Get eye, target and up vectors from view matrix

vector matrix directx rotation direct3d

In Direct3D, I'm using the Matrix.LookAtLH function to compute the view matrix.

Put single quotes in string javascript

javascript html string

Currenly i use javascript to bind a table dynamically..

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.