Why is there no back button in my view with using NavigationLink? - ios

Below is my code which has 4 VStacks which I want to be clickable to take me to my next view:
ForEach (data) { order in
NavigationLink(destination: OrderDetailView(typeof: order.title)){
VStack(spacing: 32){
HStack {
Text(order.title)
.font(.system(size: 22, weight: .bold))
.foregroundColor(.black)
Spacer(minLength: 0)
}
ZStack {
Circle()
.trim(from: 0, to:1)
.stroke(order.color.opacity(0.05),lineWidth: 10)
.frame(width: ((UIScreen.main.bounds.width - 150) / 2), height: ((UIScreen.main.bounds.width - 150) / 2))
Circle()
.trim(from: 0, to: (order.totalcount/tcount))
.stroke(order.color, style: StrokeStyle(lineWidth: 10, lineCap: .round))
.frame(width: ((UIScreen.main.bounds.width - 150) / 2), height: ((UIScreen.main.bounds.width - 150) / 2))
Text(getPercent(current: order.totalcount, max: tcount) + " %")
.font(.system(size: 22, weight: .bold))
.foregroundColor(order.color)
.rotationEffect(.init(degrees: 90))
}
.rotationEffect(.init(degrees: -90))
Text("Total count: " + getDec(val: order.totalcount))
.font(.system(size: 22, weight: .bold))
.foregroundColor(.black)
}
.padding()
.background(.white)
.cornerRadius(15)
.shadow(color: Color.white.opacity(0.2), radius: 10, x:0, y: 0)
}
Everything works fine and the transition takes place but there is no back button for me to come back to my original view. NavigationLink works fine in other parts of the code but not here, not sure why.

Related

Drawing parallel rectangles in SwiftUI to create a Calendar Icon

I'm trying to create a cardView that has a Date on it. Right now, I have the below look, with today's Date within a Square.
I would like to add 2 parallel lines (shown as RED coloured Lines in below pic) such that it looks like a Calendar Icon. Is it possible to do it using Rectangle() instead of using path()
Q: How do I draw the 2 lines thru the top, centre of the Square?
I've tried permutations of this
Rectangle().frame(width: 3, height: 5, alignment: .top).opacity(0.9)
but obviously, it didn't work as the line ended up in the middle of the Date.
VStack {
Text(FormatDisplay.yyyymmdd_day0(inputDate: workout.date))
.padding(2)
.background(RoundedRectangle(cornerRadius: 2).stroke(Color(UIColor.label).opacity(0.8), lineWidth: 2))
.font(.footnote)
.minimumScaleFactor(0.5)
if workout.icuId != "" {
Image("intervalsLogo")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 20, height: 20, alignment: .top)
.clipShape(Circle())
}
if workout.priorityCompliance > 0 {
RingView(compliancePct: workout.priorityCompliance, lineWidth: 2, primaryColor: Color.orange, secondaryColor: Color.orange, size: .tiny)
.frame(width: 20, height: 20)
.font(.caption)
}
Spacer()
}
}
This is what the end result I'm looking for. (the horizontal line above the number is an added bonus if possible)
I have bit modified your code. get This if useful.
RoundedRectangle(cornerRadius: 3)
.stroke(Color(UIColor.label).opacity(0.8), lineWidth: 3)
.frame(width: 35, height: 35, alignment: .center)
.overlay(
VStack(spacing: 2.5) {
HStack(spacing: 8) {
ForEach(0..<3) { _ in
RoundedRectangle(cornerRadius: 3)
.stroke(Color.black.opacity(0.8), lineWidth: 1.5)
.frame(width: 1, height: 7, alignment: .top)
}
}
.offset(y: -3.5)
RoundedRectangle(cornerRadius: 3)
.stroke(Color.black.opacity(0.8), lineWidth: 1.5)
.frame(height: 1)
.padding(.horizontal, 5)
Text(date)
.font(.system(size: 15))
.fontWeight(.bold)
}
,alignment: .top
)
preview
So yeah.. couple hours after I posted this.. figured out the solution.
Key was using the .offset(x: y:) modifier
VStack {
ZStack {
Text(FormatDisplay.yyyymmdd_day0(inputDate: workout.date))
.offset(y: 1)
RoundedRectangle(cornerRadius: 2)
.stroke(Color(UIColor.label).opacity(0.8), lineWidth: 2)
.frame(width: 20, height: 20, alignment: .center)
.offset(y: 0)
RoundedRectangle(cornerRadius: 2)
.stroke(Color.black.opacity(0.8), lineWidth: 2)
.frame(width: 1, height: 6, alignment: .top)
.offset(x: 4, y: -10)
RoundedRectangle(cornerRadius: 2)
.stroke(Color.black.opacity(0.8), lineWidth: 2)
.frame(width: 1, height: 6, alignment: .top)
.offset(x: -4, y: -10)
}

Swift UI: App looks different in simulator than on same iPhone model

import SwiftUI
struct ReviewsPageView: View {
#State private var showingSquare = false
var data = ProfileData.getPreviewData()
#State var totalRating = 0.0
#State var numReviews = 40
#State var star5: Double = 0.0
#Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
var colors = AppData.getData()
var body: some View {
ZStack {
ZStack{
VStack{
LinearGradient(gradient: Gradient(colors: [colors.bright, colors.mid]), startPoint: .topLeading, endPoint: .bottomTrailing)
.frame(width: 500, height: 800)
.ignoresSafeArea()
Spacer()
}
}
VStack {
HStack{
Button(action: {
self.presentationMode.wrappedValue.dismiss()
}, label: {
Image(systemName: "arrow.left")
.foregroundColor(.white)
.font(.title2)
})
Spacer()
Text("REVIEWS")
.foregroundColor(.white)
.font(.headline)
.fontWeight(.semibold)
Spacer()
Image(systemName: "gearshape")
.foregroundColor(.white)
.font(.title2)
}.frame(width: 400)
.padding(.bottom, -5)
ScrollView {
ZStack {
Circle()
.foregroundColor(.white)
.frame(width: 5000)
.offset(x: 0, y: 25)
VStack{
Text("\(String(format: "%.1f",totalRating))")
.fontWeight(.black)
.font(Font.custom(data.font, size: 80))
.padding(.top, 40)
HStack(spacing: 0){
ForEach(0..<Int(totalRating / 1), id: \.self){ _ in
Star(corners: 5, smoothness: 0.38)
.fill(Color.yellow)
.frame(width: 55, height: 55)
.shadow(radius: 1, x: -0.5, y: 1)
}
ZStack{
Star(corners: 5, smoothness: 0.38)
.fill(Color.gray)
.frame(width: 55, height: 55)
Star(corners: 5, smoothness: 0.38)
.fill(Color.yellow)
.frame(width: 55, height: 55)
.shadow(radius: 1, x: -0.5, y: 1)
.overlay(
HStack{
Spacer()
Rectangle()
.foregroundColor(.white)
.frame(width: CGFloat(35 - (totalRating.truncatingRemainder(dividingBy: 1.0)) * 35), height: 55)
.padding(.trailing, 1)
}
)
}
ForEach(0..<4 - Int(totalRating / 1), id: \.self){ _ in
Star(corners: 5, smoothness: 0.38)
.fill(Color.gray)
.frame(width: 55, height: 55)
.shadow(radius: 1, x: -0.5, y: 1)
.opacity(0)
}
}.padding(.top, -30)
.scaleEffect(0.9)
Text("based on \(numReviews) reviews")
.fontWeight(.light)
.font(Font.custom(data.font, size: 20))
.padding(.bottom, 15)
.frame(width: 300)
.foregroundColor(Color("gray"))
HStack{
Text("Excellent")
.font(Font.custom(data.font, size: 17))
.fontWeight(.light)
.foregroundColor(.black)
.padding(.bottom, 5)
Spacer()
ProgressView(value: Double(data.reviewNumbers[4]) / Double(numReviews) * 100, total: 100.0)
.progressViewStyle(LinearProgressViewStyle(tint: Color.green))
.frame(width: 250)
.scaleEffect(x: 1, y: 2, anchor: .bottom)
}.frame(width: 375)
.padding(.bottom, -10)
VStack{
HStack{
Text("Good")
.font(Font.custom(data.font, size: 17))
.fontWeight(.light)
.foregroundColor(.black)
.padding(.bottom, 5)
.multilineTextAlignment(.leading)
Spacer()
ProgressView(value: Double(data.reviewNumbers[3]) / Double(numReviews) * 100, total: 100.0)
.progressViewStyle(LinearProgressViewStyle(tint: Color("lime")))
.frame(width: 250)
.scaleEffect(x: 1, y: 2, anchor: .bottom)
}.frame(width: 375) .padding(.bottom, -10)
HStack{
Text("Average")
.font(Font.custom(data.font, size: 17))
.fontWeight(.light)
.foregroundColor(.black)
.padding(.bottom, 5)
.multilineTextAlignment(.leading)
Spacer()
ProgressView(value: Double(data.reviewNumbers[2]) / Double(numReviews) * 100, total: 100.0)
.progressViewStyle(LinearProgressViewStyle(tint: Color.yellow))
.frame(width: 250)
.scaleEffect(x: 1, y: 2, anchor: .bottom)
}.frame(width: 375)
.padding(.bottom, -10)
HStack{
Text("Below Average")
.font(Font.custom(data.font, size: 17))
.fontWeight(.light)
.foregroundColor(.black)
.padding(.bottom, 5)
.multilineTextAlignment(.leading)
Spacer()
ProgressView(value: Double(data.reviewNumbers[1]) / Double(numReviews) * 100, total: 100.0)
.progressViewStyle(LinearProgressViewStyle(tint: Color.orange))
.frame(width: 250)
.scaleEffect(x: 1, y: 2, anchor: .bottom)
}.frame(width: 375) .padding(.bottom, -10)
HStack{
Text("Poor")
.font(Font.custom(data.font, size: 17))
.fontWeight(.light)
.foregroundColor(.black)
.padding(.bottom, 5)
.multilineTextAlignment(.leading)
Spacer()
ProgressView(value: Double(data.reviewNumbers[0]) / Double(numReviews) * 100, total: 100.0)
.progressViewStyle(LinearProgressViewStyle(tint: Color.red))
.frame(width: 250)
.scaleEffect(x: 1, y: 2, anchor: .bottom)
}.frame(width: 375) .padding(.bottom, -10)
}
// ProgressView(value: CGFloat(data.reviewNumbers[0] / numReviews))
// ProgressView("", value: Double(data.reviewNumbers[0] / numReviews), total: 100)
Rectangle()
.frame(width: 375, height: 1)
.foregroundColor(Color("text"))
.padding(.top, 20)
VStack {
Review(reviews: [ReviewData(name: "Joan Perkins", image: UIImage(imageLiteralResourceName: "doctor"), rating: 5, time: "1627060557", review: "This is a great doctor. Fixed my issue")])
Review(reviews: [ReviewData(name: "Joan Perkins", image: UIImage(imageLiteralResourceName: "doctor"), rating: 5, time: "1627060557", review: "This is a great doctor. Fixed my issue")])
Review(reviews: [ReviewData(name: "Joan Perkins", image: UIImage(imageLiteralResourceName: "doctor"), rating: 5, time: "1627060557", review: "This is a great doctor. Fixed my issue")])
Review(reviews: [ReviewData(name: "Joan Perkins", image: UIImage(imageLiteralResourceName: "doctor"), rating: 5, time: "1627060557", review: "This is a great doctor. Fixed my issue")])
Review(reviews: [ReviewData(name: "Joan Perkins", image: UIImage(imageLiteralResourceName: "doctor"), rating: 5, time: "1627060557", review: "This is a great doctor. Fixed my issue")])
Review(reviews: [ReviewData(name: "Joan Perkins", image: UIImage(imageLiteralResourceName: "doctor"), rating: 5, time: "1627060557", review: "This is a great doctor. Fixed my issue")])
}
Spacer()
}
}
}
}
}.onAppear{
numReviews = data.reviewNumbers.reduce(0, +)
totalRating = Double(Double(1*data.reviewNumbers[0] + 2*data.reviewNumbers[1] + 3*data.reviewNumbers[2] + 4*data.reviewNumbers[3] + 5*data.reviewNumbers[4]) / 500.0)
//totalRating = 3.5
}
.navigationBarHidden(true)
}
}
struct ReviewsPageView_Previews: PreviewProvider {
static var previews: some View {
ReviewsPageView()
}
}
Here is my code ^ ^ ^
When I run the code in the iPhone 11 Xcode simulator it looks great. Here is a picture:
https://i.stack.imgur.com/IoQNY.png
When I run the code on my iPhone 11 it looks awful. Here is a picture of that:
https://i.stack.imgur.com/T98i0.png
Some text doesn't show. Buttons get cut off. Everything is larger than it should be. Why is this happening?
I am running the code on an IPHONE 11, and in the simulator I also run it on an IPHONE 11, so I don't understand why there would be a problem.
Any help would be greatly appreciated, thank you!
You are using all sorts of hardcoded values:
.frame(width: 400)
.frame(width: 375)
.frame(width: 375) .padding(.bottom, -10)
Not all phones have a width of 375 or 400 points. Remove these and let SwiftUI figure it out! For example, if you want to have something take up the entire screen width, try:
.frame(maxWidth: .infinity)

Custom range slider in SwiftUI

Trying to add slider minimum & maximum range selection with value in SwiftUI.
Add min & max value like above image.
// define min & max value
#State var minValue: Float = 0.0
#State var maxValue: Float = Float(UIScreen.main.bounds.width - 50.0)
// setup slider view
ZStack (alignment: Alignment(horizontal: .leading, vertical: .center), content: {
Rectangle()
.fill(Color(UIColor.systemTeal).opacity(0.3))
.cornerRadius(30)
.frame(width: CGFloat(self.max), height: 30)
Rectangle()
.fill(Color.blue.opacity(25))
.cornerRadius(30)
.offset(x: CGFloat(self.min))
.frame(width: CGFloat((self.max + 20) - self.min), height: 30)
Circle()
.fill(Color.orange)
.frame(width: 30, height: 30)
.offset(x: CGFloat(self.min))
.gesture(DragGesture().onChanged({ (value) in
if value.location.x > 8 && value.location.x <= self.sliderWidth &&
value.location.x < CGFloat(self.max) {
self.min = Double(value.location.x)
}
}))
Circle()
.fill(Color.orange)
.frame(width: 30, height: 30)
.offset(x: CGFloat(self.max))
.gesture(DragGesture().onChanged({ (value) in
if value.location.x <= self.sliderWidth && value.location.x > CGFloat(self.min) {
self.max = Double(value.location.x)
}
}))
})
.padding()
In this code, I'm facing issue with max value, while drag the max value and then changed the slider track width, so it's not moving perfectly. I tried with different different frame, but it doesn't work.
Finally, I got the solution.
// define min & max value
#State var minValue: Float = 0.0
#State var maxValue: Float = Float(UIScreen.main.bounds.width - 50.0)
// setup slider view
VStack {
HStack {
Text("0")
.offset(x: 28, y: 20)
.frame(width: 30, height: 30, alignment: .leading)
.foregroundColor(Color.black)
Spacer()
Text("100")
.offset(x: -18, y: 20)
.frame(width: 30, height: 30, alignment: .trailing)
.foregroundColor(Color.black)
}
ZStack(alignment: Alignment(horizontal: .leading, vertical: .center), content: {
Capsule()
.fill(Color.black.opacity(25))
.frame(width: CGFloat((UIScreen.main.bounds.width - 50) + 10), height: 30)
Capsule()
.fill(Color.black.opacity(25))
.offset(x: CGFloat(self.minValue))
.frame(width: CGFloat((self.maxValue) - self.minValue), height: 30)
Circle()
.fill(Color.orange)
.frame(width: 30, height: 30)
.background(Circle().stroke(Color.white, lineWidth: 5))
.offset(x: CGFloat(self.minValue))
.gesture(DragGesture().onChanged({ (value) in
if value.location.x > 8 && value.location.x <= (UIScreen.main.bounds.width - 50) &&
value.location.x < CGFloat(self.maxValue - 30) {
self.minValue = Float(value.location.x - 8)
}
}))
Text(String(format: "%.0f", (CGFloat(self.minValue) / (UIScreen.main.bounds.width - 50)) * 100))
.offset(x: CGFloat(self.minValue))
.frame(width: 30, height: 30, alignment: .center)
.foregroundColor(Color.black)
Circle()
.fill(Color.orange)
.frame(width: 30, height: 30)
.background(Circle().stroke(Color.white, lineWidth: 5))
.offset(x: CGFloat(self.maxValue - 18))
.gesture(DragGesture().onChanged({ (value) in
if value.location.x - 8 <= (UIScreen.main.bounds.width - 50) && value.location.x > CGFloat(self.minValue + 50) {
self.maxValue = Float(value.location.x - 8)
}
}))
Text(String(format: "%.0f", (CGFloat(self.maxValue) / (UIScreen.main.bounds.width - 50)) * 100))
.offset(x: CGFloat(self.maxValue - 18))
.frame(width: 30, height: 30, alignment: .center)
.foregroundColor(Color.black)
})
.padding()
}

text alignment / swiftUi

swiftui i am learning new. I couldn't align my brain stopped. In the picture I said how I wanted to do this. Can you help?
HStack{
Text("Picture")
.font(.custom("Pacifico-Regular",size: 50))
.padding()
.foregroundColor(Color.white)
.shadow(color: .white, radius: 10, x: 0, y: 0)
Image("1coin").resizable()
.aspectRatio(contentMode: .fit)
.frame(width:30, height: 30)
Text("123")
.font(.custom("Pacifico-Regular",size: 20))
.foregroundColor(Color.white)
}
Here is possible layout (with some replicated components instead of your custom). Prepared with Xcode 12.1 / iOS 14.1
HStack{
Spacer()
Text("Picture")
.font(.custom("Pacifico-Regular",size: 50))
.padding()
.foregroundColor(Color.white)
.shadow(color: .white, radius: 10, x: 0, y: 0)
Spacer().overlay(
HStack {
Image(systemName: "1.circle").resizable()
.foregroundColor(Color.white)
.aspectRatio(contentMode: .fit)
.frame(width:30, height: 30)
Text("123")
.font(.custom("Pacifico-Regular",size: 20))
.foregroundColor(Color.white)
}
, alignment: .trailing)
}
You can use ZStack to embed two HStacks and align them separately.
They will be displayed on top of each other.
You align "Picture" text to the middle - it happens by default.
And then align second HStack with Spacer()
ZStack {
HStack{
Text("Picture")
.font(.custom("Pacifico-Regular",size: 50))
.background(Color.red)
.padding()
.shadow(color: .black, radius: 10, x: 0, y: 0)
}
HStack {
Spacer()
Image("1coin").resizable()
.aspectRatio(contentMode: .fit)
.frame(width:30, height: 30)
.background(Color.red)
Text("123")
.font(.custom("Pacifico-Regular",size: 20))
.background(Color.red)
}
}
If you want to keep all elements at the top, you will need another VStack + Spacer on top of ZStack:
VStack {
ZStack {
HStack{
Text("Picture")
.font(.custom("Pacifico-Regular",size: 50))
.background(Color.red)
.padding()
.shadow(color: .black, radius: 10, x: 0, y: 0)
}
HStack {
Spacer()
Image("1coin").resizable()
.aspectRatio(contentMode: .fit)
.frame(width:30, height: 30)
.background(Color.red)
Text("123")
.font(.custom("Pacifico-Regular",size: 20))
.background(Color.red)
}
}
Spacer()
}

TextEditor added / SwiftUi

I could not adjust the appearance of the Text Editor I created.text will have margins.
I tried to do it myself but I messed it up, I couldn't.I want it to be like the picture.
VStack {
TextEditor(text: $inputText)
.background(Color.black)
.frame(height:geometry.size.height / 3, alignment: .center)
.cornerRadius(25)
.border(Color.yellow, width: 5)
.lineSpacing(10)
.autocapitalization(.words)
.disableAutocorrection(true)
.padding()
}
Spacer().frame(height: geometry.size.height / 15)
VStack {
Button(action: {}, label: {
Text("Gönder")
.frame(width: geometry.size.width / 3, height: 50)
.padding(10)
.font(Font.system(size: 30, weight: .medium, design: .serif))
.foregroundColor(.white)
.background(RoundedRectangle(cornerRadius: 30))
.foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
})
}
First , for changing TextEditor background color
I could not find a SwiftUI 100% solution for that (maybe apple will support this in future ) , so you need to change every UITextView.appearance().backgroundColor in the app
init() {
UITextView.appearance().backgroundColor = UIColor.black
}
don't miss import UIKit
Then for corner radius , you need to use overlay modifier for a rounded corners
VStack {
TextEditor(text: $inputText)
.frame(height:geometry.size.height / 3, alignment: .center)
.lineSpacing(10)
.autocapitalization(.words)
.disableAutocorrection(true)
.padding()
}.overlay(
RoundedRectangle(cornerRadius: 25)
.stroke(Color.yellow, lineWidth: 5)
)
.padding()

Resources