Does this look familiar? You are trying to create a consistent layout for multiple symbols that have noticeably different widths or heights. Here's how you can solve this problem in SwiftUI using the .frame modifier, font styles, and the @ScaledMetric property wrapper! 🧵 Before + After - ThreadSky

About ThreadSky

dannybehar.social • 78 days ago

Does this look familiar? You are trying to create a consistent layout for multiple symbols that have noticeably different widths or heights.

Here's how you can solve this problem in SwiftUI using the .frame modifier, font styles, and the @ScaledMetric property wrapper! 🧵

Before + After

1 / 2

Comments

kirsteins.bsky.social•77 days ago

I use other approach:

kirsteins.bsky.social•77 days ago

Then decide what your biggest element that drives layout and you want other view to adapt to:

dannybehar.social•58 days ago

I love this approach! You can specify a different icon for a different stack. Thanks for sharing 😊

waltermeowthau.bsky.social•78 days ago

Omg! I've needed something like this for a long, long time. Thank you!

dannybehar.social•78 days ago

First, add a frame around the stack and specify either the width or height (depending on if you are laying your views out vertically or horizontally).

Experiment with height value so that the taller icon has the smallest possible value without clipping the icon. Utilize SwiftUI Previews for this.

dannybehar.social•78 days ago

But there is a problem... we need this static height value to scale based on the user's DynamicType preference! We can utilize the @ScaledMetric property wrapper for this! Set the relative Font.TextStyle to the the font you've defined in your view:

dannybehar.social•78 days ago

I hope this post helps someone as it's helped me. Please do share if you've found a different or similar solution to handle this problem! Happy Weekend!

brente.bsky.social•78 days ago

Great stuff, thanks. Yes very timely for something I am working on as well. One thing that it also helps with is #accessibility when the user increases the screen font sizes.

Posting Rules

Be respectful to others
No spam or self-promotion
Stay on topic
Follow Bluesky's terms of service

Comments

Posting Rules

Reply