I want to center Text in a List, I want to see the text in Text in the middle. I tried some solutions, but the text remains leading.
I was expecting this to work:
struct ContentView: View {
var body: some View {
List {
Text("Hello, world!")
.frame(alignment: .center)
}
}
}
The text remains leading. I also tried this, but not working:
.multilineTextAlignment(.center)
The only solution is this:
HStack(alignment: .center) {
Spacer()
Text("Hello, world!")
Spacer()
}
But I can not imagine this is the right way, I mean I add literally 3 views just to center a simple text. Is there a simpler solution? When I have a large text and I use .multilineTextAlignment(.center), the text is centered. I want it to work with 1 line of text.
You need to give all width for frame, otherwise it just fits text, so alignment has no effect.
This should work:
List {
Text("Hello, world!")
.frame(maxWidth: .infinity, alignment: .center)
}
Related
I have two items in an HStack. I want one of them to be perfectly horizontally centered and the other to be on the left side (have an alignment of .leading). Here is my code so far:
HStack {
Text("1")
.frame(alignment: .leading)
Text("Hello")
.frame(alignment: .center)
}
I have figured out that the .overlay method works. However, I still want Text("Hello") to be aware of the position of Text("1") so that if Text("Hello") were a longer string, it would know not to cover up Text("1"), which is exactly what happens when the .overlay function is used. So I'm wondering if there are any other solutions.
You can add one more Text view inside HStack as hidden which have the same content as your left align text view along with Spacer. Something like this.
HStack {
Text("1")
Spacer()
Text("Good Morning, Hello World. This is long message")
.multilineTextAlignment(.center)
Spacer()
Text("1") // Set the same content as left aligned text view
.hidden()
}
.padding(.horizontal)
Preview
Not sure if it's the best way, but you can use a GeometryReader to get the screen width and skip the first half.
To place the text exactly in the center, you should also calculate the width of the text. you can use a simple extension to get the size of your text:
extension String {
public func size(withFont font: UIFont) -> CGSize {
(self as NSString).size(withAttributes: [.font: font])
}
}
Here is the example code:
GeometryReader { geo in
HStack {
Spacer()
.frame(width: (geo.size.width - "center".size(withFont: UIFont.systemFont(ofSize: 18)).width) / 2)
HStack {
Text("center")
Text("another")
}
}
}
I have an HStack with two Texts.
HStack {
Text("Hello")
Text("World")
}
I want Text("Hello") to be on the left side of the page and Text("World") to be on the right side of the page and for both texts to be equidistant from the exact horizontal center of the page. I added a visual for clarification:Visual
I've tried a bunch of different stuff but I haven't found any way to accomplish this task precisely.
You can use the alignment argument of the frame modifier.
Spacing argument for the HStack is for the spacing in between the texts.
HStack(spacing: 0) {
Text("Hello, World!")
.frame(maxWidth: .infinity, alignment: .trailing)
Text("Hello, World!")
.frame(maxWidth: .infinity, alignment: .leading)
}
I really didn't understand your need but according to your drawing I think you need something like below,
HStack{
Spacer()
Text("Hello")
.background(Color.orange)
Spacer().frame(width: 20)
Text("World")
.background(Color.orange)
Spacer()
}
Is there a way with SwiftUI to align content directly to the top of a sheet instead of in the middle?
My sheet is just a simple Text view.
Use a spacer to move it at top, like
VStack {
Text("Your text")
Spacer() // << here !!
}
You can try this way beside Spacer() too:
VStack {
Text("Hello World!")
.frame(maxHeight: .infinity, alignment: .top)
}
In the following code snippet, the red circles obviously don't fit onto the screen and therefore only the trailing part of the HStack is shown. Instead of that behavior, I want the leading text of the HStack to always be visible and truncate the trailing red circles that don't fit into the available space (replaced with ...).
How can I do this?
struct ContentView: View {
var body: some View {
HStack {
Text("This text should always be visible")
.layoutPriority(1)
Spacer()
ForEach(0..<20) { index in
Image(systemName: "circle.fill")
.font(.body)
.foregroundColor(.red)
}
}
}
}
So I want this:
instead of this:
Can get everything except the ellipses with:
struct ContentView: View {
var body: some View {
HStack {
Text("This text should always be visible")
.fixedSize()
ForEach(0..<20) { index in
Image(systemName: "circle.fill")
.font(.body)
.foregroundColor(.red)
}
}
.frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
}
}
In order to get the ellipses you'll probably have to calculate frame sizes or try to get your images into an attributed string which could get pretty complicated. You might also consider a scroll view or grid.
Can someone explain why:
GeometryReader positions its contents to the left top corner, not in the center.
GeometryReader takes up all available space.
struct ContentView: View {
var body: some View {
VStack(alignment: .center) {
GeometryReader { geo in
Text("Hello, World!")
.frame(width: geo.size.width * 0.7, height: 40)
.background(Color.red)
}
.background(Color.yellow)
Text("More text")
.background(Color.blue)
}
}
}
This is how it looks:
I would expect it to position Text "Hello, World" view in the center.
First you need to make some critical changes to get what you're expecting. The reason it is appearing like this is because you're not using Geometry Reader in the way that you think it's supposed to be used. Geometry reader is essentially a way to get the parent view's size. Typically you won't use it to layout views and you'd still stick with VStack, ZStack, and HStack nested inside of the geometry reader. This is because the reader expands to take up as much space as possible across the X and Y planes. A typical structure to do what you're expecting might look like this. Which ultimately would center "Hello World" inside the center of the geometry reader.
GeometryReader { reader in
VStack {
Spacer()
HStack {
Spacer()
Text("Hello World")
Spacer()
Spacer()
}
}