Xcode Question posted in
Whether you're new to Xcode or an experienced developer, our archive has everything you need to know about this integrated development environment (IDE). From basic functionalities to advanced features, our archive covers a wide range of Xcode-related questions and answers. Browse our archive now and find solutions to your Xcode questions, and take your app development skills to the next level

Xcode – Why do the elements inside my VStack inside a HStack still go vertical

So basically this is my code.

            Text("Melbourne, Victoria")
                .font(.largeTitle)
                .fontWeight(.bold)
                .foregroundColor(Color.white)
                .padding(.bottom, 30)
            
            Image(systemName: "moon.fill")
                .foregroundColor(Color.white)
                .font(.system(size: 60))
            
            
            Text("Today")
                .font(.title)
                .fontWeight(.medium)
                .foregroundColor(Color.white)
            
            Text("34°C")
                .font(.title3)
                .fontWeight(.medium)
                .foregroundColor(Color.white)
            
            Spacer()
            
            HStack {
                Image(systemName: "sun.max.fill")
                    .foregroundColor(Color.yellow)
                    .font(.system(size: 40))
                    .padding(.bottom, 550)
                
                Text("Mon 34°C")
                    .font(.title)
                    .fontWeight(.medium)
                    .foregroundColor(Color.white)
                    .padding(.bottom, 550)
                
                
            }
            
        }
        .background(
            Image("night")
                .ignoresSafeArea()
        )

I want to make more of the days in this weather app each with it’s on SF Symbol and everything is inside this VStack. And the days and SF symbols are inside a HStack to keep them horizontal. But if I want to put more of those the next time I do it they go next to each other but the symbol goes on top look at this.

This is the image with only 1 of those days

And this one is when I put more than 1 but its next to each other when I want them vertically aligned.

This is the one if I put them in another VStack which makes the SF symbol go above the text

IS there any solution to this?

Tags:

2

Answers


  1. 0

    The problem is your .padding(.bottom, 550).

    Image(systemName: "sun.max.fill")
    .foregroundColor(Color.yellow)
    .font(.system(size: 40))
    .padding(.bottom, 550) /// here!

    It’s currently attached to your first Image. As a result, the HStack is stretched vertically and it appears as though the first Image is higher up than second one.

    To fix, move both .padding(.bottom, 550)s to outside your HStack.

    Login or Signup to reply.
  2. 0

    You have quite a lot of arbitrary values for padding. You should have your layout adapt to various devices, rather than hard-coding that .bottom spacing for example.

    Working example:

    struct ContentView: View {
    var body: some View {
        VStack(spacing: 40) {
            Text("Melbourne, Victoria")
                .font(.largeTitle)
                .fontWeight(.bold)
                .foregroundColor(Color.white)

            VStack {
                Image(systemName: "moon.fill")
                    .foregroundColor(Color.white)
                    .font(.system(size: 60))

                Text("Today")
                    .font(.title)
                    .fontWeight(.medium)
                    .foregroundColor(Color.white)

                Text("34°C")
                    .font(.title3)
                    .fontWeight(.medium)
                    .foregroundColor(Color.white)
            }

            VStack(spacing: 10) {
                HStack {
                    Image(systemName: "sun.max.fill")
                        .renderingMode(.original)
                        .font(.system(size: 40))

                    Text("Mon 34°C")
                        .font(.title)
                        .fontWeight(.medium)
                        .foregroundColor(Color.white)
                }

                HStack {
                    Image(systemName: "cloud.sun.fill")
                        .renderingMode(.original)
                        .font(.system(size: 40))

                    Text("Tue 28°C")
                        .font(.title)
                        .fontWeight(.medium)
                        .foregroundColor(Color.white)
                }
            }

            Spacer()
        }
        .frame(maxWidth: .infinity)
        .background(
            Color(red: 0.34, green: 0.36, blue: 0.71)//Image("night")
                .ignoresSafeArea()
        )
    }
}

    Result:

    Result

    Although there is already an outer VStack, they are nested VStacks because they have different amounts of padding. Multiple views are grouped together, and then those are grouped together with larger paddings to separate them.

    Bonus

    SF Symbols colors

    Use:

    .renderingMode(.original)

    Rather than:

    .foregroundColor(Color.yellow)

    To color the SF Symbols with the default colors, as shown in the above example.

    Align days

    You can align the days across each HStack with a custom alignment guide. Use the following:

    extension HorizontalAlignment {
    struct LeadingDay: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[.leading]
        }
    }

    static let leadingDay = HorizontalAlignment(LeadingDay.self)
}

    Making the other following changes:

    VStack(alignment: .leadingDay, spacing: 10) { // <- HERE
    HStack {
        Image(systemName: "sun.max.fill")
            .renderingMode(.original)
            .font(.system(size: 40))

        Text("Mon 34°C")
            .font(.title)
            .fontWeight(.medium)
            .foregroundColor(Color.white)
            .alignmentGuide(.leadingDay) { d in // <- HERE
                d[.leading]
            }
    }

    HStack {
        Image(systemName: "cloud.sun.fill")
            .renderingMode(.original)
            .font(.system(size: 40))

        Text("Tue 28°C")
            .font(.title)
            .fontWeight(.medium)
            .foregroundColor(Color.white)
            .alignmentGuide(.leadingDay) { d in // <- HERE
                d[.leading]
            }
    }
}

    Result:

    Result

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search