How To Position Controls With SwiftUI

I personally find that placing precisely objects is a critical limit (or constraint) with SwiftUI.

What I do (sometimes with mixed results) is to group objects in separate Views (red-bordered in the image). It makes it easier to position objects (with HStack / VStack) in each view and then position the views.

Hope that helps.

Hi Claude31,

Thanks for the response. You gave me some good suggestions on how to approach the issue using Views.

I guess another question that I would have is, if I use your View approach, how do I locate each one of those in exact locations on the screen? I have found videos about Views, but not how to locate them. Maybe they have to be adjacent to each other?

Based on your response, I did some more digging and found a video by Paul Hudson. Here Paul places some text at an absolute location on the screen as in the sample below. I wonder if it's possible to do this with other controls as well?

You can position the views with position modifier.

And if you want to position relative to screen width for instance, use screenSize

    @State var screenSize : CGSize = CGSize(width: 1200, height: 800) // Will be computed in .onAppear

.onAppear {
   screenSize = CGSize(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)

When you need to position, in the middle

.position(x: screenSize.width / 2, y: 50)

If you have to adapt to view resize:

        .readSize { newSize in
            screenSize = newSize
        }

Thanks Claude31, for the screenSize info. That will come in very handy.

From your red rectangles above, I am starting to understand that one needs to make use of Views, and more specifically, multiple Views, one for each of the red rectangles above.

The code below shows how to stack two Views. Notice MyCustomView is embedded inside the first View below. I have looked at many videos on how to stack more Views, but have not come across any examples. Is there any documentation of how to stack multiple Views.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            MyCustomView()
            Image(systemName: "star.fill")
                .font(.largeTitle)
                .foregroundColor(.yellow)
        }
    }
}

Please review the following resouces, they should be helpful in learning about SwiftUI layouts:

• Building layouts with stack views
• Picking container views for your content
• Grouping data with lazy stack views
• Composing custom layouts with SwiftUI