I am working on a TabView but I want to show an image that occupies the entire screen and the rest of the content in a normal way.
In vertical mode it works correctly but in horizontal mode part of the content bites the notch.
How can I correct this?
My code is as follows:
ContentView.swift
struct ContentView: View {
#State private var selection = 0
var body: some View {
TabView(selection: $selection){
Home()
.tabItem {
VStack {
Image("first")
Text("First")
}
}
.tag(0)
Text("Second View")
.font(.title)
.tabItem {
VStack {
Image("second")
Text("Second")
}
}
.tag(1)
} .edgesIgnoringSafeArea(.top)
}
}
Home.swift
struct Home: View {
var body: some View {
GeometryReader { geometry in
ZStack {
Color(.red)
.edgesIgnoringSafeArea(.all)
ScrollView {
VStack {
Image("slider_concierto1")
.resizable()
//.edgesIgnoringSafeArea(.all)
.frame(height: 250)
.aspectRatio(contentMode: .fit)
VStack {
Text("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.")
}
.padding()
//.frame(minWidth: 0, maxWidth: .infinity, alignment: Alignment.topLeading)
.background(RoundedRectangle(cornerRadius: 16) .foregroundColor(Color.green))
.padding()
}
.frame(width: geometry.size.width)
} //scrollview
} //GEO
}//geo
.edgesIgnoringSafeArea(.all)
}
}
Related
I'm looking how to align text to the top of screen, do you know how to?
import SwiftUI
struct RegisterSignInScreen: View {
var body: some View {
VStack {
Text("Welcome Back!")
.font(.title)
.fontWeight(.bold)
.multilineTextAlignment(.center)
.padding(.bottom, 5.0)
Text("Please sign in to your account")
.font(.subheadline)
.fontWeight(.bold)
.foregroundColor(Color.gray)
.multilineTextAlignment(.center)
}
}
}
struct RegisterSignInScreen_Previews: PreviewProvider {
static var previews: some View {
RegisterSignInScreen()
}
}
image
I tried to embed my VStack in a ZStack:
ZStack(alignment: .top)
But it didn't work.
To see why this is happening you can add a background to your VStack or ZStack
ZStack {
VStack {
//Text items
}
}
.background(.red)
What you will notice (maybe unexpectedly) is that the stack is only as big as it needs to be to contain the text items.
When you add alignment to the stack it aligns the content within the stack to the specified edge of the relatively small stack. It doesn't align the stack to an edge of the screen, or change the size of the stack. What you're actually looking to do is align the stack, not it's content.
In order to align to the top of the screen you can make the stack fill the entire height of the screen. Either by adding a Spacer() at the bottom of the VStack that will fill the remaining vertical space pushing the content upwards, or by applying a frame with .infinity maxHeight: and top aligned content to the VStack.
VStack {
Text("Hello World!")
Spacer()
}
VStack {
Text("Hello World!")
}
.frame(maxHeight: .infinity, alignment: .top)
Alternatively if required for your view, you can do a similar thing with a second stack containing your text stack like so:
var body: some View {
VStack {
welcomeText
Spacer()
}
}
var welcomeText: some View {
VStack {
Text("Welcome Back!")
.font(.title)
.fontWeight(.bold)
.multilineTextAlignment(.center)
.padding(.bottom, 5.0)
Text("Please sign in to your account")
.font(.subheadline)
.fontWeight(.bold)
.foregroundColor(Color.gray)
.multilineTextAlignment(.center)
}
}
You can do this in a couple of ways, but the most obvious way is to simply add a Spacer() in the bottom of the VStack
Like so:
struct RegisterSignInScreen: View {
var body: some View {
VStack {
Text("Welcome Back!")
Text("Please sign in to your account")
Spacer() // <- HERE
}
}
}
This will push your content in the VStack to the top.
Alternatively, you can add a frame modifier and force your VStack height and add the alignment there using .frame
struct RegisterSignInScreen: View {
var body: some View {
VStack {
Text("Welcome Back!")
Text("Please sign in to your account")
}
.frame(maxHeight: .infinity, alignment: .top) // <- HERE
}
}
ZStack(alignment: .top) works, but not the same way as you think)
try to do:
ZStack(alignment: .top){
}
.background(Color.green)
and you will understand why so :)
you need to use spacer :)
VStack {
YourView()
Spacer()
}
I'm trying a lot of different ways, using padding(), spacer(), frame() modifiers but can't get what I want.
Essentially, I would like for the Stack to have a uniform Look w/ the same font sizes across all labels/values. As can see from the pic, the distance label/value ends up being smaller. (Where should I place the minScaleFactor() for it to effect the entire HStack?)
My Goal is
Have all the values/labels shown in it's entirety
Adjust the spacing between each HStack to be the same
Have MinScaleFactor() apply to all the values/labels so that they appear uniform.
Unfortunately, I'm just not getting it. :-(
var body: some View {
HStack (spacing: 15) {
VStack(alignment: .leading){
Text("Load")
Text("24533")
}
.padding(.leading, 10)
VStack(alignment: .leading) {
Text("Time")
Text("99h 44m 05s")
}
VStack(alignment: .leading) {
Text("Dist")
Text("999999.00km")
}
VStack(alignment: .leading) {
Text("D+")
Text("100000m")
}
VStack(alignment: .leading) {
Text("Calories")
Text("1000000033333")
}
VStack(alignment: .leading) {
Text("Joules")
Text("111111")
}
}
.frame(maxWidth: .infinity, alignment: .leading)
.minimumScaleFactor(0.2)
.lineLimit(1)
.font(.subheadline)
.border(Color.blue, width: 3)
}
With the suggestion to add a Spacer in between the 2 texts
I am working on SwiftUI to make a widget and I can't figure out if I'm doing something wrong or there's a bug in SwiftUI.
I have an Image that I use as a background and at the top there's a text. If I apply resizable() to the Image it also affects the behaviour of the text.
var body: some View {
ZStack {
VStack {
Image(affirmation.customImageName ?? "c_0")
.resizable()
.scaledToFill()
.clipped()
}
HStack {
Text(affirmation.title)
.font(.body)
.multilineTextAlignment(.leading)
.lineLimit(nil)
Spacer()
}
.padding(.leading, 5)
.padding(.top, 5)
}
}
Creates this view:
While this code:
var body: some View {
ZStack {
VStack {
Image(affirmation.customImageName ?? "c_0")
.scaledToFill()
.clipped()
}
HStack {
Text(affirmation.title)
.font(.body)
.multilineTextAlignment(.leading)
.lineLimit(nil)
Spacer()
}
.padding(.leading, 5)
.padding(.top, 5)
}
}
Creates this view:
How do you get views to align with the navigation bar items? This can be done in a UIKit app via view.layoutMarginsGuide.
Here’s an example:
var body: some View {
NavigationView {
VStack {
Text("Lorem ipsum nunc fermentum euismod.")
.background(Color.gray)
.padding() //FIXME
.navigationBarTitle("Title")
.navigationBarItems(leading: Button("Hello"){}, trailing: Button("World"){})
Spacer()
}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading) //make it fill the width
}
.navigationViewStyle(StackNavigationViewStyle())
}
This gives the following results on iPad 9.7" portrait and iPhone 11 Pro:
This is not a full answer, and it only addresses a small part of your question, but:
Interestingly, on iPhone, the text actually is aligned if you take kerning into account. This is a good example:
Generated by this body:
var body: some View {
NavigationView {
VStack(alignment: .leading) {
Text("Title.").background(Color.gray).padding(.leading)
Text("Hello.").background(Color.gray).padding(.leading)
Text("Lorem ipsum nunc fermentum euismod.").background(Color.gray).padding(.leading)
}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)
.navigationBarTitle("Title")
.navigationBarItems(leading: Button("Hello"){}, trailing: Button("World"){})
}
.navigationViewStyle(StackNavigationViewStyle())
}
If we zoom in, we can see the kerning in action:
It turns out that on iPhone––though apparently not on iPad––the text is actually aligned. Notice that the Hs are aligned and that the Ts are aligned:
This doesn't really answer your question because you still experience the issue on iPad. But it does at least narrow it down.
I am trying to replicate a calculator app. I cant seem to modify my 'Text' view to look similarly.
Text("0")
.background(Color.gray)
.cornerRadius(10)
.font(.largeTitle)
But its far from what I am trying to replicate.
I tried offset, but it offsets the entire 'Text' view.
Basically I want my Text to look like what is pointed in the image
You can achieve this playing around with ZStack, VStack, HStack and Spacer(). Here is a quick example:
struct CalculatorText: View {
var body: some View {
ZStack {
Rectangle()
.cornerRadius(10)
.foregroundColor(.gray)
VStack {
Spacer() // now the text will be on the bottom of ZStack
HStack {
Spacer() // and now the text will be on the right side of ZStack
Text("0")
.bold()
.font(.system(size: 30))
.foregroundColor(.white)
.multilineTextAlignment(.trailing)
.padding()
}
}
}
.frame(height: 100)
.padding()
}
}
and the result will be: