Auto power off and restrictions for iPad

Question

I am very confused by the new xCode 4.5 auto layout feature.

Here is what I want to do

Having set the storyboard, I have this portrait installed.

Using autolayout and restrictions (and contacts), how can I convert a layout when it flips to an album?

I tried coding and changing the CGRect (size and location of coordinates) representations with its landscape design, but to no avail.

Answer 1

NSLayoutConstraints replaces the need for CGRects in Auto Layout. First describe the layout in words. Here, as I would describe your portrait example:

• Red width is 60% of its supervisor.
• Blue height is 55% of her supervisor.
• The blue left and right edges touch their supervisor.
• The red left edge touches your supervisor, the red right edge is close to the yellow left edge, and the yellow right edge touches his supervisor.
• The blue upper edge touches its supervisor, the blue lower edge is close to the red upper edge, and the red lower edge touches its supervisor.
• The blue lower edge is close to the yellow upper edge, and the yellow lower edge touches its superstructure.

Here's a method that removes existing superview constraints, then applies the new constraints to a given interface orientation.

 - (void) buildConstriantsForInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation { // Remove existing constraints. [superview removeConstraints:superview.constraints] ; // Build an array to hold new constraints. NSMutableArray* constraints = [NSMutableArray new] ; // Add 2 constraints that apply to both Portrait & Landscape orientations. [constraints addObject:[NSLayoutConstraint constraintWithItem:red attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeWidth multiplier:0.6 constant:0]] ; [constraints addObject:[NSLayoutConstraint constraintWithItem:blue attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeHeight multiplier:0.55 constant:0]] ; // Build a dictionary to store references to NSViews. NSDictionary* views = NSDictionaryOfVariableBindings(superview, blue, red, yellow) ; // To eliminate repeated NSLayoutConstraint code, build an array of Format Strings with which to build constraints. NSArray* formatStrings ; if ( UIInterfaceOrientationIsPortrait(interfaceOrientation) ) { formatStrings = @[@"H:|[blue]|", @"H:|[red]-[yellow]|", @"V:|[blue]-[red]|", @"V:[blue]-[yellow]|"] ; } else { formatStrings = @[@"H:|[blue]-[yellow]|", @"H:|[red]-[yellow]", @"V:|[blue]-[red]|", @"V:|[yellow]|"] ; } for ( NSString* formatString in formatStrings ) { [constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:formatString options:0 metrics:nil views:views]] ; } // Add the newly created constraints. [superview addConstraints:constraints] ; } 

You can call this method whenever a view loads or rotates.

 -(void) viewDidLoad { superview.translatesAutoresizingMaskIntoConstraints = NO ; [self buildConstriantsForInterfaceOrientation:self.interfaceOrientation] ; } - (void) willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration { [self buildConstriantsForInterfaceOrientation:toInterfaceOrientation] ; } 

Answer 2

Autolayout is great for expressing the relationship of one object to another and resolving conflicts, but it does not have any conditional concepts. For your layout, I think it will be easiest for you to add and remove rotation restrictions, check out https://developer.apple.com/library/ios/#documentation/AppKit/Reference/NSLayoutConstraint_Class/NSLayoutConstraint/NSLayoutConstraint.html to Learn how to add them.

You can also set your limits and prioritize so that it does the right thing during rotation, but it will take some testing and tuning to work properly. I did some testing locally, and I think I'm doing it right, but it's just with empty views that don't have inline content size. However, here is what I consider necessary to do with the storyboard:

• Make sure the blue view is & lt; = portrait width and> = minimum landscape width
• Make sure the red look has a minimum height.
• Correct the width of the yellow view and set the height as> = portrait height
• Attach each view to the corner in which it will always remain (for example, a single end and a lower one for the supervisor for yellow)
• Align the top of the yellow view with the blue low priority view
• Increase content compression resistance for yellow

I think about this, starting with a blue view with a fairly high priority of maximum size and a yellow view that knows how to expand upward, but with a low priority. When it rotates, the blue view retains its maximum size, which frees up the yellow view to expand upward. Then I fill in the necessary constraints to maintain alignment.

It is rather difficult to describe in the text, here is a screening showing three types and limitations between them. It does not show everything, but you can at least check the relationship between the views: