Relocating UIImageViews on a View when some are hidden

Question

I have a UIView with some images in a row that are going to be hidden in order to the features that I received. I have been searching around and I have not found the way to relocate these UIImageView in order to center all of them.

I mean if I have the following row:

|X||X||X||X||X||X||X|

and I hide the second and the fifth element I would like to show

   |X||X||X||X||X|

but I get

|X|   |X||X|   |X||X|

Is there any UIView property to control that or I have to do it manually creating different UIViews or adding the elements programmatically on my code? Now I am only using the property hidden of my UIImageView elements.

Thanks in advance!

Well I think I should do it programmatically as I've seen in that post http://stackoverflow.com/questions/3175816/show-hide-iphone-ui-elements-based-on-prefs-how-to, don't think so? — Kasas, May 07 '12 at 23:02

score 2 · Answer 1 · answered May 08 '12 at 00:29

Try this on for size! ;-)

ViewController.h

#define BUFFER 10
#define WIDTH 90
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
@property (strong, nonatomic) NSMutableArray *ViewArray;
- (IBAction)hideViews:(id)sender;
- (void)centerVisibleViews;
@end

ViewController.m

#import "ViewController.h"
@implementation ViewController
@synthesize ViewArray;
- (void)viewDidLoad {
    [super viewDidLoad];
    NSMutableArray *colorArray = [NSMutableArray array];
    [colorArray addObject:[UIColor redColor]];
    [colorArray addObject:[UIColor orangeColor]];
    [colorArray addObject:[UIColor yellowColor]];
    [colorArray addObject:[UIColor greenColor]];
    [colorArray addObject:[UIColor blueColor]];
    [colorArray addObject:[UIColor purpleColor]];
    [colorArray addObject:[UIColor blackColor]];
    [self setViewArray:[NSMutableArray array]];
    for (int i = 0; i < 7; i = i + 1) {
        UIView *view = [[UIView alloc] initWithFrame:CGRectMake(BUFFER + ((WIDTH + BUFFER) * i), BUFFER, WIDTH, WIDTH)];
        [view setBackgroundColor:[colorArray objectAtIndex:i]];
        [[self ViewArray] addObject:view];
        [[self view] addSubview:view];
    }
}
- (IBAction)hideViews:(id)sender {
    for (int i = 0; i < [[self ViewArray] count]; i = i + 1) {
        if (i == 1 || i == 4) {
            [(UIView *)[[self ViewArray] objectAtIndex:i] setHidden:YES];
        }
    }
    [self centerVisibleViews];
}
- (void)centerVisibleViews {
    int visibleViews = 0;
    for (int i = 0; i < [[self ViewArray] count]; i = i + 1) {
        if (![(UIView *)[[self ViewArray] objectAtIndex:i] isHidden]) {
            visibleViews = visibleViews + 1;
        }
    }
    float totalWidth = (BUFFER * 2) + (WIDTH * [[self ViewArray] count]) + (BUFFER * ([[self ViewArray] count] - 1));
    float visibleWidth = (BUFFER * 2) + (WIDTH * visibleViews) + (BUFFER * (visibleViews - 1));
    // Make it sexy with an animation!!!
    [UIView animateWithDuration:1.0
                     animations:^{
                         float offset = (totalWidth - visibleWidth) / 2.0;
                         for (int i = 0; i < [[self ViewArray] count]; i = i + 1) {
                             UIView *thisView = [[self ViewArray] objectAtIndex:i];
                             if (![thisView isHidden]) {
                                 [thisView setFrame:CGRectMake(offset, BUFFER, WIDTH, WIDTH)];
                                 offset = offset + WIDTH + BUFFER;
                             } 
                         }
                     }
     ];

}
@end

Only thing to do is add a button to the main view and tie it to the IBOutlet. Nice and pretty on my iPad simulator.

Thanks for your help, I have modified a couple of things and I made it work... I will post my solution ;) — Kasas, May 08 '12 at 09:04

score 2 · Accepted Answer · answered May 08 '12 at 09:06

The final solution after modifying @mbm30075 code is the following:

- (void)centerVisibleViews{

int visibleViews = 0;
for (int i = 0; i < [[self imgViews] count]; i = i + 1) {
    if (![(UIView *)[[self imgViews] objectAtIndex:i] isHidden]) {
        visibleViews = visibleViews + 1;
    }
}
if(visibleViews==0) return;

float screenWidth = imgAnimals.superview.bounds.size.width;
//float maxWidthImage = screenWidth / visibleViews;

float imgWidth = [imgAnimals frame].size.width;

// Make it sexy with an animation!!!
[UIView animateWithDuration:1.0
                 animations:^{
                     float offset = screenWidth / 2.0 - (visibleViews * imgWidth / 2.0);
                     for (int i = 0; i < [[self imgViews] count]; i = i + 1) {
                         UIView *thisView = [[self imgViews] objectAtIndex:i];
                         if (![thisView isHidden]) {
                             CGRect rect = [thisView frame];
                             rect.origin = CGPointMake(offset, 0);
                             [thisView setFrame:rect];
                             offset = offset + rect.size.width;
                         } 
                     }
                 }
 ];

}

The thing is that I wanted to use the specific width I had assigned to the UIImageViews and just center all together in the middle. I hope this help anyone!

Thanks a lot!

Relocating UIImageViews on a View when some are hidden

2 Answers2