[Technical Questions]

[katieliuu]

In what area do you have a technical challenge?

Xcode, Simulator & Previews

Description

Hi! For some reason, the view inside Xcode is rendering my design correctly, but when I run my code, the spacing becomes very strange.

Desired:

Versus:

Reproduction

Resized images and added Spacing. Code is below.

//
//  File.swift
//
//
//  Created by Katie Liu on 1/24/23.
//

import Foundation
import SwiftUI

struct KatieLiuView: View {
    init() {
        UISegmentedControl.appearance().selectedSegmentTintColor = .brown
        UISegmentedControl.appearance().setTitleTextAttributes([.foregroundColor: UIColor.white], for: .selected)
    }

    @State private var selectedSide: WhichFact = .tofu
    var body: some View {
        NavigationView {
            VStack {
                Picker("My Favorite...", selection: $selectedSide) {
                    ForEach(WhichFact.allCases, id: \.self) {
                        Text($0.rawValue)
                    }
                }
                .pickerStyle(SegmentedPickerStyle())
                .padding()
                
                Spacer()
                CappucinoView(selectedSide: selectedSide)
                Spacer()
            }
            .navigationTitle("My Favorite...")
            Spacer()
        }
    }
}

enum WhichFact: String, CaseIterable {
    case tofu = "Evening Meal"
    case place = "City in the US"
    case cappucino = "Morning Drink"
    var id: String {
        rawValue
    }
}

struct CappucinoView: View {
    var selectedSide: WhichFact
    var body: some View {
        switch selectedSide {
        case .tofu:
            Bundle.module.image(fromFileNamed: "Tofu", type: "jpg")
                .resizable()
                .frame(width: 500, height: 500)
            Spacer()
            Text("...is Mapo Tofu!")
                .font(.headline)
        case .place:
            Bundle.module.image(fromFileNamed: "Pittsburgh", type: "jpg")
                .resizable()
                .frame(width: 620, height: 500)
            Spacer()
            Text("...is Pittsburgh!")
                .font(.headline)
        case .cappucino:
            Bundle.module.image(fromFileNamed: "Cappuccino", type: "jpg")
                .resizable()
                .frame(width: 400, height: 500)
            Spacer()
            Text("...is a cappuccino!")
                .font(.headline)
        }
    }
}

struct TofuImageView: View {
    var body: some View {
        Bundle.module.image(fromFileNamed: "Tofu", type: "jpg")
            .resizable()
            .frame(width: 500, height: 500)
    }
}

struct MoreInfoView: PreviewProvider {
    static var previews: some View {
            KatieLiuView()
            .preferredColorScheme(.light)
    }
}

Expected behavior

Normal spacing

Additional context

No response

Code of Conduct

• I agree to follow this course's Code of Conduct and Contributing Guidelines

[vishnuravi]

Hi @katieliuu,

The reason this is happening is that in your preview, you are just looking at KatieLiuView, but when you navigate to that view from within the app, you're already inside a NavigationView and KatieLiuView nests another NavigationView inside it. That is causing the extra padding to show up. If you remove the NavigationView that is wrapping your VStack in the code above (you don't need it), the extra space should disappear.

Vishnu

[PSchmiedmayer]

@vishnuravi Very good summary! 👍
@katieliuu Let us know if this solved your issue and then mark @vishnuravi's comment as complete 🚀

One addiitonal thing to note: If you still want to see how you view looks in a navigation view in your preview after you have removed the NavigationStack in your view, you could add this just for the preview in your PreviewProvider:

struct MoreInfoView: PreviewProvider {
    static var previews: some View {
        NavigationStack {
            KatieLiuView()
                .preferredColorScheme(.light)
        }
    }
}

This allows you to preview your view in the NavigationStack without adding it to your view itself and then have this navigation view duplication 👍

[katieliuu]

@vishnuravi @PSchmiedmayer

Thanks so much for the input! For some reason, I removed the Navigation View and changed some things, but the views still do not line up. Is there anything I still need to do here?

Original:

New View (still altered):

Code:

//
// This source file is part of the CS342 2023 Application project
//
// SPDX-FileCopyrightText: 2023 Stanford University
//
// SPDX-License-Identifier: MIT
//
// Citations: Segmented Control by Sean Allen
//

import Foundation
import SwiftUI

struct KatieLiuView: View {
    init() {
        UISegmentedControl.appearance().selectedSegmentTintColor = .brown
        UISegmentedControl.appearance().setTitleTextAttributes([.foregroundColor: UIColor.white], for: .selected)
    }
    
    @State private var selectedSide: WhichFact = .tofu
    var body: some View {
        VStack {
            Spacer()
                Text("My Favorite...")
                    .bold()
                    .font(.largeTitle)
            Picker("My Favorite...", selection: $selectedSide) {
                ForEach(WhichFact.allCases, id: \.self) {
                    Text($0.rawValue)
                }
            }
            .pickerStyle(SegmentedPickerStyle())
            .padding()
            CappucinoView(selectedSide: selectedSide)
            Spacer()
        }
    }
}

enum WhichFact: String, CaseIterable {
    case tofu = "Evening Meal"
    case place = "City in the US"
    case cappucino = "Morning Drink"
    var id: String {
        rawValue
    }
}

struct CappucinoView: View {
    var selectedSide: WhichFact
    var body: some View {
        switch selectedSide {
        case .tofu:
            Bundle.module.image(fromFileNamed: "Tofu", type: "jpg")
                .resizable()
                .frame(width: 500, height: 500)
            Spacer()
            Text("...is Mapo Tofu!")
                .font(.headline)
        case .place:
            Bundle.module.image(fromFileNamed: "Pittsburgh", type: "jpg")
                .resizable()
                .frame(width: 620, height: 500)
            Spacer()
            Text("...is Pittsburgh!")
                .font(.headline)
        case .cappucino:
            Bundle.module.image(fromFileNamed: "Cappuccino", type: "jpg")
                .resizable()
                .frame(width: 400, height: 500)
            Spacer()
            Text("...is a cappuccino!")
                .font(.headline)
        }
    }
}

struct TofuImageView: View {
    var body: some View {
        Bundle.module.image(fromFileNamed: "Tofu", type: "jpg")
            .resizable()
            .frame(width: 500, height: 500)
    }
}

struct MoreInfoView: PreviewProvider {
    static var previews: some View {
            KatieLiuView()
            .preferredColorScheme(.light)
    }
}

[vishnuravi]

Hey @katieliuu, your preview won't match what the view looks like in the app, because in the app, the view is being rendered inside a NavigationView which will have a navigation bar across the top (where you see the "< Katie" button), and in the preview, it is not in a NavigationView. If you update your preview as @PSchmiedmayer suggested above, the two will match. Is the issue that you want to hide the navigation bar?

[katieliuu]

@vishnuravi Ahh, I see! Sorry for the confusion. Thanks so much for the tips.