Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How To Position Views Relative To Their Top Left Corner In SwiftUI

How do I position views relative to their top left corner in swiftUI? The "position" modifier moves the views relative to their center coordinates. So .position(x: 0, y: 0) places a views center coordinate in the top left of the screen.

I want to place a views top left coordinate in the top left of the screen, How do I do this?

struct HomeView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Top Text")
                .font(.system(size: 20))
                .fontWeight(.medium)
             Text("Bottom Text")
                .font(.system(size: 12))
                .fontWeight(.regular)
        }
        .position(x: 0, y: 0)
    }
}

Currently, the left half of my view is cut off the screen, how do I prevent this? Also, how do I align relative to the safe area?

I miss UIKit 😪

enter image description here

like image 744
cabyambo Avatar asked Apr 29 '20 03:04

cabyambo


People also ask

How do I set positions in SwiftUI?

SwiftUI gives us two ways of positioning views: absolute positions using position() , and relative positions using offset() . They might seem similar, but once you understand how SwiftUI places views inside frames the underlying differences between position() and offset() become clearer.

What is the use of ZStack in SwiftUI?

The ZStack assigns each successive subview a higher z-axis value than the one before it, meaning later subviews appear “on top” of earlier ones. The ZStack uses an Alignment to set the x- and y-axis coordinates of each subview, defaulting to a center alignment.


2 Answers

If I correctly understand your goal the .position is not appropriate instrument for it. SwiftUI layout works better without hardcoding.

Here is possible solution. Tested with Xcode 11.4 / iOS 13.4

demo

struct HomeView: View {
    var body: some View {
        ZStack(alignment: .topLeading) {
            Color.clear
            VStack(alignment: .leading) {
                Text("Top Text")
                    .font(.system(size: 20))
                    .fontWeight(.medium)
                 Text("Bottom Text")
                    .font(.system(size: 12))
                    .fontWeight(.regular)
            }
        }.frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}
like image 131
Asperi Avatar answered Oct 28 '22 05:10

Asperi


@Asperi 's answer will solve the problem. But, I think we should use Spacer() rather than Color.clear and ZStack.

Spacer is specifically designed for these scenarios and makes the code easier to understand.

struct HomeView: View {
    var body: some View {
        HStack {
            VStack(alignment: .leading) {
                Text("Top Text")
                    .font(.system(size: 20))
                    .fontWeight(.medium)

                Text("Bottom Text")
                    .font(.system(size: 12))
                    .fontWeight(.regular)
                Spacer()
            }
            Spacer()
        }
    }
}

SwiftUI layout system is different from UIKit.

It asks each child view to calculate its own size based on the bounds of its parent view. Next, asks each parent to position its children within its own bounds.

https://www.hackingwithswift.com/books/ios-swiftui/how-layout-works-in-swiftui

like image 28
sElanthiraiyan Avatar answered Oct 28 '22 05:10

sElanthiraiyan