Creating a Dynamic Draggable ScrollView with UIKit for SwiftUI
In one of our recent products, we undertook an exciting challenge to redesign a map and search view. The design we implemented features a hybrid state, where a map sits behind a collapsible bottom sheet list view, very similar to popular applications like Apple Maps and Google Maps! This approach presented several challenges, especially since we needed to build this feature within a SwiftUI view while supporting iOS 15. One of the key difficulties was the lack of control that is now available in iOS 16+ with presentationDetents. I plan to cover presentationDetents more in depth in an upcoming article!
The Challenge
Our primary objective was to create a scrollable bottom sheet within SwiftUI to maintain consistency with other SwiftUI components. Initially, we attempted to handle all the logic within SwiftUI. However, we encountered significant obstacles, particularly around customizing gesture recognizers for a scrollable view.
This approach quickly became impractical due to the complexity and hackiness required to manage drag gestures and scrollable views effectively. You’d think Apple would have included something as basic as knowing when a drag gesture starts to change, especially in a framework that’s supposed to simplify UI development. But unfortunately, this isn’t directly provided in SwiftUI’s ScrollView and ScrollViewReader (as of iOS 15). So, we had to put our heads down and turn to classic UIKit to handle the drag gestures, ultimately leading to a more reusable and customized solution—though not without some challenges.
The Solution
What follows below is based on a simplified re-implementation in a sample project. The final implementation is a blend of UIKit and SwiftUI, resulting in a bottom sheet with multiple snap points that supports a scrollable list. The key component of this implementation is our custom DraggableScrollView view object, which wraps SwiftUI content in a UIScrollView and provides easy panning functionality through an offset parameter.
Here’s how the DraggableScrollView is used in the SwiftUI view struct:
DraggableScrollView(offset: offset) {
ForEach(0..<20) { item in
Text("List item \($0)")
}
}
.onDragChanged { value in
onDragChanged(by: value.translation.y)
}
.onDragEnded { value in
// Handle drag
}This implementation offers the onDragChanged and onDragEnded view modifiers, which are essential for customizing behavior based on user interactions. These modifiers are key to controlling the list, giving us the vital information needed to make this work, which I'll discuss more in depth later on. This highlights one of the limitations of SwiftUI's ScrollView and ScrollViewReader in iOS 15 and earlier.
Implementation Details
Creating the DraggableScrollView
This view object integrates a SwiftUI content view with a UIScrollView, allowing for the required drag functionality.
UIViewRepresentable: The DraggableScrollView conforms to UIViewRepresentable, which is a protocol that lets us wrap UIKit view content in a SwiftUI View object.
struct DraggableScrollView<Content: View>: UIViewRepresentable {
var offset: Binding<CGFloat>
var content: Content
func makeUIView(context: Context) -> UIScrollView {
let scrollView = UIScrollView()
let hostingController = UIHostingController(rootView: content)
scrollView.addSubview(hostingController.view)
// Further setup...
return scrollView
}
func updateUIView(_ uiView: UIScrollView, context: Context) {
// Update the view...
}
func makeCoordinator() -> Coordinator {
Coordinator(self)
}
}Coordinator: A coordinator class is created to manage the gesture recognizers and coordinate the scrolling.
class Coordinator: NSObject, UIGestureRecognizerDelegate {
var parent: DraggableScrollView
init(_ parent: DraggableScrollView) {
self.parent = parent
}
@objc func handlePan(_ gesture: UIPanGestureRecognizer) {
// Handle the pan gesture...
}
}Gesture Recognizers: The UIScrollView is enhanced with a UIPanGestureRecognizer, whose delegate is the coordinator. This setup enables us to handle drag gestures and determine when to begin or end them.
func makeUIView(context: Context) -> UIScrollView {
let scrollView = UIScrollView()
let hostingController = UIHostingController(rootView: content)
scrollView.addSubview(hostingController.view)
let panGesture = UIPanGestureRecognizer(
target: context.coordinator, action: #selector(context.coordinator.handlePan(_:))
)
panGesture.delegate = context.coordinator
scrollView.addGestureRecognizer(panGesture)
return scrollView
}Custom Behavior with Gesture Recognizers
The handlePan method within the coordinator processes the pan gestures, updating the view state accordingly. By implementing gestureRecognizerShouldBegin, we can determine whether the gesture should proceed based on the current scroll position and the velocity of the pan gesture.
/// Determine whether to recognize if the gesture should drag the sheet, or to
/// scroll the list.
func gestureRecognizerShouldBegin(
_ gestureRecognizer: UIGestureRecognizer
) -> Bool {
guard let panGesture = gestureRecognizer as? UIPanGestureRecognizer else {
return true
}
let velocity = panGesture.velocity(in: panGesture.view)
let isPanningDown = velocity.y > 0
let isScrolledToTop =
scrollView.collectionView.contentOffset.y <= 0
let isAtTop = (dragOffset == 0)
if !isScrolledToTop { return false }
if isPanningDown && isScrolledToTop { return true }
if !isPanningDown && !isAtTop { return true }
return false
}Creating Snap Points
Moving over to our SwiftUI view struct. The onDragChangedand onDragEnded methods are particularly crucial for applying transformations to the bottom sheet based on the drag’s end state. Here are the transformations I came up with for achieving optimal snap points:
private func onDragChanged(
by translation: CGFloat
) {
let sheetPosition = translation + currentPosition
self.finishedTranslation = sheetPosition
}
private func onDragEnded(
screenHeight: Double,
translation: CGFloat,
velocity: CGFloat
) {
/// The current position of the bottom sheet
let sheetPosition = translation + currentPosition
/// 1/4 of the screens height
let quarterScreen = screenHeight / 4
/// 3/4 of the screens height
let threeFourthsScreen = quarterScreen * 3
/// Setting for the half screen position
let halfPosition = screenHeight / 2
/// Setting for the full screen position
let higherPosition: CGFloat = 0
/// Setting for the closed position
let closedPosition = screenHeight
withAnimation(.interactiveSpring()) {
// Adjust sheet position based on location sheet at end of gesture.
if sheetPosition < threeFourthsScreen {
// List is full screen
currentPosition = higherPosition
finishedTranslation = higherPosition
} else if sheetPosition > quarterScreen {
// List is half screen
currentPosition = halfPosition
finishedTranslation = halfPosition
} else {
// List is closed
currentPosition = closedPosition
finishedTranslation = closedPosition
}
}
}Using this approach, we set different snap zones. This method leverages some key values, translation, and velocity, values not provided by default SwiftUI modifiers. This is important data needed to enable the bottom sheet to expand or collapse smoothly based on user interactions!
Conclusion
This hybrid approach, combining UIKit’s gesture handling with SwiftUI’s declarative UI framework, provided a great solution to our design challenge. The DraggableScrollView enables a smooth, interactive experience that behaves as expected within a bottom sheet!
Alex engineers with creativity at Livefront.
