ctietze,
@ctietze@mastodon.social avatar

SwiftUI Challenge: 🏆

Can You Port this from to ? Does it take you 10 minutes (like Auto Layout), less or more?

https://christiantietze.de/posts/2024/03/swiftui-challenge-port-from-auto-layout-to-swiftui

Share your solutions! 🔥

ctietze,
@ctietze@mastodon.social avatar

It's great to see so many solution attempts and discussion!

I reshared this at the exact same time on Twitter, and there it got 0 reactions. It's not even funny how much more lively Mastodon feels :)

ryanlintott,
@ryanlintott@mastodon.social avatar

@ctietze Here's my example. I'm using onSizeChange from my FrameUp package which is an easier to use wrapper for preference keys.

The button resizing maybe took me 10 minutes but the window resizing took longer and was a bit tricky to get right.

https://gist.github.com/ryanlintott/06e25c3945224b4dd5e3d821ef5027ec

An alert window resizing horizontally. The vertical size changes to fit the content. The buttons start off as equal size but shrink when less space is available. Buttons with longer text remain larger while buttons with shorter text will shrink further to fit the space.

ctietze,
@ctietze@mastodon.social avatar

@ryanlintott Ah, SwiftUI Preferences! Of course, that's a mechanism to bubble information from element to their parents

ctietze,
@ctietze@mastodon.social avatar

@ryanlintott That's very close, nice! Observing size changes with a transparent background view, cool.

Something is inherently janky in SwiftUI layouts like this: that the text/image wobble up/down a bit during the resize. Strange.

I notice that I forgot the heading in my version :)

ryanlintott,
@ryanlintott@mastodon.social avatar

@ctietze As far as I can tell the wobble is due to the windowResizability setting not positioning the content correctly for a frame here and there. It fixes it on the next frame but it is frustrating it's not smooth.

All the SwiftUI views inside resize smoothly on their own.

causticmsngo,
@causticmsngo@mastodon.social avatar

@ctietze I would love to see @chris & Florian tackle this one.

chris,
@chris@m.objc.io avatar

@causticmsngo @ctietze too short for an entire episode! :p

ctietze,
@ctietze@mastodon.social avatar

@chris @causticmsngo I would bet against that :)

isaiah,
@isaiah@mastodon.social avatar

@ctietze i dunno the answer in SwiftUI. but i can build that with springs and struts in about 2 min.

i don’t even have to try hard. it takes about zero brainpower.

bonus points: it’s super easy to see and customize all the accessibility details too.

bwebster,
@bwebster@mastodon.social avatar

@isaiah @ctietze I'm not sure how you'd ensure all three buttons are the same width with just autoresizing, but yeah, you could get there with that and maybe one override of -resizeSubviews:withOldSize:

isaiah,
@isaiah@mastodon.social avatar

@bwebster @ctietze it takes a few subviews. but subviews are cheap. i do this with all the Stacks sidebar controls.

if you want fixed size buttons, or resize with the window, it’s all IB.

if you want the buttons to resize with the content of their text labels then i usually take care of that in the view’s layout method — resizeSubviews works for most things too.

or i add a subview that uses autolayout just for content resizing — this reigns in some of the autolayout complexity IMHO.

ctietze,
@ctietze@mastodon.social avatar

@isaiah @bwebster I wouldn't mind seeing what you do within 2min to be honest!

isaiah,
@isaiah@mastodon.social avatar

@ctietze @bwebster i’ll make a video as soon as i get back to the office.

i must admit the example feels a tad overwrought. and i think that’s maybe some of the challenge here.

  • this looks like an old school alert complete with NSCaution symbol. they should really just use a modal alert here.

  • the button are all the same size. but also resize with the window. do they always start the same size no matter the content? no matter the language?

isaiah,
@isaiah@mastodon.social avatar

@ctietze @bwebster the example chooses some things that are easy-ish in autolayout, but perhaps not great from the user experience or aesthetic viewpoint.

if it were me setting this up i would personally choose non-resizing OK and Cancel buttons and let the other one resize.

and then a reasonable min-sized window to allow most content without truncating.

this is perhaps less general and less flexible but it feels IMHO factored a bit more correctly for the real world.

ctietze,
@ctietze@mastodon.social avatar

@isaiah @bwebster @teilweise Yeah it's length, language, and LTR/RTL agnostic. Or should be.

isaiah,
@isaiah@mastodon.social avatar

@ctietze @bwebster
for what it's worth, i didn't read the details until i began. my bad -- i apologize. there is, of course, no way to build a UI that changes with content using springs and struts. it's all top-down constraints.

that said, here's my quick UI:

  • keeps the buttons the same size.
  • maintains correct spacing.
  • margins don't scale, just buttons.

there's not much to it, so it went pretty fast.

to make this more general i would need to amend with autoconstraints or code.

video/mp4

isaiah,
@isaiah@mastodon.social avatar

@ctietze @bwebster i'm the last person to take the side of SwiftUI -- i'm not a fan. and it's especially terrible on macOS.

but i'm going to side with SwiftUI here… 😬

i think part of the challenge is in trying to do something where autoconstraints tends to ignore a slightly ambiguous situation -- that other systems instead make more pronounced.

it's like telling your doctor, "it hurts when i bend my arm backwards," and your doctor replies, "then don't bend your arm backwards."

isaiah,
@isaiah@mastodon.social avatar

@ctietze @bwebster
starting with the buttons the same size -- yet also have a minimum intrinsic size leads to a slightly ambiguous constraint.

it's conceivable that "A Lot of Text" starts out larger than the initial same-sized buttons. which constraint is more important: same size or the min size?

it's not difficult to overcome this of course -- my point is simply that by contriving a situation where autoconstraints glosses over a detail, the test is liable to produce results that misinform.

isaiah,
@isaiah@mastodon.social avatar

@ctietze @bwebster

all that being said. yep. i would use autoconstaints too. 🙃🤣

ctietze,
@ctietze@mastodon.social avatar

@isaiah @bwebster I haven't touched springs and struts in 10 years or so so that solution is fun to see, thanks for sharing :)

ctietze,
@ctietze@mastodon.social avatar

@isaiah @bwebster oh cc @teilweise who came up with this to also take a look

auramagi,
@auramagi@hachyderm.io avatar

@ctietze Here’s my best effort.
Everything but the window resizing took about 8 minutes.
I wasn't quite sure how the window stuff works on Mac, and it took at least another 15 minutes to figure how it works and to get at least a viable solution.

Sadly, the way windowResizability works makes it impossible to implement this without a GeometryReader or a Layout, and even then it's a bit janky. SwiftUI needs something like the compression resistance priority here.

https://gist.github.com/auramagi/c505b2c4493090e1dc7a4132c08ae0b1

ctietze,
@ctietze@mastodon.social avatar

@auramagi Ha, the hidden buttons for layout are weird but clever :) Also: PreferenceKey to share the info, I didn't think of that 👍

auramagi,
@auramagi@hachyderm.io avatar

@ctietze Debating whether SwiftUI is “production-ready” in 2024 is an eye-roll argument, though. It has, limitations, sure, but what doesn't? It's just cherry-picking examples and moving the goalposts once those specific issues are resolved.

ctietze,
@ctietze@mastodon.social avatar

@auramagi Agreed. "Production-ready" wasn't their words, it's my wrong summary. Will fix the wording.

teilweise,
@teilweise@layer8.space avatar

@auramagi @ctietze That probably came from my Tweet from 2020.

Today I’d say SwiftUI has its pros and cons. I still doubt that it is better than UIKit/AppKit. It’s (just) different.

I like the good things about Autolayout more than I like the good things in SwiftUI. And I hate the bad things in SwiftUI passionately while I have made peace with the bad things in UIKit.

(We all thought Autolayout errors were the worst possible …)

Cyberbeni,
@Cyberbeni@techhub.social avatar

@teilweise I still don't understand why people, who wrote bad UIKit code, think that they'll suddenly start writing good code because of SwiftUI.

SwiftUI has worse debugging experience. View debugger doesn't show custom view names. Initializers (inside a view builder?) are often called from a bunch of unnamed symbols that don't relate to your code. This makes joining an ongoing project much less frictionless.

teilweise,
@teilweise@layer8.space avatar

@Cyberbeni Maybe they think their code was bad because of UIKit? Plus the marketing of SwiftUI that lets them think most things will automagically just work.

SwiftUI doesn’t make things worse if AutoLayout errors too are totally cryptic for you.

I don’t know. For me, SwiftUI is more of a black box than UIKit. Handling black boxes is hard, especially if they are poorly documented and/or behave in unexpected ways (not least: bugs).

Cyberbeni,
@Cyberbeni@techhub.social avatar

@teilweise Apple forced them to put all their code inside UIViewController subclasses and the AppDelegate.🙃

The part from 25:05 sums it up pretty well: https://vimeo.com/291590798 (2018 NSSpain talk from @twostraws )

I agree with your black box opinion.

twostraws,
@twostraws@mastodon.social avatar

@Cyberbeni @teilweise Damn, that talk feels so long ago.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • SwiftUI
  • kavyap
  • mdbf
  • osvaldo12
  • ethstaker
  • tacticalgear
  • DreamBathrooms
  • thenastyranch
  • magazineikmin
  • modclub
  • Youngstown
  • everett
  • slotface
  • rosin
  • GTA5RPClips
  • provamag3
  • khanakhh
  • cisconetworking
  • tester
  • ngwrru68w68
  • normalnudes
  • Durango
  • InstantRegret
  • cubers
  • megavids
  • Leos
  • anitta
  • JUstTest
  • lostlight
  • All magazines