0

I am currently building a UI component for an iOS application. Generally, the component is supposed to be 350pt in width, which I set up inside the component using auto layout:

self.widthAnchor.constraint(equalToConstant: 350.0).isActive = true

Now, if there is not enough space (due to other constraints outside of the component), I want the component to become smaller, but not fluidly - I want the component to alternate between two possible sizes only - 350pt normally and 300pt width if there is no room to fit 350pt. Is this achievable somehow?

Example project:

https://www.icloud.com/iclouddrive/055TkWS8aLqDhFDOPi-7qi8EA#LayoutExample.zip

I created a very simplistic example project to illustrate the problem. It contains a custom component (MyComponent), which is a stack view with four buttons. This component is embedded in the main view controller and auto layout is setup to ensure it doesn't flow out of the screen. This works well on larger devices, but the component is too large for the screen of iPhone SE and iPhone 4. In these cases, I would like the component to become another size (in the project, the component is 500pt regularly and should be 300pt on smaller devices).

Reasons

The reason I am looking for this behaviour are pretty much all design related. This component is not supposed to exist in a variety of sizes, but only in two specific sizes - a "normal" size and a smaller size for cases where the normal size doesn't fit.

BlackWolf
  • 5,239
  • 5
  • 33
  • 60
  • 1
    _"if there is not enough space"_ Can you explain your use case in detail? – Rakesha Shastri Sep 14 '18 at 07:39
  • So if the component is embedded in a way (inside another view, screen, ...) that auto layout prevents it from becoming this wide. For example, if I pin it to the leading/trailing anchors of a UIView that has a width of 320pt. (of course, this is a simplistic example, I might not always know if there is enough space while building the layout, because it might depend on, for example, screen size) – BlackWolf Sep 14 '18 at 07:41
  • Can you share the rest of your code? – Rakesha Shastri Sep 14 '18 at 07:47
  • I cannot share the code unfortunately, but I tried to create an example project to clarify things. See the edit in the post. – BlackWolf Sep 14 '18 at 08:14
  • Don't do it by points. I can't remember how to do it programmatically or in VFL, but in Storyboard, make the view the size you want in the size class for the larger devices. Do it by ratio, not by points. Adjust it for the size class for the smaller size class. https://digitalleaves.com/ultimate-guide-autolayout-size-classes/ – noobsmcgoobs Sep 15 '18 at 01:21

0 Answers0