Swift UI: App looks different in simulator than on same iPhone model
Question
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!
1 answers
solution1
1 2021-07-30 03:36:52
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)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
iOS app view looks different on simulator than the XIB file
App looks different on simulator and view controller
My app looks different in Main.storyboard than in the simulator when using stack views
image looks different in ios simulator than in photo preview
The same storyboard looks different on iPhone 4S and on iPhone 5
App on device is different than app on simulator
Autolayout on preview and simulator looks different
app appears different on the simulator than in story board
App is behaving different on iPhone 5.1 simulator and real iPhone 4 with iOS 5.1
Font looks different in same UILabel in one of my iPhone application
Related Tags