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.

Solution 1

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.

Solution 2

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.

Solution 3

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.

Comments

[Michael Dierkes]

hi, thanks for your responses. I had one crack at this but was not getting anything appearing. I'll have another go when I get the chance, I'm sorry I wasn't able to reply sooner (or dedicate enough time to work through the issues I'm still getting). I'll try to do so ASAP.

[Parth Bhatt]

what could be done if we dont have button title to differentiate the buttons and they do not have any text. In my case I am just using the images instead of button title. What can be done in such a case?

[Michael Dierkes]

If you are using images then I assume that you know the size of them. In this case you can simply place them at regular intervals. The above code uses fontSize.width to work out offset. You should simply be able to use the width of your image.

[Ganesh G]

When you move your cell up or down then the above button recreates again.

[srinivas]

Create the button outside the function and add to the cell after checking if the button exists. If there are many cells maintain a map or index of buttons.