Resize subviews of a UIView

Question

I'm trying to resize subviews (UIImageView) inside a subview, but I'can deal with it.

I've a UIView which contain five UIImageViews as subviews, side by side: the UIView has a width of 400 px, and each subview has a width of 80 px (their xOrigins are 0, 80, 160,...).

How can I resize the UIVIew to 800 px width and resize automatically its subviews to 160 px width and xOrigins at 0, 160, 320,...?

Different conbinations of UIViewAutoresizingFlexibleHeight, UIViewAutoresizingFlexibleWidth, UIViewAutoresizingFlexibleLeftMargin, UIViewAutoresizingFlexibleRightMargin, UIViewAutoresizingFlexibleTopMargin, UIViewAutoresizingFlexibleBottomMargin haven't solved my problem.

Any help?

CODE: UIView *mainView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 400, 200)]; mainView.autoresizesSubviews = YES; [self.view addSubview:mainView];

UIImageView *view1 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 80, 200)];
view1.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin;
view1.backgroundColor = [UIColor color1];
[mainView addSubview:view1];

UIImageView *view2 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 80, 80, 200)];
view2.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin;
view2.backgroundColor = [UIColor color2];
[mainView addSubview:view2];

UIImageView *view3 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 160, 80, 200)];
view3.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin;
view3.backgroundColor = [UIColor color3];
[mainView addSubview:view3];

UIImageView *view4 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 240, 80, 200)];
view4.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin;
view4.backgroundColor = [UIColor color4];
[mainView addSubview:view4];

UIImageView *view5 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 320, 80, 200)];
view5.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin;
view5.backgroundColor = [UIColor color5];
[mainView addSubview:view5];

Answer 1

You're using fixed width when you go CGRectMake, you should make the values relative to each other like this:

@interface ViewController ()
{
    UIView *mainView;
}

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    mainView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 400, 200)];
    mainView.backgroundColor = [UIColor grayColor];

    UIImageView *view1 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 80, 200)];
    view1.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin;
    view1.backgroundColor = [UIColor redColor];
    [mainView addSubview:view1];

    UIImageView *view2 = [[UIImageView alloc] initWithFrame:CGRectMake(view1.frame.origin.x + view1.frame.size.width, 0, view1.frame.size.width, view1.frame.size.height)];
    view2.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin;
    view2.backgroundColor = [UIColor greenColor];
    [mainView addSubview:view2];

    UIImageView *view3 = [[UIImageView alloc] initWithFrame:CGRectMake(view2.frame.origin.x + view2.frame.origin.y, 0, view1.frame.size.width, view1.frame.size.height)];
    view3.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin;
    view3.backgroundColor = [UIColor blueColor];
    [mainView addSubview:view3];

    UIImageView *view4 = [[UIImageView alloc] initWithFrame:CGRectMake(view3.frame.origin.x + view3.frame.size.width, 0, view1.frame.size.width, view1.frame.size.height)];
    view4.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin;
    view4.backgroundColor = [UIColor yellowColor];
    [mainView addSubview:view4];

    UIImageView *view5 = [[UIImageView alloc] initWithFrame:CGRectMake(view4.frame.origin.x + view4.frame.size.width, 0, view1.frame.size.width, view1.frame.size.height)];
    view5.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin;
    view5.backgroundColor = [UIColor purpleColor];
    [mainView addSubview:view5];

    [self.view addSubview:mainView];


    // update width of main view to 800 pixel after 2 seconds
    [self performSelector:@selector(updateWidth) withObject:nil afterDelay:2.0];
}

-(void)updateWidth
{
    CGRect newFrame = mainView.frame;

    newFrame.size.width = 800;

    mainView.frame = newFrame;

    NSLog(@"View updated");
}

That way, the view is relative to each other rather than static values. This is the result I got from doing it using the above code:

Before

After

Auto Layout Method

In case you were wondering, I've also included an auto layout method for you if you want to go that route:

@interface ViewController ()
{
    UIView *mainView;
    NSLayoutConstraint *mainViewWidthConstraint;
}

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    [self initView];

    // update width of main view to 800 pixel after 2 seconds
    [self performSelector:@selector(updateWidth) withObject:nil afterDelay:2.0];
}

-(void)initView
{
    mainView = [[UIView alloc] init];
    mainView.backgroundColor = [UIColor blackColor];
    mainView.clipsToBounds = YES;
    mainView.translatesAutoresizingMaskIntoConstraints = NO;

    UIImageView *view1 = [[UIImageView alloc] init];
    view1.backgroundColor = [UIColor redColor];
    view1.translatesAutoresizingMaskIntoConstraints = NO;


    UIImageView *view2 = [[UIImageView alloc] init];
    view2.backgroundColor = [UIColor blueColor];
    view2.translatesAutoresizingMaskIntoConstraints = NO;


    UIImageView *view3 = [[UIImageView alloc] init];
    view3.backgroundColor = [UIColor yellowColor];
    view3.translatesAutoresizingMaskIntoConstraints = NO;


    UIImageView *view4 = [[UIImageView alloc] init];
    view4.backgroundColor = [UIColor purpleColor];
    view4.translatesAutoresizingMaskIntoConstraints = NO;


    UIImageView *view5 = [[UIImageView alloc] init];
    view5.backgroundColor = [UIColor grayColor];
    view5.translatesAutoresizingMaskIntoConstraints = NO;


    [mainView addSubview:view1];
    [mainView addSubview:view2];
    [mainView addSubview:view3];
    [mainView addSubview:view4];
    [mainView addSubview:view5];

    [self.view addSubview:mainView];

    id views = @{
                 @"mainView": mainView,
                 @"view1": view1,
                 @"view2": view2,
                 @"view3": view3,
                 @"view4": view4,
                 @"view5": view5
                 };

    mainViewWidthConstraint = [NSLayoutConstraint constraintWithItem:mainView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeWidth multiplier:1.0 constant:400];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[mainView]" options:0 metrics:nil views:views]];

    // main view constraint
    [self.view addConstraint:mainViewWidthConstraint];

    // subviews constraints
    [mainView addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:mainView attribute:NSLayoutAttributeWidth multiplier:1.0/5.0 constant:0.0]];

    [mainView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[view1][view2(==view1)][view3(==view1)][view4(==view1)][view5(==view1)]|" options:0 metrics:nil views:views]];

    [mainView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[view1(200)]|" options:0 metrics:nil views:views]];
    [mainView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[view2(==view1)]|" options:0 metrics:nil views:views]];
    [mainView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[view3(==view1)]|" options:0 metrics:nil views:views]];
    [mainView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[view4(==view1)]|" options:0 metrics:nil views:views]];
    [mainView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[view5(==view1)]|" options:0 metrics:nil views:views]];
}

-(void)updateWidth
{
    mainViewWidthConstraint.constant = 800;

    [self.view layoutIfNeeded];

    NSLog(@"View updated");
}

Same result.