Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Moving views with constraints

I have a couple views in my view controller that move up when an up swipe is detected then down when a down swipe is detected. I was forcing the views to move by adjusting the y origin using CGRectOffset. I've now applied constraints to my views with IB and I'm not sure whats the best way to move the views so that they end up in the right position on the iphone 5, 6, and 6+.

Currently I'm doing something like this:

[self.view layoutIfNeeded];

    self.panFrameVerticalConstraint.constant = self.panFrameVerticalConstraint.constant +338;

    [UIView animateWithDuration:5
                     animations:^{
                         [self.view layoutIfNeeded];
                     }];

Is it better to change the constants using ratios? So for the constraint above, instead of using 338, would it be better to do this:

    self.panFrameVerticalConstraint.constant = self.panFrameVerticalConstraint.constant + (self.panView.frame.size.height/1.680);

    //self.panView.frame.size.height = 568
    //(568/1.680) = 338
like image 882
Brosef Avatar asked Dec 11 '14 01:12

Brosef


People also ask

How do you use auto layout to move other views when a view is hidden?

You need to set the compression resistance priority to 0 (not the content hugging) in code when you want to hide the view, and when you want to show again restore that value. Apart of that you need to add a constraint in interface builder to set the size of the view to 0.

How do you add constraints to a storyboard?

Open the Align menu with the yellow button selected and check Horizontally in Container, then click Add 1 Constraint. Now, select both buttons at the same time using the Shift key and, in the Align menu, check Leading Edges. Again, actually install the constraint by clicking Add 1 Constraint.

How do you add a constraint in Xib?

To create a constraint between two views, Control-click one of the views and drag to the other. When you release the mouse, Interface Builder displays a HUD menu with a list of possible constraints.

What is Uistackview?

A streamlined interface for laying out a collection of views in either a column or a row.


1 Answers

Yes, no issue when you change the constants. The thing here is that you have to set your constraint appropriately.

Let's consider an example.

I have a UIView in Storyboard and I would like to change its width. Its default width is 1024.

After some animation, We will change it's width to 900.

Follow steps below to achieve this:

  1. Select UIView in which we want to update constraints. Here we need to update width, So we will add a constraint for width.

enter image description here

  1. Now we can see new constraint added to UIView.

enter image description here

  1. Click on that constraint. It will show constraint properties. Here now we want to decrease width from 1024 to 900, So that in constraint property change Relation property to Less Than or Equal. Similarly, if you like to increase width from 1024 then Relation will be Greater Than or Equal.

enter image description here

  1. Now create an IBOutlet variable for NSLayoutConstraint and connect it with above width constraint.

  2. Change width constant

Swift 5.0

@IBOutlet weak var viewWidthConstraint : NSLayoutConstraint!

func reduceWidth() {
    // Reduce width of view.
    UIView.animate(withDuration: 0.35, animations: { () -> Void in
        self.viewWidthConstraint.constant = 900
        self.view.layoutIfNeeded()
    })
}

func normalWidth() {
    // Change to the default width of view.
    UIView.animate(withDuration: 0.35, animations: { () -> Void in
        self.viewWidthConstraint.constant = 1024
        self.view.layoutIfNeeded()
    })
}

Objective C

@property (weak, nonatomic) IBOutlet NSLayoutConstraint     *viewWidthConstraint; 

- (void) reduceWidth {
    // Reduce width of view.
    [UIView animateWithDuration:0.35f animations:^{
        self.viewWidthConstraint.constant = 900;
        [self.view layoutIfNeeded];
    }];
}

- (void) normalWidth {
    // Change to default width of view.
    [UIView animateWithDuration:0.35f animations:^{
        self.viewWidthConstraint.constant = 1024;
        [self.view layoutIfNeeded];
    }];
}
like image 53
Kampai Avatar answered Sep 20 '22 17:09

Kampai