SwiftUI Pinned Views Tutorial

SwiftUI can provide a PinnedScrollableView inside a ScrollView. These pinned views act as a sticky view and can be applied to a header or a footer. In this Tutorial a pinned view will be used as header inside a LazyVStack. When the VStack is scrolled vertically the pinned view will “stick” to the top. This tutorial is build with Xcode 12 and iOS 14, which can be download at the Apple developer portal.

Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project. In the template selector, select iOS as the platform, select App template in the Application section and then click Next.

Enter SwiftUIPinnedViewsTutorial as the Product Name, select SwiftUI as Interface, SwiftUI App as Life Cycle and Swift as Language. Deselect the Include Tests checkbox and click Next. Choose a location to save the project on your Mac.

In the canvas, click Resume to display the preview. If the canvas isn’t visible, select Editor > Editor and Canvas to show it.

In the Project navigator, click to select ContentView.swift. Change the code inside the ContentView struct to

struct ContentView: View {
    let teams = [
        [
            "Al Ferrin", "Valentin Diggins", "Odis Troutman",
            "Alexander Geise", "Tyrone Stringer", "Mitchel Grosso",
            "Aldo Catchings", "Xavier Tynes", "Michel Tripoli",
            "Spencer Courter", "Bradly Liner", "Rueben Touchette",
            "Rusty Castenada", "Rudolf Dorfman", "Colby Bhakta"
        ],
        [
            "Jonathan Wyse", "Max Huber", "Sergio Greaney",
            "Lincoln Pazos", "Donovan Ringer", "Dominique Garbett",
            "Mickey Foltz", "Courtney Mcandrew", "Jasper Zwilling",
            "Nicholas Aquino", "Devin Tunney", "Dewitt Coover",
            "Clement Speelman", "Romeo Lindner", "Rodrick Threlkeld"
        ]
    ]

A team Array property is created each containing an array of team member.s Next add the body property

var body: some View {
    NavigationView {
        ScrollView {
            // 1.
            LazyVStack(spacing: 10, pinnedViews: [.sectionHeaders]) {
                ForEach(0 ..< teams.count) { index in
                   // 2.
                   Section(header: headerView(index)) {
                      ForEach(0 ..< teams[index].count) { member in
                         // 3.
                         Text("\(teams[index][member])")
                                .id(UUID())
                                .font(.title)
                      }
                   }
               }
           }
       }
       .navigationTitle("Pinned Views")
    }
}

1. A LazyVStack is displayed inside a Scroll View with a pinned View property of type .sectionHeader

2. A custom HeaderView will be used to display the section header

3. The members of the team will be displayed as a Text View.

Next, implement the headerView(_:) method

private func headerView(_ index: Int) -> some View {
    Text("Team \(index + 1)")
        .padding()
        .foregroundColor(Color.white)
        .font(.largeTitle)
        .frame(maxWidth: .infinity)
        .background(Color.blue)
}

The Team number is displayed with a white foreground color and a blue background color.
Go to the Preview Pane and press the Live Preview Button. Scroll the Team members vertically. the header view will be pinned at the top.

The source code of the SwiftUIPinnedViewsTutorial can be downloaded at the ioscreator repository on Github.