Add Image and Caption Text to Three20 Table section using TTSectionedDataSource

Question

I am trying to create table using TTTableViewController. I want to display an image in the section header along with some caption text, something similar to what instagram and many other application does. I tried using the sample from TTNavigatorDemo to display data from TTSectionedDatasource, (I am not sure if this is the right way to do it, please suggest some better way if you know any). It contains section name/headers as regular strings and data as TTTableViewItem. I tried implementing <UITableViewDelegate> protocol and achieved it using viewForHeaderInSection method, now the data is separated from section, Is there any better way using Three20 through which I can pass on my Header/Section view and TableItemView along in a datasource as it would allow me to implement the TTTableViewDragRefreshDelegate, which I was not able to implement when implementing the <UITableViewDelegate> protocol in my class.

My class declaration right now, looks something like

@interface ImageTable : TTTableViewController <UITableViewDelegate> { }

I would like to show section headers with image and text like:

:

I am currently using the TTNavigatorCode to populate the data in my Table which is:

   self.dataSource = [TTSectionedDataSource dataSourceWithObjects:
                               @"Food"
                               [TTTableViewItem itemWithText:@"Porridge" URL:@"tt://food/porridge"],
                               [TTTableTextItem itemWithText:@"Bacon & Eggs" URL:@"tt://food/baconeggs"],
                               [TTTableTextItem itemWithText:@"French Toast" URL:@"tt://food/frenchtoast"],
                               @"Drinks",
                               [TTTableTextItem itemWithText:@"Coffee" URL:@"tt://food/coffee"],
                               [TTTableTextItem itemWithText:@"Orange Juice" URL:@"tt://food/oj"],
                               @"Other",
                               [TTTableTextItem itemWithText:@"Just Desserts" URL:@"tt://menu/4"],
                               [TTTableTextItem itemWithText:@"Complaints" URL:@"tt://about/complaints"],
                               @"Other",
                               [TTTableTextItem itemWithText:@"Just Desserts" URL:@"tt://menu/4"],
                               [TTTableTextItem itemWithText:@"Complaints" URL:@"tt://about/complaints"],
                               nil];

I was able to make something similar by implementing the method:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
  return myCustomView;    
}

But since my data is coming from the Model Class and I want my generate views and add them to datasource in a formatted way. I would like to know if there is a way using Three20 through which I specify an Array of my data for sections and another array for corresponding data under the sections?

Your help is highly appreciated

Thanks

Answer 1

Create Delegate FOOTableDelegate.h

@interface FOOTableDelegate : TTTableViewDragRefreshDelegate 
{

}

- (UIView*) createHeaderView:(FOODataSource *)fDataSource forSectionID:(NSString *)secID;

@end

In FOOTableDelegate.m file

- (UIView*)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
 {
    if (tableView.style == UITableViewStylePlain) 
        {
        if ([tableView.dataSource respondsToSelector:@selector(tableView:titleForHeaderInSection:)]) 
                {
            NSString* title = [tableView.dataSource tableView:tableView titleForHeaderInSection:section];
            if (title.length > 0) 
                        {
                UIView* header = [_headers objectForKey:title];

                if (nil != header)
                                {
                    header.alpha = 1;

                } 
                                else 
                                {
                    if (nil == _headers) 
                                        {
                        _headers = [[NSMutableDictionary alloc] init];
                    }

                    header = [self createHeaderView:tableView.dataSource forSectionID:title];
                    [_headers setObject:header forKey:title];
                }
                return header;
            }
        }
    }
    return nil;
}

- (UIView*) createHeaderView:(FeedDataSource *)fDataSource forSectionID:(NSString *)secID
{

     //do some code for header View

    return View;

}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    //return height for the Section Header
    return height;
}

This will help you to solve your problem