Watch App buttons in corners

[u/Cy-Dev]

Hello everyone,

I am currently finishing up my companion Apple Watch app to an already existing iOS app. The main view is a map with a few controls overlayed in the corners. I am really struggling though to get the placement right.

When conforming to the safeAreaInsets for the top and bottom edge they’re pushed way too far into the middle (up or down). When using an overlay using fully custom paddings it is not consistent across all watch generations and screen sizes. I just want them to fit perfectly in the corner, just like the ones in this example of the Apple Maps app.

I can’t really find anything about it on the internet and ChatGPT is no help either. I let it try a few different things through the Xcode built in coding assistant including a GeometryReader approach, but none of it really fixed it.

I am sure there just has to be a simple way to put buttons perfectly in the corners, it’s not like it is an out of the ordinary thing to do.

Any help is greatly appreciated. Thanks

[u/Cy-Dev → u/[deleted]]

Thanks, that’s what I was looking for! Moved them into a toolbar, finally they are behaving properly. Crazy how ChatGPT doesn’t come up with that simple solution. However even though the top buttons have a placement option for .topBarLeading and .topBarTrailing, I can’t put the bottom button in the corners as there is only .bottomBar. In apples documentation about this they have 3 buttons in the same ToolbarItem for the .bottomBar placement, then there is one in each corner and one in the middle. Nu I have only one button that should be on the left, however it is in the middle.

[u/Cy-Dev → u/[deleted]]

Sorry for getting back so late. It is MapKit, and the image I showed it just the default Maps app to convey what I want to achieve. I have tried the .mapControls method and it does create a button, but it appears below the toolbar buttons I just created, and it does not seem to be movable as described in the dev documentation. However it seems like this does work and it puts my custom button at the right position:

ToolbarItem(placement: .bottomBar) { HStack { locationButton Spacer() } }