How to add uibutton dynamically and have elements below move down to make space

Question

The idea is user can click a button Add Country, Country picker will come up, and whatever user selects from picker will be added as label/buttons (USA delete) under Add Country button. These new delete buttons, if clicked will remove themselves and their label.

I can already get the value from Country picker and create a button using the code from here How do I create a basic UIButton programmatically?

My problem is the button is just being positioned on top of existing elements. I would like created buttons to be under the Add Country button or under previously created buttons. Whatever element was previously below Add Country button should move down.

I don't even know what search terms I should use to google this. I've thought of using uitableview to contain the newly created buttons and it would expand somehow but I've had no luck with this either. I am using storyboard by the way.

EDIT: Added relevant code:

    -(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
    // get text of selected option
    NSString *pickedText;
    if ([pickerView tag] == 201) {
        pickedText = [arrCountries objectAtIndex:row];
    }
    else if([pickerView tag] == 202) {
        pickedText = [arrLanguages objectAtIndex:row];
    }

    // create button
    UIButton *countryButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [countryButton addTarget:self
                      action:@selector(removeCountry:)
            forControlEvents:UIControlEventTouchUpInside];
    [countryButton setTitle:pickedText forState:UIControlStateNormal];
    countryButton.frame = CGRectMake(0, 210.0, 160.0, 40.0);
    [self.view addSubview:countryButton];

    // hide picker
    [countryPicker setHidden:YES];
    [languagePicker setHidden:YES];

}

- (void)removeCountry:(UIButton *)countryButton
{
    [countryButton removeFromSuperview];
}

EDIT2: Updated code where elements are moving down except for previously dynamically added button.

// create button
    UIButton *countryButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [countryButton addTarget:self
                      action:@selector(removeCountry:)
            forControlEvents:UIControlEventTouchUpInside];
    [countryButton setTitle:pickedText forState:UIControlStateNormal];

    CGRect newFrame = addCountryButton.frame;
    newFrame.origin.y = newFrame.origin.y + addCountryButton.frame.size.height + countryButton.frame.size.height;
    countryButton.frame = newFrame;

    [self.view addSubview:countryButton];

    // move elements down
    [elementsBelowAddCountry enumerateObjectsUsingBlock:^(id obj, BOOL *stop) {
        CGRect newFrame = [obj frame];
        newFrame.origin.y = newFrame.origin.y + countryButton.frame.size.height;
        [obj setFrame:newFrame];
        NSLog(@"object %@", obj);

    }];

    [elementsBelowAddCountry setByAddingObject:countryButton]; 
    // this doesn't work. new countryButton is set on top of previous countryButton

score 1 · Accepted Answer · answered Feb 11 '12 at 14:53

I like the tableView option as well, it is pretty clean. Here are two more alternatives:

You can create an exact copy (B) of your view (A) in the storyboard, including the new subview (countryButton) in B with everything else moved down. Then when user selects to add country in A, transition (segue) to B with a fade (not a confusing push). The maintenance problem is that anytime you update view A you'll have to remember to update B as well. Once nice thing with this option is that you can change the spacing between lines if you want (so as to not move anything off screen).

Another single-view alternative is to maintain a set of all the items you want to move if the addCountry is clicked (build the list in viewDidLoad). When selected, enumerate the objects with enumerateObjectsUsingBlock: with something like this:

CGRect newFrame = self.frame;
newFrame.origin.y = newFrame.origin.y + countryButton.frame.size.height + 10;
self.frame = newFrame;

If countryButton is deleted, do the same thing except decrease the y.

I kind of like the 2nd option. This is good too because if you put the enumeration into an animate block it will look slick.

Enjoy,

Damien

Thanks, I'm trying out the second option. It's working for the first added button, elements below are moving down. But for the second added button, how do I add it to the set so that it also moves down? Updated code is in my question. — Cekk, Feb 11 '12 at 16:54
I think we have an easy one: do elementsBelowAddCountry = [elementsBelowAddCountry setByAddingObject:countryButton]; The way you have it above doesn't modify the set. — Damien Del Russo, Feb 11 '12 at 17:09

score 0 · Answer 2 · answered Feb 11 '12 at 14:19

UIButton *yourOriginalButtom;

UIButton *newButton = [[UIButton alloc] initWithFrame:yourFrame]; /* or use UIButton *newButton = [UIButton buttonWithType:UIButtonTypeCustom]; or UIButtonTypeRoundedRect */
newButton.center = CGPointMake(yourOriginalButtom.center.x, yourOriginalButtom.center.y+newButton.frame.size.height/2 + 15);
[newButton setTitle:@"New button" forState:UIControlStateNormal];
newButton.backgroundColor = [UIColor whiteColor]; // this will only work on custom buttons
[self.view addSubview:newButton];

Thanks but it seems this code only works to make the delete buttons go down. But what about the element that was previously under the Add Country button, in this case, Add Language. — Cekk, Feb 11 '12 at 15:31

score 0 · Answer 3 · answered Feb 11 '12 at 14:28

0

i can suggest two ways for you to do this :

the simplest way is to add it on tableview so each time user add a country you make a reload for the table data so it will appear on the table immediately and i prefer this one since the table view is support editing and delete rows functions.
you can store the y point for the last control (in your case the label) so next time the user add a country its easy to calculate where should be the frame of next label.

answered Feb 11 '12 at 14:28

Malek_Jundi

6,140
2
27
36

If I add a tableview, will it actually expand? It seems it would stay its own size no matter how many rows it contains? – Cekk Feb 11 '12 at 15:42

How to add uibutton dynamically and have elements below move down to make space

3 Answers3