Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change UIView background color in SwiftUI

Tags:

ios

swift

swiftui

Hello everyone. I'm creating a simple iOS app with SwiftUI, and I'd like to change my view's background color to a custom one I have.

This is something extremely easy to do but it seems that it's impossible to achieve in SwiftUI without using ZStacks or workarounds like that, which if you use a List, for example, don't work.

I want to change the color of the view, not use a ZStack with a custom color and then put the rest of the views on top of it. I tried using UIView.appearance().backgroundColor = color when initializing my view, but then all the view is hidden and the screen is filled with the color chosen.

As I'm not good at explaining, here you have some images describing the problem:

Without color change Without color change

With color change With color change

My code

import SwiftUI

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

    init() {
        UIView.appearance().backgroundColor = UIColor(named: "backgroundColor")
    }

    var body: some View {
        TabView(selection: $selection) {
            HomePageView()
                .tabItem {
                    Image(systemName: "house.fill")
                        .font(.title)
                }
                .tag(0)

            Text("Second View")
                .font(.title)
                .tabItem {
                    Image(systemName: "bell.fill")
                        .font(.title)
                }
                .tag(1)
        }.edgesIgnoringSafeArea(.top)
    }
}
like image 314
iAlex11 Avatar asked Sep 06 '19 16:09

iAlex11


People also ask

How do I change the background color in SwiftUI?

To add a screen background view by putting it at the bottom of the ZStack. Text("Hello, SwiftUI!") <1> Use ZStack so we can place a background view under the content view. <2> Use color view as background.

How do I change the color of a list in SwiftUI?

We can change the background color of a list row in SwiftUI with listRowBackground(_:) modifier. To set a list row background color, add listRowBackground(_:) modifier to the list row item.

How do I change the background color in Xcode?

At the top select the attributes inspector. Under the section "View" there should be a spot that says "Background". click that and choose your colour.


2 Answers

Hope this will help to understand:

var body: some View {
    Color.purple
        .overlay(
            VStack(spacing: 20) {
                Text("Overlay").font(.largeTitle)
                Text("Example").font(.title).foregroundColor(.white)
        })
        .edgesIgnoringSafeArea(.vertical)
}

Another If you use the views in Group

var body: some View {
        Group {
          Text("Hello SwiftUI!")
        }
       .background(Color.black)
    }
like image 95
Faysal Ahmed Avatar answered Oct 16 '22 14:10

Faysal Ahmed


For changing the background color, I think the current method most people, and myself, are using is using a ZStack. I haven't seen many problems with putting a UIViewRepresentable on top of it.

var body: some View {
    ZStack {
        Color.blue
            .edgesIgnoringSafeArea(.all)
        VStack {
          Text("Hello World!")
        }
    }
}
like image 1
Ryan Avatar answered Oct 16 '22 15:10

Ryan