Customizing the ScrollView Indicator in SwiftUI

In this story, we will explore how to customize the scroll indicator in SwiftUI, particularly in the context of creating an alphabetical scroll indicator for a list of contacts.

Scenario:

Imagine you have a list of contacts and you want to display an alphabetical scroll indicator to help users navigate through the list quickly. Here’s how you can achieve this:

ScrollView(showsIndicators: false) {
    ForEach((1...50), id: \.self) { row in
        Text("Row \(row)")
            .foregroundColor(.black)
            .frame(maxWidth: .infinity)
            .frame(height: 30)
    }
}

Step 1: Create an Alphabetical Scroll Indicator

To create the alphabetical scroll indicator, we use the `overlay` modifier to place a view on top of the list. In this case, we place a Text view showing “Custom indicator” above the list.

.overlay(alignment: .top) {
    Text("Custom indicator")
}

Step 2: Customizing the Indicator

To make the indicator look better, we wrap the “Custom indicator” Text view in an HStack and add spacing with the `Spacer` view. We then use a VStack to display each letter of the alphabet in the indicator.

.overlay(alignment: .top) {
    HStack {
        Spacer()

        VStack {
            ForEach(alphabet, id: \.self) { title in
                Text(title)
            }
        }
        .padding(.trailing)
    }
}

`alphabet` = This is an array for my mock data.

Step 3: Connecting the Indicator to the List

For the indicator to have scroll-to functionality, we use the ScrollViewReader. We assign unique IDs to each row in the list using the `.id()` modifier. Then, when the user taps on a letter in the indicator, the `onTapGesture` closure triggers the `proxy.scrollTo(title, anchor: .center)` method, which smoothly scrolls to the corresponding row in the list.

ScrollViewReader { proxy in
    ScrollView(showsIndicators: false) {
        ForEach(alphabet, id: \.self) { row in
            Text("Row \(row)")
                .foregroundColor(.black)
                .frame(maxWidth: .infinity)
                .frame(height: 30)
                .id(row)
        }
    }
    .overlay(alignment: .top) {
        HStack {
            Spacer()

            VStack {
                ForEach(alphabet, id: \.self) { title in
                    Text(title)
                        .onTapGesture {
                            proxy.scrollTo(title, anchor: .center)
                        }
                }
            }
            .padding(.trailing)
        }
    }
}

That’s it.

Customizing the scroll indicator in SwiftUI can greatly enhance the user experience of navigating through long lists of data. By using the overlay modifier, ScrollViewReader, and some custom gestures, we were able to create a sleek alphabetical scroll indicator for our list of contacts. This technique can be applied to various scenarios where customizing the scroll indicator is needed in SwiftUI interfaces.

What is “task” Modifier in SwiftUI

Detect Scroll Position in SwiftUI