UITableView Grouped - Tutorial Request

Discussion in 'iOS Development' started by Steaps, Jan 17, 2009.

  1. Steaps

    Steaps New Member

    Joined:
    Oct 24, 2007
    Messages:
    5,074
    Likes Received:
    41
    Device:
    iPod touch
    Just wondering if anyone had, or could make a simple tutorial on a UITableView grouped. All i am looking for is:
    How to create the table, add text to some cells, create a second "group"
    • How to create the table.
    • Add text to the cells.
    • Create multiple "groups".
    • Create a button linking to an action.

    Thanks, Stephen.4.
  2. Spreche

    Spreche Member

    Joined:
    Dec 27, 2007
    Messages:
    164
    Likes Received:
    0
    Device:
    iPhone
    For this code you will need 2 instances variables:
    Code:
    NSArray *contentArray;
    NSArray *sectionArray;
    
    Code:
    - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    	
    	sectionArray =  [[NSArray arrayWithObjects:@"Home Team", @"Away Team", nil] retain];
    	
    	return [sectionArray count];
    	
    }
    
    The code above sets the number of sections in the table view. We create an array which will be used later on as well. For right now its used to set the number of sections by taking the 'count' of the array and setting that number to the number of sections. In this case it will return 2.

    Code:
    - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
    	
    	NSString *sectionHeader = nil;
    	
    	if(section == 0) {
    		sectionHeader = @"Home Team";
    	}
    	if(section == 1) {
    		sectionHeader = @"Away Team";
    	}
    	
    	
    	return sectionHeader;
    }
    
    For the code above you are setting the title for the Header of each section you have created. In this case we have created 2 sections. We first create an empty NSString. The NSString is what will be returned to the function. We use the 'if statement' to determine each header title for each section. This literally means that "If the section number is 0, then the section header title will be 'Home Team. If the section number is 1, then the section header title will be 'Away Team.'"

    Code:
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    	
    	if(section == 0) {
    		contentArray = [[NSArray arrayWithObjects:@"Name", @"Color", nil] retain];
    	}
    	if(section == 1) {
    		contentArray = [[NSArray arrayWithObjects:@"Name", @"Color", nil] retain];
    	}
    	
    	//contentArray = [[NSArray arrayWithObjects:@"Home", @"Away", @"Other", @"Other", nil] retain];
    	return [contentArray count];
    }
    
    This piece of code will set the number of rows for each of the sections. It is not setting the text of the cells. So, for each section we are creating an array which will be used to set the number of rows for each section. The arrays will be used to set the text in the cells, but they are not doing so in this function.

    Code:
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    	
    	
    	static NSString *identity = @"MainCell";
    	UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identity];
    	
    	if(cell == nil)
    	{
    		cell = [[[UITableViewCell alloc] initWithFrame:CGRectMake(0.0, 0.0, 0.0, 0.0) reuseIdentifier:identity] autorelease];
    	}
    	cell.text = [contentArray objectAtIndex:indexPath.row];
    	
    	return cell;
    }
    
    This is where we set the cell text and how the table cell looks. If there is no cell created then it initiates it and makes the frame for it with the if statement. After that, then we set the cell's text with the content array we created while setting the number of rows. With the 'cell.text' piece of code it sets the cell's text to the string of text in the array, that matches the current row the cell is being made at.

    I'm sure there are a few flaws, but if you have any problems or questions, feel free to ask.
  3. Nickll9009

    Nickll9009 New Member

    Joined:
    Sep 19, 2007
    Messages:
    1,367
    Likes Received:
    8
    Device:
    iPod touch
    Here's a sample project that uses a grouped style UITableView.

    Attached Files:

  4. Steaps

    Steaps New Member

    Joined:
    Oct 24, 2007
    Messages:
    5,074
    Likes Received:
    41
    Device:
    iPod touch
    Sweet, thanks to the both of you. I will look at them tomorrow.
  5. NolesFans

    NolesFans New Member

    Joined:
    Sep 23, 2008
    Messages:
    404
    Likes Received:
    0
    Device:
    iPod touch
    I am going to check with this tomorrow too.
  6. Steaps

    Steaps New Member

    Joined:
    Oct 24, 2007
    Messages:
    5,074
    Likes Received:
    41
    Device:
    iPod touch
    Thanks, i've got it working, sort of. I used your code exactly, apart from changing the strings.

    First off, here is my section of code (Click the picture for full size view):

    Please Register or Log in to view images



    But for some reason, it takes the array from the first section and sets it as the cells for the second section. (I think i said that right):

    Please Register or Log in to view images



    Another thing, is there a way i can change the text size of the cell, so it all fits in?

    EDIT: Curthard fixed the first problem with the sections. But do you know how to change the text size of the cell so it all fits in?

    Thanks, Stephen.4.
  7. Spreche

    Spreche Member

    Joined:
    Dec 27, 2007
    Messages:
    164
    Likes Received:
    0
    Device:
    iPhone
    I would say trying to use something like this right after you set the cell's text:
    Code:
    cell.lineBreakMode = UILineBreakModeWordWrap;
    
    I'm not quite sure if you can do anything with the size of the font. If you're using the SDK then I would suggest doing some research in the Documention. To get there you have to go to 'Help -> Documentation.'
  8. Steaps

    Steaps New Member

    Joined:
    Oct 24, 2007
    Messages:
    5,074
    Likes Received:
    41
    Device:
    iPod touch
    I believe i need to create a UILabel an put it into the array then into the cell.
    Do you know how to put a label inside a cell? I have tried this:
    Code:
    	label.text = @"This text is too long to fit inside my cell :(.";
    
    	contentArray = [NSMutableArray new];
    	NSMutableArray * a = [NSMutableArray new];
    	[a addObject:@"Placeholder"];
    	[a addObject:@"Placeholder"];
    	[contentArray addObject:a];
    	
    	 a = [NSMutableArray new];
    	[a addObject:@"Placeholder"];
    	[contentArray addObject:a];
    
    	 a = [NSMutableArray new];
    	[a addObject:label];
    	[contentArray addObject:a];
    
    But it crashes upon opening.
  9. Spreche

    Spreche Member

    Joined:
    Dec 27, 2007
    Messages:
    164
    Likes Received:
    0
    Device:
    iPhone
    I figured it out, but the label takes up the whole table cell and looks like a rectangle instead of a rounded one. Try this, instead of setting the cell's text.

    Code:
    	//cell.text = [contentArray objectAtIndex:indexPath.row];
    	UILabel *theLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.0, cell.contentView.frame.size.width, cell.contentView.frame.size.height)];
    	//UILabel *theLabel = [[UILabel alloc] initWithFrame:CGRectZero];
    	//theLabel.minimumFontSize = 5.0f;
    	theLabel.numberOfLines = 3.0;
    	theLabel.text = @"This text is tooooooo long to fit into the cell";
    	//theLabel.backgroundColor = [UIColor clearColor];
    	//theLabel.contentMode = UIViewContentModeScaleToFill;
    	cell.backgroundView = theLabel;
    
  10. Steaps

    Steaps New Member

    Joined:
    Oct 24, 2007
    Messages:
    5,074
    Likes Received:
    41
    Device:
    iPod touch
    I don't have a clue where to put that

    Please Register or Log in to view images

    . Where does it go? I tried putting it in the "viewDidLoad" action but no luck, errors.

Share This Page