Im trying to push one GeometryReader as a button to the bottom of the screen but Spacer doesn't work here...
The idea is to make the app responsive to all screen sizes.
VStack {
GeometryReader { geometry in
Text("VeganFood")
.font(.system(size: geometry.size.width/12, weight: .bold))
.foregroundColor(.white)
.frame(maxWidth: .infinity)
.frame(maxHeight: 200)
}
/// Spacer doesn't work here
GeometryReader { geometry in
Button(action: { }) {
Text("Let's get started!")
.font(.system(size: geometry.size.width/30, weight: .medium, design: .rounded))
.frame(width: geometry.size.width/3, height: geometry.size.height/7)
.foregroundColor(.white)
.background(Color.black)
.cornerRadius(20.0)
}
.frame(maxWidth: .infinity)
.frame(maxHeight: 200)
}
}
GeometryReader takes space as much as it can.
struct ContentView: View {
var body: some View {
VStack {
GeometryReader { geometry in
Text("VeganFood")
.font(.system(size: geometry.size.width/12, weight: .bold))
.foregroundColor(.red)
.frame(maxWidth: .infinity)
.frame(maxHeight: 200)
}
GeometryReader { geometry in
VStack { //<= here
Spacer() //<=here
Button(action: { }) {
Text("Let's get started!")
.font(.system(size: geometry.size.width/30, weight: .medium, design: .rounded))
}
.frame(width: geometry.size.width/3, height: geometry.size.height/7)
.foregroundColor(.white)
.background(Color.black)
.cornerRadius(20.0)
.frame(maxWidth: .infinity)
}
}
}
}
}
There might be some different approaches
Related
Lately started learning SwiftUI and I ran into a problem.
I tried putting image and text component and it didn't break the line.
Someone have an idea to solve it?
This is my code:
struct RestaurantOverlay: View {
var amountOfStars: Int
var body: some View {
ZStack {
Text("Burger")
.font(.system(size: 17.5))
.foregroundColor(.white)
.fontWeight(.heavy)
Image(systemName: "star.fill")
.font(.system(size: 13))
.foregroundColor(.white)
.fontWeight(.medium)
}
.padding(10)
.background(Color.black)
.opacity(0.8)
.cornerRadius(10.0)
}
}
ZStack {
HStack {
Text("Burger")
.font(.system(size: 17.5))
.foregroundColor(.white)
.fontWeight(.heavy)
Image(systemName: "star.fill")
.font(.system(size: 13))
.foregroundColor(.white)
.fontWeight(.medium)
}
.padding(10)
.background(Color.black)
.opacity(0.8)
.cornerRadius(10.0)
}
You can change HStack to VStack if you want vertically.
A whiteness is seen in the area drawn with the red line. If I change the background color of the most inclusive Vstack, that white area changes.
Deleting spacer() lines doesn't work.
Why is there a gap even though there is no space in between?
struct TabbarView: View {
var body: some View {
VStack{
Spacer()
ZStack{
Color.orange.opacity(0.5)
VStack(spacing: 0){
Text("Home")
.padding()
}
}
Spacer()
HStack{
VStack{
Image(systemName: "homekit")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: UIScreen.main.bounds.size.width / 15, height: UIScreen.main.bounds.size.height / 25)
}
}
.frame(width: UIScreen.main.bounds.size.width, height: UIScreen.main.bounds.size.height / 13)
.background(Color.purple)
}
.ignoresSafeArea()
// .background(Color.purple.shadow(radius: 2))
}
}
enter image description here
you can add for VStack:
VStack {}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .center)
updated:
struct ContentView: View {
var body: some View {
ZStack {
Color.orange.opacity(0.5)
VStack {
Spacer()
VStack(spacing: 0){
Text("Home")
.padding()
}
Spacer()
HStack {
VStack {
Image(systemName: "homekit")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 25, height: 25, alignment: .center)
.frame(width: UIScreen.main.bounds.size.width / 15, height: UIScreen.main.bounds.size.height / 25)
}
}
.frame(width: UIScreen.main.bounds.size.width, height: UIScreen.main.bounds.size.height / 13)
.background(Color.purple)
}
}
.ignoresSafeArea()
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
}
}
you used nesting incorrectly and there is a native TabView for tabs
result:
I'm trying to make a view in SwiftUI as shown below using SwiftUI.
Below is the code I have written, but I'm not sure what will the best way to code this is. My code looks like below with hard-coded values.
var body: some View {
TestView {
VStack {
HStack {
Image("profile")
.padding(.top, 30)
.padding(.leading, 30)
Spacer()
}
HStack {
Text("UserName")
.font(.system(size: 20, weight: .bold, design: .default))
.foregroundColor(.gray)
.padding(.leading, 30)
Spacer()
}
.padding(.bottom, 1)
HStack(spacing: 0) {
Text("4")
.font(.system(size: 42, weight: .bold, design: .default))
.foregroundColor(.pink)
VStack {
Text("/10")
.font(.system(size: 25, weight: .bold, design: .default))
.foregroundColor(.gray)
Spacer()
Spacer()
Spacer()
Spacer()
}
}
Image("stars")
.resizable()
.padding(.leading, 20)
.padding(.trailing, 20)
.padding(.bottom, 5)
}
}
.frame(width: 200, height: 250, alignment: .center)
}
the output looks like this
I believe this should not be the correct way to do this, with multiple spacers, too many adjustments.
I'm new to SwiftUI, though the same UI in xib/storyboard won't take me more than 10-15mins with constraints.
Can anyone suggest a better way?
P.S. please ignore color and font size
-----------------------------Updated code----------------------------
var body: some View {
TestView {
VStack(alignment: .leading) {
Image("profile") //Async-image
.offset(x: 30)
VStack(alignment: .center) {
Text("UserName")
.font(Font(nameFont))
ZStack(alignment: Alignment(horizontal: .leading, vertical: .center)) {
HStack(alignment: .firstTextBaseline) {
Text("4")
.font(Font(bigFont))
.foregroundColor(.pink)
}
HStack(alignment: .firstTextBaseline, spacing: 0) {
Text("4")
.font(Font(bigFont))
.opacity(0)
Text("/5")
.font(Font(smallFont))
.baselineOffset((bigFont.capHeight))
.foregroundColor(.gray)
}
}
Image("stars") //view with rating logic
.resizable()
.frame(height: 30)
.padding(.leading, 20)
.padding(.trailing, 20)
.padding(.bottom, 5)
}
}
}
.frame(width: 200, height: 250, alignment: .center)
}
Could avoid Spacers and VStack
HStack(spacing: 0) {
Text("4")
.font(.system(size: 42, weight: .bold, design: .default))
.foregroundColor(.pink)
Text("/10")
.font(.system(size: 25, weight: .bold, design: .default))
.foregroundColor(.gray)
.offset(y: -20)
}
I was building a form on Xcode 12 and using iOS 14 and everything was working as expected. But after switching to 13 and iOS 15, the height of the cells are inconsistent, even changing when scrolled offscreen like they were a reusable table cell.
For example, I have this code: *** EDIT: I changed the below code to have everything that's currently on that page.
Struct EvalViewMHx: View {
var body: some View {
VStack {
Form {
Label(
title: {
Text("Demographics & Medical History")
.font(.title)
.foregroundColor(.white)
.padding()
},
icon: {
Image(systemName: "heart.text.square.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.foregroundColor(.white)
})
.listRowBackground(Color.blue)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .center)
Section(header: Text("Demographics")) {
demographicsView(nameText: $nameText, DOB: $DOB, height: $height, weight: $weight)
}
Section(header: Text("Medical History")) {
VStack {
HStack {
Text("When did you get hurt?")
.padding()
Spacer()
Toggle("", isOn: $doesNotKnowInjuryDate)
.frame(width: 35)
.padding(.horizontal)
Text("I don't know")
.fontWeight(!doesNotKnowInjuryDate ? .regular : .bold)
.padding(.leading)
}
if !doesNotKnowInjuryDate {
DatePicker("Injury Date", selection: $injuryDate, displayedComponents: [.date])
.foregroundColor(Color(UIColor.systemGray3))
.padding()
}
}
.frame(minWidth: .zero, idealWidth: .infinity, maxWidth: .infinity, minHeight: 150, idealHeight: 150, maxHeight: 150, alignment: .center)
VStack(alignment: .leading) {
HStack {
Text("Where is your injury?")
Spacer()
Text("Right")
.fontWeight(isInjuryOnRightSide ? .regular : .bold)
Toggle("", isOn: $isInjuryOnRightSide)
.toggleStyle(SwitchToggleStyle(tint: Color(UIColor.systemGray5)))
.frame(width: 35)
.padding(.horizontal)
Text("Left")
.fontWeight(!isInjuryOnRightSide ? .regular : .bold)
.padding(.leading)
}
.zIndex(2.0)
Picker(selection: $injuryLocation, label: Text(""), content: {
ForEach(injuryLocations, id: \.self) { location in
Text(location)
}
})
.pickerStyle(WheelPickerStyle())
.frame(minWidth: .zero, idealWidth: .infinity, maxWidth: .infinity, minHeight: 100, idealHeight: 100, maxHeight: 100, alignment: .center)
.zIndex(1.0)
.padding()
}
.padding()
VStack(alignment: .leading) {
Text("How did you get hurt? (Method of Injury)")
.padding()
TextEditor(text: $MOI)
.frame(height: 150)
.background(Color(UIColor.systemGray5).opacity(0.75))
.cornerRadius(15)
}
.frame(minWidth: .zero, idealWidth: .infinity, maxWidth: .infinity, minHeight: 200, idealHeight: 200, maxHeight: 200, alignment: .center)
.padding()
if injuryLocation != "Lower Back" && injuryLocation != "Upper Back" && injuryLocation != "Head / Neck" && injuryLocation != "Chest" {
VStack {
pastInjuryHistory(injuryLocation: $injuryLocation, hasHadSameSideInjury: $hasHadSameSideInjury, hasHadOppositeSideInjury: $hasHadOppositeSideInjury, isSameSide: true)
pastInjuryHistory(injuryLocation: $injuryLocation, hasHadSameSideInjury: $hasHadSameSideInjury, hasHadOppositeSideInjury: $hasHadOppositeSideInjury, isSameSide: false)
}
}
}
}
}
}
}
(In the picture below, you're also seeing some buttons at the top, which are just rectangles in a horizontal scroll view. The code above is then just placed below that in a tab view like so: )
TabView(selection: $activeTab) {
EvalViewMHx()
.tag(1)
EvalObjectiveView()
.tag(2)
viewThree(activeTab: $activeTab)
.tag(3)
viewFour(activeTab: $activeTab)
.tag(4)
}
.tabViewStyle(PageTabViewStyle())
.onChange(of: activeTab, perform: { value in
print(activeTab)
})
.animation(.default)
and the output shows that one of the cells has a totally different height.
Even stranger, another section has a cell with a 0 height but still shows the text field sitting over the rest of the cells. I have a picker view that is also in these cells and putting the pickerStyle to
.pickerStyle(InlinePickerStyle())
expands the cell to larger than an iPad screen size and doesn't put it in a wheel like it did in the previous versions.
Are these bugs that I should just be patient for a fix, or is there something that I can do to fix this and keep moving with my project?
Was struggling with the same issue. Turned out .animation caused the issue, as its deprecated since iOS 15. Removing that line fixed the issue for me.
All
I'm new to iOS and SwiftUI (2 months). I'm struggling to understand the following behavior and hope someone can point me as to how I can diagnose.
I have this code successfully generating this view in the preview provider
however when I run it on a device or in the simulator the fonts change (happens for system images also) to look more like this (scaled up).
The view below is rendered inside of a very generic tabview - I cant fathom it at all and could use some guidance.
Thanks
Craig
var body: some View {
VStack(spacing: 0.0) {
HStack(alignment: .top){
Text(player.firstName)
.bold()
Text(player.lastName)
.bold()
}
.font(.title)
HStack {
Image(uiImage: UIImage(data: player.playerPhoto) ?? UIImage())
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: /*#START_MENU_TOKEN#*/100/*#END_MENU_TOKEN#*/, height: 100)
.clipShape(Circle())
.overlay(Circle().stroke(Color.purple, lineWidth: 4.0))
Spacer()
VStack {
Text("lifetime averages")
.font(.body)
.foregroundColor(Color.gray)
HStack {
Spacer()
VStack {
Text("Batting")
.font(.title2)
.bold()
Text("\(battingAverage, specifier: "%.3f")")
}
.padding(.leading)
if isPitcher {
Spacer()
VStack {
Text("ERA")
.font(.title2)
.bold()
Text("\(earnedRunAverage, specifier: "%.2f")")
}
.padding(.trailing)
Spacer()
}
}
}
Spacer()
}
HStack {
VStack {
Text("\(noTeams)")
.font(.headline)
Text("teams")
.font(.subheadline)
.foregroundColor(Color.gray)
}
.padding(.leading, 10)
Spacer()
VStack {
Text("\(noSeasons)")
.font(.headline)
Text("seasons")
.font(.subheadline)
.foregroundColor(Color.gray)
}
Spacer()
VStack {
Text("\(noGames)")
.font(.headline)
Text("games")
.font(.subheadline)
.foregroundColor(Color.gray)
}.padding(.trailing, 10)
}
HStack{
Spacer()
Text("All Lifetime Stats >")
.font(.callout)
.foregroundColor(Color.blue)
}
}
.frame(width: 350, height: 200, alignment: /*#START_MENU_TOKEN#*/.center/*#END_MENU_TOKEN#*/)
}
Your code does not specify a .font(...) for those two Text elements.
Is it possible you have set the default font somewhere else?
I can reproduce what you're getting by doing this (using PlayerView as a stand-alone view, not in a table).
If using UIKit App Delegate, in willConnectTo session:
let contentView = PlayerView()
.font(.largeTitle)
or, if using SwiftUI App:
#main
struct TestApp: App {
var body: some Scene {
WindowGroup {
PlayerView()
.font(.largeTitle)
}
}
}