using Autolayout maintain ratio in storyboard just like group and stretch work in ms word

Question

I would like to achieve which I'll explain with an example described as follow.

In MS Word, in a canvas, we can add several objects like arrow, circle, square etc. Then we can easily group them. Once objects are properly grouped, now matter how we scale, it is scaled as a group & gives us a perfect scaling. I wish to achieve same using Autolayout in Storyboard / xib. According to me all objects scales based on their individual constraints.

Here is an example image. enter image description here

Here is the structure of above image.

 View with white color background
      View with gray color background
           View with white color bg and on top-center
           View with white color bg and in center-center
           View with white bg and bottom left
           View with white bg and bottom right

If the top-most parent view is scaled down, every other elements in it recursively should get scaled down.

How to achieve such functionality using Autolayout?

Edit: Here - I've prepared a quick gif for the same. enter image description here

Fabio Felici · Accepted Answer

I found a solution for this problem but maybe is not the best. The idea is to change the Width and Height of the root view, calculate the percentage of Width and Height variation from the initial state and apply this to all children constraint.

In your Storyboard create a root UIView and place all UIView children inside.
You need to set 4 constraints per child and for the root View: Width, Height, Vertical space and Horizontal space.
Connect the root view, width constraint and height constraint to the UIViewController.

Code

#import "ViewController.h"

@interface ViewController ()
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *heightConstraint;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *widthConstraint;
@property (strong, nonatomic) IBOutlet UIView *rootView;
@end

@implementation ViewController{
    CGPoint dragPoint;
    CGFloat startDragWidth;
    CGFloat startDragHeight;
    NSMutableDictionary *startDragConstraints;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    UIPanGestureRecognizer *panRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(detectPan:)];
    self.rootView.gestureRecognizers = @[panRecognizer];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    startDragHeight = self.heightConstraint.constant;
    startDragWidth = self.widthConstraint.constant;
    startDragConstraints = [NSMutableDictionary dictionary];

    //I used i and j for setting an identifier on the constraint
    for (int i = 0; i < [self.rootView.subviews count]; i++)
    {
        UIView *view = self.rootView.subviews[i];
        //Looping childs Width and Height constraints
        for(int j = 0; j < [view.constraints count]; j++)
        {
            NSLayoutConstraint *constraint = view.constraints[j];
            constraint.identifier = [NSString stringWithFormat:@"%d%d", i, j];
            [startDragConstraints setObject:[NSNumber numberWithFloat:constraint.constant] forKey:constraint.identifier];
        }
    }
    //Looping childs Vertical space and Horizontal space constraints. They live in the parent view
    for (int i = 0; i < [self.rootView.constraints count]; i++)
    {
        NSLayoutConstraint *constraint = self.rootView.constraints[i];
        constraint.identifier = [NSString stringWithFormat:@"%d", i];
        [startDragConstraints setObject:[NSNumber numberWithFloat:constraint.constant] forKey:constraint.identifier];
    }
}

- (void) detectPan:(UIPanGestureRecognizer *) uiPanGestureRecognizer
{
    dragPoint = [uiPanGestureRecognizer translationInView:self.rootView];
    if(fabsf(dragPoint.x) > fabsf(dragPoint.y))
    {
        dragPoint.y = dragPoint.x;
    }
    else
    {
        dragPoint.x = dragPoint.y;
    }
    self.heightConstraint.constant = startDragHeight + dragPoint.y;
    self.widthConstraint.constant = startDragWidth + dragPoint.x;

    CGFloat heightDelta = (self.heightConstraint.constant - startDragHeight) / startDragHeight;
    CGFloat widthDelta = (self.widthConstraint.constant - startDragWidth) / startDragWidth;

    for(UIView *view in self.rootView.subviews)
    {
        for(NSLayoutConstraint *constraint in view.constraints)
        {
            float previousConstant = [[startDragConstraints objectForKey:constraint.identifier] floatValue];
            if(constraint.firstAttribute == NSLayoutAttributeWidth) //Width constraint
            {
                constraint.constant = previousConstant + previousConstant * widthDelta;
            }
            else if(constraint.firstAttribute == NSLayoutAttributeHeight) //Height constraint
            {
                constraint.constant = previousConstant + previousConstant * heightDelta;
            }
        }
    }
    for(NSLayoutConstraint *constraint in self.rootView.constraints)
    {
        float previousConstant = [[startDragConstraints objectForKey:constraint.identifier] floatValue];
        if(constraint.firstAttribute == NSLayoutAttributeLeading) //Horizontal space constraint
        {
            constraint.constant = previousConstant + previousConstant * widthDelta;
        }
        else if(constraint.firstAttribute == NSLayoutAttributeTop) //Vertical space constraint
        {
            constraint.constant = previousConstant + previousConstant * heightDelta;
        }
    }
}

@end

Demo

using Autolayout maintain ratio in storyboard just like group and stretch work in ms word

Answers (2)

Related Questions