Place Title and Button at Top and Bottom of Screen in Both Landscape and Portrait Orientation in Swift UI

64 Views Asked by At

I am trying to make the jump from Objective-C's graphical UI to coding the UI in Swift.

I have a View that looks okay in portrait mode, but when the device is rotated, the title and buttons move off screen.

enter image description here

 var body: some View {
    ZStack(content: {
        Image("XCTrack")
            .padding(20.0)
            .scaledToFit()
            .aspectRatio(contentMode: .fit)
            .padding()
            .opacity(0.8)
  
        VStack(alignment: .leading, spacing: 20.0, content: {
                Spacer()
                .frame(height:  screenHeight/6)
            
                Text("Instrument Tuner")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .foregroundColor(Color.red)

            Spacer()
                .frame(height:2 * screenHeight/3)
            
                Button("Start Tuning") {
                         DoSomeTuning
                }
                
                .buttonStyle(.borderedProminent)
                .tint(.red)
                .font(.largeTitle
                )
                .alignmentGuide(HorizontalAlignment.center, 
                 computeValue: { dimension in screenWidth
                })
            Spacer()
                .frame(height: screenHeight/6)
            
        })  
    })
}

The calculated values for the frames were designed to place the title and button close to the upper and lower bounderies of screen, respectively. If there is a better way to accomplish this, I am willing to jettison this method.

As an aside, it seems that .alignmentGuide(HorizontalAlignment.center should center the button on screen, but it is not doing this.

Thanks in advance for your assistance.

0

There are 0 best solutions below