Skip to main content
Question

Need assistant on auto layout

  • October 24, 2023
  • 3 replies
  • 363 views

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 replies.

3 replies

Nate_G
  • Power Member
  • 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
  • Active Member
  • 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
  • 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