Question

I’ve got a simple form in my iPhone app. The form is laid out and managed via IB and the typical wiring (i.e. I am not creating this form programmatically).

One of the fields (and its associated label) should be shown only if a particular preference is set.

I could set the field and label’s alpha to 0 and disable them in this case. The problem is that the fields below this now-invisible field would remain in the same place and there would be a big blank area. My goal is to have the screen look normal in either state.

Is there a way to programmatically remove (or add) UI elements and have those below shift up or down to make room? Or should I consider making a whole other NIB file for this second case? (and, if I do that, is there an easy way to share the common elements?)

Current UI with both controls shown

With Both http://img.skitch.com/20100704-bm41w6wtqkdgh1da99ihb7g32d.jpg

UI with optional control hidden via alpha == 0

Using Alpha to Hide http://img.skitch.com/20100704-q2sxrj3nf6ya68wp6ubn86n2pa.jpg

Desired UI with optional control hidden

Desired when hidden http://img.skitch.com/20100704-82r876pgctee8gb51ujg1dwj7k.jpg

Answer 1

When every UI element is linked to a IBOutlet pointer, e.g.

@property (nonatomic, retain) IBOutlet UITextField *field_a;
@property (nonatomic, retain) IBOutlet UITextField *field_b;
@property (nonatomic, retain) IBOutlet UITextField *field_c;
// ...

You can test each element’s visibility by:

if (field_a.hidden) {
    // ...
} else {
    // ...
}

And move them around:

CGPoint pt = field_a.center;
pt.y -= 60;
field_a.center = pt;

Or by some animation:

CGPoint position = field_a.center;
position.y -= 60;
[UIView beginAnimations:@"MoveUp" context:NULL];
[UIView setAnimationDuration:0.5];
field_a.center = position;
[UIView commitAnimations];  

To hide an element:

field_a.hidden = YES;

To show an element:

field_a.hidden = NO;