Skip to content

Commit 40a9169

Browse files
author
Trent Guillory
committed
Updated readme
1 parent 84423df commit 40a9169

File tree

2 files changed

+26
-17
lines changed

2 files changed

+26
-17
lines changed

README.md

+26-17
Original file line numberDiff line numberDiff line change
@@ -6,47 +6,56 @@ https://user-images.githubusercontent.com/8763719/131393666-6af82d2a-998e-4dba-a
66

77
## Getting Started
88

9-
Using `SnapToScroll` is straightforward. There's only two requirements:
9+
Using `SnapToScroll` is straightforward. There's just three steps.
1010

11-
1. Replace `HStack` with `HStackSnap`
12-
2. Add `GeometryReaderOverlay` to your view.
11+
1. Import `SnapToScroll`
12+
2. Replace `HStack` with `HStackSnap`
13+
3. Add `.snapAlignmentHelper` to your view.
1314

1415
An example:
1516

1617
```swift
18+
import SnapToScroll // Step 1
19+
...
1720

18-
HStackSnap(leadingOffset: 16) {
21+
HStackSnap(alignment: .center(32)) { // Step 2
1922

20-
ForEach(modelArray) { viewModel in
23+
ForEach(myModels) { viewModel in
2124

22-
myView(viewModel: viewModel)
23-
.frame(maxWidth: 250)
24-
.overlay(GeometryReaderOverlay(id: viewModel.id))
25-
}
26-
}
25+
MyView(
26+
selectedIndex: $selectedIndex,
27+
viewModel: viewModel
28+
)
29+
.snapAlignmentHelper(id: viewModel.id) // Step 3
30+
}
2731
}
2832

2933
```
3034
For more examples, see `SnapToScrollDemo/ContentView.swift`.
3135

32-
## Options
36+
## Configuration
3337

3438
`HStackSnap` comes with two customizable properties:
3539

36-
- `leadingOffset`: The leading padding you'd like each element to snap to.
37-
- `coordinateSpace`: Option to set custom name for the coordinate space, in the case you're using multiple `HStackSnap`s of various sizes.
40+
- `alignment`: The way you'd like your elements to be arranged.
41+
- `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.
42+
- `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.
43+
- `coordinateSpace`: Option to set custom name for the coordinate space, in the case you're using multiple `HStackSnap`s of various sizes. If you use this, set the same value in `.snapAlignmentHelper`.
44+
45+
`.snapAlignmentHelper` comes with two options as well:
46+
47+
- `id`: Required. A unique ID for the element.
48+
- `coordinateSpace`: Same as above.
3849

3950
## Limitations
4051

41-
1. If your child views are designed to take up all available horizontal space, they'll expand beyond the visible view. Prevent this with `.frame(maxWidth: x)`
42-
2. `HStackSnap` is currently designed to work with static content.
43-
3. At the moment, `HStackSnap` offers snapping to the leading edge only. If you'd like to offer a PR that adds support for `.center` and / or `.trailing`, I'd love to look it over!
52+
- `HStackSnap` is currently designed to work with static content.
4453

4554
## How it Works
4655

4756
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.
4857

49-
Read through `HStackSnap` for more details.
58+
Read through `HStackSnap.swift` and `Views/HStackSnapCore.swift` for more details.
5059

5160
## Credits
5261

File renamed without changes.

0 commit comments

Comments
 (0)