Skip to main content

Keep fixed size while using scaled position

  • November 24, 2022
  • 3 replies
  • 1101 views

David_Querg

Today, when setting “constraints” to “scaled” the behavior gets applied to both the position as well as the size of the layer.

I ran into a particular case in which I would like to scale the position relatively to its parent but keep the size fixed.

The example is straight forward.

  • I built a audio meter component which will be animate for prototyping and testing purposes.
  • The component itself as a particular height of 200px as a default.
  • Instances might use different heights.
  • The audio meter will display the audio peak in a given timeframe. (That’s the little yellow bar at the top)

Now: As is, the peak indicator gets scaled down as I decrease the size of the instance. Using any other constraint setting mispositions the peak indicator.

I don’t see how I can achieve a fixed height of 1px for the indicator while keeping a % based position relative to the height of the parent container.

(Left: instance with ~50% of the height | Right: Component variant)

Thanks for any advice.
Potentially this is rather a feature request.

– David

This topic has been closed for replies.

3 replies

tank666
  • 4871 replies
  • November 24, 2022

If I understand you correctly, then Layout grid from rows can help you.


David_Querg

I think you are correct @tank666. I missed that approach but found another solution which is a bit workaround-ish.

  1. Put peak indicator into an auto-layout frame.
  2. Set peak indicator width to fill for scaling support. Height to fixed.
  3. Set auto-layout frame constraint to “scaled” for vertical.

Since I used an entire auto-layout setup for the entire component with L+R indicator I needed to set the height and width to fill again for the parent containers.

Generally my request is solved although it feels a bit overly complicated.


  • 0 replies
  • February 22, 2023

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.


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