Casey Liss

How do I center the “😃” between the rectangles?

Where it is currently _is_ the center of the parent, but I want it to be centered between the rectangles instead. Horizontally centered is the goal; vertically centered would be a nice bonus.

Image below; code here: https://gist.github.com/cliss/df21f012bfc44d94c033756bf970f1af

Centering Question

Centering Question. GitHub Gist: instantly share code, notes, and snippets.

Gist
Apr 19, 2024 at 2:13pmIvory for Mac
Show threadCasey LissApr 19, 2024

I should have thought of this. 🤦🏻‍♂️

@wingman_ saved the day. 🎉 🥰

The smiley is far lower than I'd want, but because I statically define the frame of the rectangles, I can .offset(y:) it, so I'm not worried about that.

https://mastodon.social/@wingman_/112298395433948771

Show threadCasey LissApr 19, 2024
And yes, all of this is simply in service of this very, very dumb gag. Which in turn is all @jelly's fault.
Show threadStuart GibsonApr 19, 2024
@caseyliss @jelly 10/10, no notes.
Show threadBrian HoughApr 19, 2024
@caseyliss @jelly Dumb gag or not, this is genuinely useful functionality - so thank you!
Show threadDrChrisApr 19, 2024
@caseyliss @jelly If you're going to use the handshake emoji, you need to take this screenshot with Sylvester Stallone and Carl Weathers ( tho with the film knowledge you and Marco show on ATP maybe you'll need to ask John why :D )
Show threadCasey LissApr 19, 2024
@DrChris @jelly That's actually where this started, but it looks weird as shit (I tried)
Show threadZack KatzApr 19, 2024
@caseyliss @DrChris @jelly Could it work with a line art version?… Something like this, but icon-sized?
Show threadZack KatzApr 19, 2024
@caseyliss @DrChris @jelly Nevermind, I like the emoji!
Show threadDrChrisApr 19, 2024
@caseyliss @jelly There needs to be a predator hand shake emoji
Show threadMike TaffetApr 19, 2024
@DrChris I’m assuming you actually mean Arnold from Predator?
Show threadDrChrisApr 19, 2024
@miketaffet ha yes -hoisted on my own pedantic petard!
Show threadJan Lehnardt Apr 19, 2024
@caseyliss perfect, worth it.
Show threadMike TaffetApr 19, 2024
@caseyliss @jelly CASEY! This should have been Arnold and Carl Weathers!
Show threadCasey LissApr 19, 2024
@miketaffet https://mastodon.social/@caseyliss/112298468357602595
Show threadMike TaffetApr 19, 2024
@caseyliss no, I meant the actors, not the emoji. You’re crossing Predator with Bad Boys and it’s breaking my meme brain
Show threadMarc Robinson Apr 19, 2024
@caseyliss @jelly You spelled “delightful” wrong. 😉
Show threadBrianApr 19, 2024
@caseyliss @jelly 6° 🥓
Show threadLex FriedmanApr 19, 2024
@caseyliss I just don’t get why you didn’t ask me
Show threadJordanApr 19, 2024
@caseyliss hooray! I deleted my first comment bc I thought you wanted the views to be different widths. If thats still the case, you can do something like this
Show threadTim SchmitzApr 19, 2024
@caseyliss @wingman_ Nice! I wonder if custom alignment guides might also help? https://developer.apple.com/documentation/swiftui/aligning-views-across-stacks
Aligning views across stacks | Apple Developer Documentation

Create a custom alignment and use it to align views across multiple stacks.

Apple Developer Documentation
Show threadKonrad KołakowskiApr 19, 2024
@caseyliss Yeah, „overlay" is often a saver in SwiftUI 😏
Show threadJoefrey Kibuule, MDApr 19, 2024

@caseyliss You should set the background color of your pair function to see what boundaries you are actually playing with. Otherwise, you are likely to start needing to use alignment guides for where you want one item to line up with another outside if its immediate XStack.

I often toss on Spacer() for actual centering. Does wonders.

Show threadCasey LissApr 19, 2024
@jeffkibuule I started down the path of AlignmentGuide, but it seems there's no alignment guide for vertical centering, which I would also need.
Show threadJoefrey Kibuule, MDApr 19, 2024
@caseyliss Can you color the rectangles behind? I can give better guidance afterwards.
Show threadCraig HockenberryApr 19, 2024
@caseyliss A ZStack on a Spacer/EmptyView between the pairs?
Show threadCasey LissApr 19, 2024
@chockenberry I don't think so, because the core of the issue is that the pair is not of equal widths.
Show threadCraig HockenberryApr 19, 2024

@caseyliss Well then you either need to restructure the views or use some fixed widths.

Nothing to anchor with in current layout.

Show threadeduoApr 19, 2024
@caseyliss I'm getting PTSD of trying to center DIVs in CSS as soon as I tried to do it anywhere else than just a blank canvas.
Show threadDiggoryApr 19, 2024

@caseyliss is this where GeometryReader is useful?

https://developer.apple.com/documentation/swiftui/view/coordinatespace(_:)

coordinateSpace(_:) | Apple Developer Documentation

Assigns a name to the view’s coordinate space, so other code can operate on dimensions like points and sizes relative to the named space.

Apple Developer Documentation
Show threadMarc PalmerApr 19, 2024
@caseyliss Seems like a job for custom Layout? I’ve not travelled that road yet though. You could do it by capturing the frames of the two black rectangles and calculating it and hard positioning it in the ZStack or overlay of the HStack. Ugly but... so is the problem? 🤷‍♂️
Show threadCasey LissApr 19, 2024
@marcpalmer Yeah my knowledge of that is limited to watching one WWDC video nearly a year ago 🤪
Show threadHopscotch JalopyApr 19, 2024
@caseyliss If you’re not totally wedded to stacks, you can use Grid{}. You can set alignment and spans for every cell. It’s how I did my credit comparison view.
Show threadCasey LissApr 19, 2024
@hopscotchjalopy haha, that's exactly what I'm working on
Show threadTyler KuntzApr 19, 2024
@caseyliss if you can set a width to the text, it makes this a lot easier. I did 100 here and added the emoji to the HStack
Show threadJoseph HumfreyApr 19, 2024

@caseyliss I’m afraid I don’t have anything useful to suggest!

But I started learning SwiftUI a few weeks ago and my early impressions were “wow I’m impressed that someone has found ✨ BRAND NEW ✨ ways to make centering as difficult as CSS”

Show threadthe old guyApr 28, 2024
@caseyliss
Sorry to bother you but could you tell Marco that there seems to be a problem with Overcast working with the latest watchOS 10.4. Everything works except the watch crown volume control. I think it is Overcast because Now Playing app works.
Love your podcast.
You’re help is appreciated.
Jim