HomeiOS DevelopmentThe best way to add ScrollEdgeEffect beneath customized views

The best way to add ScrollEdgeEffect beneath customized views


I have been testing out iOS 26 and Liquid Glass, and observed that the navigation bars, tab bars, and the textual content enter view above the keyboard all have a cloudy, clear background, which darkens if the view behind the factor in query is darker in shade. See beneath for what I imply:

The best way to add ScrollEdgeEffect beneath customized views

Is it doable to copy this habits, or is there a built-in choice we will use for customized view backgrounds? Both in SwiftUI or UIKit?

Replace

I see I would like to take a look at ScrollEdgeEffect now, however the query stays — I would like so as to add that darkening/blurring of the ScrollEdgeEffect beneath an adjunct view just like the textual content enter in Messages. Here’s a fundamental instance:

struct ContentView: View {
    @State non-public var string = "Textual content!"

    var colours: [Color] {
        [
            .black.opacity(0.1),
            .purple.mix(with: .black, by: 0.33)
        ]
    }

    var physique: some View {
        NavigationStack {
            ScrollView {
                LazyVStack(spacing: 10) {
                    ForEach(0...100, id: .self) { row in
                        RoundedRectangle(cornerRadius: 20)
                            .fill(colours[row % colors.count])
                            .body(top: 145)
                            .padding(.horizontal)
                    }
                }
            }
            .overlay(alignment: .backside) {
                TextField("Editable Textual content", textual content: $string, immediate: Textual content("Edit me"))
                    .font(.title)
                    .padding()
                    .glassEffect()
                    .padding(.horizontal)
            }
            .scrollEdgeEffectStyle(.smooth, for: .backside)
            .navigationTitle(Textual content("Scroll Edges"))
        }
    }
}

The result’s this:

Sample view with scrollEdgeEffect working on the top bar, but not the accessory view

Discover that the sting impact beneath the highest navigation bar works as anticipated. I would wish to have that impact beneath the TextField as nicely.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments