How do I replicate the rough looking notes app background with SwiftUI?

Viewed 1126

If you look at the Notes.app, you can see that the view background isn't flat and that it has a rough like texture and I want to replicate this for an app that I'm working on using SwiftUI but I don't know how I would go about doing so.

enter image description here

1 Answers

Here's my texture view:

struct RoughTextureView: View {
    var body: some View {
        Image("texture")
            // Note: a resizable Image will fill its superview
            .resizable(capInsets: EdgeInsets(), resizingMode: .tile)
    }
}

... where texture is this 50x50 image:

enter image description here

And here's how to use it:

struct ContentView: View {

    var body: some View {
        NavigationView {
            ZStack {
                RoughTextureView()
                    //...so it goes underneath the navigation bar
                    .edgesIgnoringSafeArea(.top)
                ScrollView {
                    ForEach(0...100) { noteNumber in
                        HStack {
                            Text("Awesome note #\(noteNumber)")
                                .frame(height: 20)
                                .padding()
                        }
                    }
                }
                //...so it doesn't overlap with the navigation bar
                .offset(x: 0, y: 20)
            }
            .navigationBarTitle(Text("My Notes").font(.largeTitle))
        }
    }

}

Use a ZStack to put it underneath all views.

Result:

enter image description here

Related