Question 268883 in 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 – Adding footer on an iPhone app with SwiftUI

I am trying to add a footer that will extend to the very bottom of the screen, and tried some methods I found on Google and ChatGPT but still no luck. I added .edgesIgnoringSafeArea(.all) but it doesn’t seem to do anything either.

VStack(spacing: 0) {
    // Yellow rectangle footer
    Rectangle()
        .foregroundColor(.clear)
        .frame(width: UIScreen.main.bounds.size.width, height: 16)
        .background(Color(red:1, green: 0.78, blue: 0.17))
        
}.edgesIgnoringSafeArea(.all)

screenshot

And also, is there a way to fix this footer in its position like using position: fixed on HTML/CSS?

Tags:

2

Answers


  1. 0

    You can’t add something like a fixed position. In SwiftUI, everything was aligned. So in this case, simply add a Space above Rectangle like this:

    var body: some View {
    VStack {
        Spacer()
            
        Rectangle()
            .foregroundColor(.clear)
            .frame(width: UIScreen.main.bounds.size.width, height: 16)
            .background(Color(red:1, green: 0.78, blue: 0.17))
    }
}

    enter image description here

    Login or Signup to reply.
  2. 0

    The reason why the yellow band is not extending into the safe area is because it is not touching it. You just need to add a Spacer to your VStack to push it down and it works.

    While we’re at it, you are using a couple of deprecated techniques in your example:

    • UIScreen.main.bounds.size is deprecated, use a GeometryReader instead
    • .edgesIgnoringSafeArea is deprecated, use .ignoresSafeArea instead.

    In fact, you don’t need to know the screen size. If you want a view to occupy the maximum possible width then use maxWidth: .infinity instead. The same goes for height. You don’t even need .ignoresSafeArea, because you are using background(_:ignoresSafeAreaEdges:) which ignores safe areas by default.

    Here is an updated version:

    VStack(spacing: 0) {
    Spacer()

    // Yellow rectangle footer
    Rectangle()
        .foregroundColor(.clear)
        .frame(height: 16)
        .frame(maxWidth: .infinity)
        .background(Color(red:1, green: 0.78, blue: 0.17))
}

    Screenshot

    Using a VStack in this way is exactly how you can fix the footer to the bottom of the screen with SwiftUI. If the other content in the VStack might need more height then you can put a ScrollView around it. A ScrollView is greedy and occupies as much space as possible (just like a Spacer). So then the example would look like this:

    VStack(spacing: 0) {
    ScrollView {
        // Your main content here
    }
    // Yellow rectangle footer
    Rectangle()
        .foregroundColor(.clear)
        .frame(height: 16)
        .frame(maxWidth: .infinity)
        .background(Color(red:1, green: 0.78, blue: 0.17))
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search