Resize a UIView

Question

I have two UIView s, say containerView and testView . Say that the width of the testView is bigger than that of the containerView . In such case, when I add testView as subview to the containerView , there comes my problem. The frames of the testView goes beyond the bounds of the containerView . Here is my code -

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

    UIView *containerView = [[UIView alloc] initWithFrame:CGRectMake(60, 154, 200, 200)];
    containerView.backgroundColor = [UIColor grayColor];
    containerView.clipsToBounds = NO;

    UIView *testView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 260, 100)];
    testView.backgroundColor = [UIColor yellowColor];
    testView.layer.borderWidth = 3;
    testView.layer.borderColor = [[UIColor blackColor] CGColor];
    testView.center = CGPointMake(containerView.frame.size.width / 2, containerView.frame.size.height / 2);

    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(15, 25, 230, 50)];
    label.text = @"This is a Label to test the size";

    [testView addSubview:label];
    [containerView addSubview:testView];
    [self.view addSubview:containerView];
}

Output to this code is -

When containerView.clipsToBounds = YES; , the output is -

But what I exactly need is - (Edited image)

When I add a testView whose width/height is bigger than its superview- containerView , the frame of the testView (including children) should be adjusted so that, it fits perfectly inside its superview.

I welcome your ideas..!

Answer 1

The modern way to do this is to create the view, add constraints to the view that establish the relationship to the containing view and then add that view as a subview.

That way you aren't messing about with the frames, and resizing with rotation will be handled for you.

Edited to add

Here is some example code to do something similar to what you are asking for

- (void)viewDidLoad {
    [super viewDidLoad];

    // Create the containing view
    UIView *greyView = [[UIView alloc] initWithFrame:CGRectZero];
    greyView.backgroundColor = [UIColor grayColor];
    greyView.translatesAutoresizingMaskIntoConstraints = NO;

    [self.view addSubview:greyView];

    // Create the label to go into the containing view
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectZero];
    label.translatesAutoresizingMaskIntoConstraints = NO;
    label.text = @"Example Text";

    label.backgroundColor = [UIColor yellowColor];

    [greyView addSubview:label];

    NSDictionary *bindings = NSDictionaryOfVariableBindings(greyView, label);

    // Set the constraints for the greyView relative to it's superview - to cover completely
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[greyView]|" options:NSLayoutFormatDirectionLeadingToTrailing metrics:nil views:bindings]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[greyView]|" options:NSLayoutFormatDirectionLeadingToTrailing metrics:nil views:bindings]];

    // Set the constraints for the label to be pinned equally with padding
    [greyView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(30)-[label]-(30)-|" options:NSLayoutFormatDirectionLeadingToTrailing metrics:nil views:bindings]];
    [greyView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(30)-[label]-(30)-|" options:NSLayoutFormatDirectionLeadingToTrailing metrics:nil views:bindings]];

}

If you want to see it in action and tweak the constraints yourself, I've uploaded a simple example project that you can use.

Answer 2

Why do you set the width of your testView (yellow one) bigger than its container and complain after that it's bigger ? You should just do

UIView *containerView = [[UIView alloc] initWithFrame:CGRectMake(60, 154, 200, 200)];
[...]
UIView *testView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 180, 100)]; // 180 not 260
[...]
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(15, 25, 150, 50)]; // 150 not 230

Or use auto-layout like suggested.