Skip to main content
Question

Need assistant on auto layout


rahend

image

Just as shown in the image above, I want to apply a ‘hug’ constraint to all the boxes. However, for the grey box, I need to set a minimum width. Additionally, I want to ensure that the blue box remains anchored to the right, even when the orange box is resized. How can I achieve this using auto layout?

This topic has been closed for comments

3 replies

Nate_G
  • Power Member
  • 180 replies
  • October 24, 2023

@rahend yes, you can achieve this using the awesomeness of auto-layout.

Each frame (orange, blue, gray) is set to “hug contents” and then on the main gray frame, you would set your min-width.

The trickier part is getting the blue box to stay on the right when the gray box hits its min-width and as the orange box gets smaller.

You can achieve this by adding a hidden spacer frame between the orange and blue frames. It is set to “fill container”. And then you will show (or hide) the spacer when the gray box hits the min-width.

See Example File


rahend
  • Author
  • 11 replies
  • November 22, 2023

Thanks, @Nate_G! I’ve given that a shot and it seems to be what I’m looking for, although the spacer does create a somewhat unexpected padding.


Nate_G
  • Power Member
  • 180 replies
  • November 22, 2023

You can also create a component of this and set it up so you can just toggle the spacer on and off, so you don’t have to go into the layers to show/hide the spacer


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings