Adding buttons dynamically to a uitableviewcell - iPhone app

Question

I have a verb conjugation app that displays verb translations in the first cell of a table. At present the translation list is just a string (comma-separated list) but I'd like to change it to have clickable buttons. I had a play around adding buttons to the cell view without too much success but my only experience with custom cells has been using specific positioning so I'm unsure as to how to achieve a dynamic list of buttons (varying widths) within a cell.

Any help greatly appreciated.

Cheers.

Answer 1

Make a UIView object. Set your UIButton objects as subviews of this parent view.

Once you have that, you can add this parent view to the cell's contentView property.

In the -tableView:cellForRowAtIndexPath: delegate method, you would generate the parent view (and the number and type of buttons inside) based on some conditional state, before adding it to the cell's contentView.

As for doing this programmatically, as soon as some condition changes, run [tableView reloadData] or similar methods to refresh the table view and its cells.

Answer 2

Do following

-(CGRect)placeAButton:(NSString*)textFromField withCell:(UITableViewCell*)cell { CGSize theSize; CGSize constraintSize;

// Create a button and add as subview to cell
// Get coordinates to place the button

UIButton *button = [[UIButton buttonWithType:UIButtonTypeRoundedRect] retain];

button.titleLabel.font    = [UIFont systemFontOfSize:MEDIUM_FONT_SIZE];;
button.titleLabel.lineBreakMode  = UILineBreakModeTailTruncation;
button.contentVerticalAlignment  = UIControlContentVerticalAlignmentCenter;
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;

[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[button setTitle:textFromField forState:UIControlStateNormal];

UIImage *buttonBkground;
buttonBkground = [UIImage imageNamed:@"blueButton.png"];
UIImage *newImage = [buttonBkground stretchableImageWithLeftCapWidth:12.0 topCapHeight:0.0];
[button setBackgroundImage:newImage forState:UIControlStateNormal];
[button addTarget:self action:@selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside];
[cell.contentView addSubview:button];

[self.tableView reloadData] }

You'll have to take care of cell width, height etc while creating buttons dynamically.

Answer 3

I copped out on this one due to time constraints. I've stuck with the text-based list of translations but made the cell clickable. If there is one translation the click jumps straight to results for it. If there are multiple it brings up an intermediate tableview of all of them with each one being clickable.

Apologies for not pursuing your suggested solutions further.

Answer 4

I just did this for my new iPad app so I thought I'd paste the code.

// NOTE - This is within a loop     
// Add the translation as a button
    UIButton *translationButton = [[UIButton buttonWithType:UIButtonTypeRoundedRect] retain];
    translationButton.backgroundColor = [UIColor clearColor];
    translationButton.titleLabel.font = [UIFont boldSystemFontOfSize:16];
    [translationButton setTitle:translation forState:UIControlStateNormal];
    [translationButton addTarget:self action:@selector(translationSearch:) forControlEvents:UIControlEventTouchUpInside];
    // Work out required size
    fontSize = [translationButton.titleLabel.text sizeWithFont:translationButton.titleLabel.font];      
    CGRect buttonFrame = CGRectMake(xOffset, 15, fontSize.width + 20.0, 24);
    [translationButton setFrame:buttonFrame];

    // Now set the new x Offset
    xOffset = buttonFrame.origin.x + buttonFrame.size.width + 6.0;

    [verbView addSubview:translationButton];    

Cheers.