2

This is about filling a background with a color.

I am building a SwiftUI version of this project. It's a tabbed app (test harness).

This is my Working Project

The first thing that I'm doing, is setting the tabs up. I expect to be learning a lot, and hitting a lot of walls.

The first wall, is that I fill the app background with a (ghastly) virulent green background gradient.

This takes the form of a stripe that I stretch horizontally.

With IB, not an issue.

With SwiftUI, I need to figure it out.

Here's the code I have so far:

import SwiftUI

struct RVS_SpinnerSwiftUI_Tabbed_Test_Harness_ContentView: View {
    @State private var selection = 0

    var body: some View {
        TabbedView(selection: $selection, content: {
            VStack {
                Text("TEST 0")
                    .background(Color.clear)
                }
                .tabItemLabel(Text("Simple Center"))
                .tag(0)
                .background(Image("background-gradient")
                        .scaledToFill()
//                        .scaledToFit()
            )
            VStack {
                Text("TEST 1")
                    .background(Color.clear)
                }
                .tabItemLabel(Text("Bottom Right"))
                .tag(1)
                .background(Color.clear)
            VStack {
                Text("TEST 2")
                    .background(Color.clear)
                }
                .tabItemLabel(Text("Rotator"))
                .tag(2)
            VStack {
                Text("TEST 3")
                    .background(Color.clear)
                }
                .tabItemLabel(Text("Quadrants"))
                .tag(3)
                .background(Color.clear)
        })
        .padding()
    }
}

#if DEBUG
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        RVS_SpinnerSwiftUI_Tabbed_Test_Harness_ContentView()
    }
}
#endif

The issue is with .background(Image("background-gradient")) in the first tab. I am using this to prototype the operation. Once I figure everything out, I'll be making this work more sensibly.

Here's the file in GH.

It's likely to change over time, so I understand if people want me to nuke the link, but it does allow folks to see it in place (for now).

I'm interested in figuring out how to stretch the background image horizontally to fill the tab.

12
  • 1
    I don't understand what you mean by "stretch...to fill the tab". You have made this image a background for your text. Therefore I expect it to be the size of the text. Moreover, SwiftUI image views are the size of the underlying image by default. You haven't dictated any other size or made this image .resizable.
    – matt
    Jun 14, 2019 at 13:18
  • Hi Matt. I'm not talking about the text item. I have been moving the background function around. I started off as the background of the tabbed view, but I figured that I might find the answer I'm looking for more quickly if I just concentrate on one of the contained views. Jun 14, 2019 at 13:37
  • In IB, you simply add an image view, and stretch it to fill the container (attaching the various anchors). The image will stretch to fill, so this way, you can make a simple stripe fill an entire screen flexibly. Jun 14, 2019 at 13:38
  • I need to do the same thing here, and I'm not quite sure how to do that. Jun 14, 2019 at 13:38
  • I edited the source to illustrate the kinds of things I'm exploring. Jun 14, 2019 at 13:49

2 Answers 2

9

And the answer is...

Envelope, please?

.resizable()!

You DO use the .background() method, but you make the Image() resizable, like so:

var body: some View {
    TabbedView(selection: $selection, content: {
        VStack {
            Text("TEST 0")
                .background(Color.clear)
            }
            .tabItemLabel(Text("Simple Center"))
            .tag(0)
        VStack {
            Text("TEST 1")
                .background(Color.clear)
            }
            .tabItemLabel(Text("Bottom Right"))
            .tag(1)
            .background(Color.clear)
        VStack {
            Text("TEST 2")
                .background(Color.clear)
            }
            .tabItemLabel(Text("Rotator"))
            .tag(2)
        VStack {
            Text("TEST 3")
                .background(Color.clear)
            }
            .tabItemLabel(Text("Quadrants"))
            .tag(3)
            .background(Color.clear)
    })
    .background(
        Image("background-gradient")
            .resizable()
            .scaledToFill()
    )
    .padding()
}

That will stretch it.

enter image description here

Now, I need to figure out how to make the TabbedView clear its background.

10
  • I have a feeling that the answer to the TabbedView issue will be to not use a SwiftUI TabbedView, and use a UIKit UITabController instead. Jun 14, 2019 at 15:12
  • 1
    But I said all of that. Long ago. You just didn’t listen.
    – matt
    Jun 14, 2019 at 15:35
  • You are correct. And you are also correct in that I didn't listen (read). I apologize. Make your suggestion an answer, and I will greencheck it. Jun 14, 2019 at 17:14
  • Thanks but there's a reason why my comment was a comment: it just seemed so trivially obvious that your code said one thing while your claim about what you wanted to accomplish said something completely different.
    – matt
    Jun 14, 2019 at 18:49
  • I miss obvious all the time. In this case, it was because I didn't make the (supposedly obvious) connection that an entity needs to be marked mutating, in some way, in order to mutate. In the case of SwiftUI, it is a mix of both. I'll get it. I've only been doing this for a couple of days. And some of the best answers that I get here, are ones that seem trivially obvious. I have absolutely no ego wrapped up in this at all. I become right, often by proposing wrong, and being corrected. Jun 14, 2019 at 19:04
2

I find a very easy way to put images in my app background.
It is perfectly stretched and the fill also covers the safe area.
You should try.

enter image description here

import SwiftUI

struct ContentView: View {
    var body: some View {
        
        ZStack {
            
            Image("imagename")
                .resizable() 
                .edgesIgnoringSafeArea(.all)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
2
  • Thanks! That's very simple, indeed! Oct 4, 2021 at 0:43
  • But then the content you want on top of this image will ignore the safe area as well :/ Sep 16, 2022 at 6:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.