Create a new trait variation for this second set of layout-specific constraints.Add the constraints specific to this layout variation.Reposition your views for this new layout.This may involve changing the orientation or changing the device (e.g to an iPad). Switch the canvas to the new variation (e.g.Create a trait variation for their Installed property.Add the constraints for the first variation (e.g.To build a layout with constraints that adapt to a change in size class: The document outline will also update to show the active constraints. The layout should be working without warnings in both orientations. You can now use the orientation control to switch back and forth between portrait and landscape. The three selected constraints are now only installed when we have a compact height. Click the Add Variation button.ĭeselect the default variation, leave the compact height (hC) variation enabled: In the trait pop-up, change the Width to Any and make sure you have the Height set to Compact. Select the three new constraints in the document outline and use the size inspector to add a new trait variation on their Installed property: Re-position the views for the landscape layout and add the three landscape specific constraints: The regular-height specific constraints are dimmed in the document outline to show they are inactive: Interface Builder will now be showing layout warnings as we no longer have enough constraints installed. Use it to change the canvas to landscape: Xcode has an orientation control in the canvas toolbar. You should not be seeing any Interface Builder warnings. The canvas is in portrait (regular height) orientation so we still have a valid layout. The three selected constraints are now only installed when we have a regular height. Click the Add Variation button:ĭeselect the default variation so that only the regular-height (hR) variation is selected: Make sure you have the Height set to Regular. In the pop-up menu, change the Width to Any. Note that we are creating a trait variation for all three selected constraints: In the size inspector, click the button next to the Installed property. Hold the command-key and select the three constraints in the document outline (Button leading, Label top and Label trailing): The six constraints pin the button and label to the superview margins and add a standard amount of vertical spacing between the two views.īefore switching to landscape we need to create a trait variation for the three regular-height specific constraints so they are only active when we have a regular height. Here’s how it looks in Interface Builder: The label is using a title 2 font and I increased the root view margins to 20 points on all sides. I’m using a button with a filled-style, Title 1 font, large corner style and 10 point content insets on all sides. To get started, let’s first build the portrait layout. Let’s walk through how to do this in Interface Builder: Both layouts use six constraints, three of which are common to both orientations (shown in red): That doesn’t match how a stack view works so I’m building the constraints myself. The stop button moves from being on top of the text in portrait to being on the right (trailing) side of the text in landscape. Here’s my target layout on an iPhone SE (2nd generation) in portait (regular height) and landscape (compact height) orientations: Let’s build a layout with constraints that adapt to the vertical size class. Luckily, Xcode does make that a little bit easier than it used to be. That’s nothing new and changing it for each constraint is a pain. The Xcode documentation hasn’t caught up yet but the answer seems to be to fall back to creating variations on the Installed property of the constraint. So if you can’t use the vary for traits button how do you create adaptive constraints in Interface Builder? How To Vary Constraints It was far from perfect and Apple removed it in Xcode 13. The Vary For Traits button put you in a mode where you could add and remove constraints for specific size class variations: The Xcode team has had several attempts over the years at creating the user interface for building adaptive layouts. What happened to the Vary For Traits button? It was a handy way to create layouts with constraints that varied depending on the vertical and horizontal size class.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |