Set custom background shape

Question

I want to have something like this:

My code is here:

NavigationView {
        VStack{
            VStack(alignment: .leading){
                Section{
                    Text("Bold ").font(.system(size: 18, weight: .bold))
                    +
                    Text("light").font(.system(size: 18, weight: .light))
                }
                Section{
                    Text("Monday 27 Apr").font(.system(size: 27, weight: .light))
                }
            }
            Spacer()
        }
        .background(Color.green)
}

but it looks like this:

How can apply the background on the first image and place the content to the left?

Is there a tool I can use for this kind of modifications? Or do people usually do it by trial-error and by hand?

Thanks

Sparklebeard · Accepted Answer · 2020-04-14T00:37:55.500

0

Try using a ZStack. You can set the background to be a view below the main content, and you can make that view extend to the edges by using the edgesIgnoringSafeArea(.all) modifier. You could nest a ZStack within that ZStack and layer the green background over some shape that you've created to make that background pattern.

    ZStack(alignment: .leading) {
//        ZStack {
            Color.green
                .edgesIgnoringSafeArea(.all)
//            SomeWhiteShapeToMakeThatRoundedMask()
//                .foregroundColor(.white)
//            }

        VStack(alignment: .leading) {
                Section{
                    Text("Bold ").font(.system(size: 18, weight: .bold))
                        +
                        Text("light").font(.system(size: 18, weight: .light))
                }
                Section{
                    Text("Monday 27 Apr").font(.system(size: 27, weight: .light))
                }
                Spacer()

        }.padding(.horizontal)
    }

Alternatively, you could offset a circle shape using GeometryReader to get the container size:

    ZStack(alignment: .leading) {

        Color.white
            .edgesIgnoringSafeArea(.all)

        GeometryReader { geometry in

            Circle()
                .foregroundColor(.green)
                .frame(width: geometry.size.width * 2)
                .offset(x: geometry.size.width * -0.2 , y: geometry.size.height * -0.8)

        }

        VStack(alignment: .leading) {
            Section{
                Text("Bold ").font(.system(size: 18, weight: .bold))
                    +
                    Text("light").font(.system(size: 18, weight: .light))
            }
            Section{
                Text("Monday 27 Apr").font(.system(size: 27, weight: .light))
            }
            Spacer()

        }.padding(.horizontal)
    }

edited Apr 14 '20 at 00:37

answered Apr 14 '20 at 00:06

Sparklebeard

808
6
15

See my recent edit. You can look into creating a custom shape if you wish to make an exact replica, these examples should hopefully give you some ideas to iterate from. – Sparklebeard Apr 14 '20 at 00:39
But how do you create it? All these UI creation without storyboard is overwhelming, I was reading something about the graphics APIs in SwiftUI but I can't find information on how to use it. How did you do it now? – Apr 14 '20 at 00:41
I did it in code using the code I wrote above. I don't think SwiftUI has any WYSIWYG-style editing tools. I realised an offset circle would provide the effect, so I created a ZStack with a white background that extends across the entire screen in order to make sure the ZStack was the size of the screen, The Geometry reader then lets me position the circle relative to those bounds. – Sparklebeard Apr 14 '20 at 00:42
I guess that comes with practice. I'll play around with yours to learn. Quick question, how can I push the text a little up? There is too much white space on the top – Apr 14 '20 at 00:49
You could add .navigationBarTitle("", displayMode: .inline).navigationBarHidden(true) inside the body of the view to hide the navigation bar title; the space is there because that's where the Nav title would go if you set one. Working with the navigation bar can be a bit annoying if you want a background colour that extends all the way to the top of the screen, you might like to take a look at this answer for some ideas for how to set the navigation bar opacity or color, too – Sparklebeard Apr 14 '20 at 01:00
Also, Apple's path drawing tutorial isn't bad. it could be helpful if you do need to draw a custom path to use for your background if the circle isn't working out. https://developer.apple.com/tutorials/swiftui/drawing-paths-and-shapes – Sparklebeard Apr 14 '20 at 01:01
Take a look at what answer? You forgot the link – Apr 14 '20 at 01:09
1

Strange. Should have been https://stackoverflow.com/questions/56505528/swiftui-update-navigation-bar-title-color – Sparklebeard Apr 14 '20 at 01:10

Set custom background shape

1 Answers1