Tiny Swift Package for Making Your HStack Snap to Items on Scroll

Hey everyone, hstack-snap-to-scroll is a tiny Swift package that gives your HStack snapping capabilities with just one line of code.

A similarly tiny gif showing the package at work:
small-gif

A code example:

import SnapToScroll                               // Step 1
...

HStackSnap(alignment: .center(32)) {              // Step 2

    ForEach(myModels) { viewModel in

        MyView(
            selectedIndex: $selectedIndex,
            viewModel: viewModel
         )
         .snapAlignmentHelper(id: viewModel.id)   // Step 3
     }
}                  

For more examples, visit the GitHub repo and view the demo project.

Configuration

HStackSnap comes with two customizable properties:

  • alignment: The way you'd like your elements to be arranged.
    • leading(CGFloat): Aligns your child views to the leading edge of HStackSnap. This configuration supports elements of various sizes, so long as they don't take up all available horizontal space (which would extend beyond the screen). Use the value to set the size of the left offset.
    • center(CGFloat): Automatically aligns your child view to the center of the screen, using the offset value you've provided. This is accomplished with inside of the .snapAlignmentHelper which sets the frame width based on the available space. Note that setting your own width elsewhere may produce unexpected layouts.
  • coordinateSpace: Option to set custom name for the coordinate space, in the case you're using multiple HStackSnaps of various sizes. If you use this, set the same value in .snapAlignmentHelper.

.snapAlignmentHelper comes with two options as well:

  • id: Required. A unique ID for the element.
  • coordinateSpace: Same as above.

One neat thing not shown in the example above but is covered in the project's demo is a way to receive the latest "snap event" through a closure. This way, you can make use of this information elsewhere, or modify the appearance of the currently selected item.

How it Works

At render, HStackSnap reads the frame data of each child element and calculates the scrollOffset each element should use. Then, on DragGesture.onEnded, the nearest snap location is calculated, and the scroll offset is set to this point.

I'm Open to Feedback!

If you found this interesting or have questions / feedback, I'd love to hear your thoughts.

6 Likes

Nice! You missed the opportunity to call it SnapStack tho! Thanks for sharing!

1 Like

In GeometryReaderOverlay.swift

 Rectangle().fill(Color.clear)

is just:

Color.clear
Terms of Service

Privacy Policy

Cookie Policy