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

Answer 1

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