How can justify text in Swift UI?

Question

I am new to Swift UI. I have been using storyboard all this while. I am stuck at a place in swiftUI. Could one of you please explain how to justify Text in swiftUI? I referred to few links but they were of not much help.

SwiftUI: Justify Text

Kindly help! I am stuck at this very badly

Answer 1

An important thing to remember about swift is that views are typically arranged in stacks, mostly V and H stacks. You can use those stacks to move text around as you want. Now a common issue you might run into would be a stack that is not as wide as you'd expect, which you can fix with modifiers such as minimumFontScale and others. For the sake of this explanation I'll show you common structures for aligning text as you want.

Horizontal Alignment, Center of View

VStack {
    Spacer() // Disable for Top Left/Right
    HStack {
         Spacer() //Disable for Left Align
         Text("Test")
         Spacer() //Disable for Right Align
    }
    Spacer() // Disable for Bottom Left/Right
}

Notice the VStack has two spacers to center the nested HStack. Then the HStack has spacers to align to the left of the view or the right.

Vertical Alignment, Center of View

HStack {
    Spacer() //Disable for Left, Top/Bottom
    VStack {
         Spacer() //Disable for Top Align
         Text("Test")
         Spacer() //Disable for Bottom Align
    }
    Spacer() //Disable for Right, Top/Bottom
}

This one places the text in the middle and allows you to move it up and down. You should be able to look at these structures and see how you can manipulate it to move your views around.

Other Ways of Manipulating Alignment

VStack(alignment: .leading) {} //Leading and Trailing alignments.
HStack(alignment: .top) {} //Top and Bottom alignments.

//A Modifier directly on the view, where you could get the width
//and height from anything you want. Alignments could be.
//  .leading, .trailing, .bottom, .top, .topleading, .topTrailing
//  .bottomLeading, .bottomTrailing
Text("YourText").frame(width: 300, height: 300, alignment: .topLeading)

Using these types of modifiers can set your views up so that they can be cleaner than the above solutions, and become particularly useful when dealing with complex UI's that might have groups/sections. Nested stacks can have their modifiers in ADDITION to their parent stacks modifiers. The best way to find a solution for you might be different for someone else's UI. Play around with all the different ways of modifying alignment. It will come naturally over time, I'd say in a week or so.

TIP

Text views only take up the required amount of space in a stack. Stacks will only be as WIDE or as HIGH as their largest element on that axis. For example a Text("A") and Text("ABCDEFG") inside of a VStack will have the width of the second one, and a height of both. When working with views you should keep that in mind. There are ways to set stacks to different widths/heights using GeometryReader and .frame(...) modifier. I'll omit those for this answer.