Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/amzd/scrollviewproxy

ScrollViewProxy for SwiftUI on iOS 13 and up
https://github.com/amzd/scrollviewproxy

apple ios macos scrollview swift swift-package-manager swiftui

Last synced: about 2 hours ago
JSON representation

ScrollViewProxy for SwiftUI on iOS 13 and up

Awesome Lists containing this project

README

        

As of June 22 2020 this is included in the SwiftUI 2 beta. [https://developer.apple.com/documentation/swiftui/scrollviewproxy](https://developer.apple.com/documentation/swiftui/scrollviewproxy)

The Apple implementation uses just `.id(_:)` and I had update issues with that where Views with an id sometimes won't update when their ObservedObject changed. Maybe this has been fixed in the new SwiftUI 2 beta.

Also the Apple implementation only supports iOS 14 so I think this repo is still useful for backwards compatibility.

**Note:** An important difference between this library and Apples implementation is that the ScrollViewReader goes *inside* the ScrollView. If you place the ScrollViewReader around the ScrollView the scrollTo function will not scroll to the correct location (due to its coordinateSpace not being part of the scrolling content). I considered fixing this to align with Apple but that would break backwards compatibility with projects already using ScrollViewProxy.

Maybe it's possible to detect if we're inside or outside of a ScrollView in the reader but then how do we handle nested ScrollViews? If you have any ideas please open an Issue/PR or email me.

# ScrollViewProxy

Adds `ScrollViewReader` and `ScrollViewProxy` that help you scroll to locations in a ScrollView

To get a ScrollViewProxy you can either use the conveinience init on ScrollView

```swift
ScrollView { proxy in
...
}
```

or add a ScrollViewReader to any View that creates a UIScrollView under the hood

```swift
List {
ScrollViewReader { proxy in
...
}
}
```

The ScrollViewProxy currently has one variable and two functions you can call

```swift
/// A publisher that publishes changes to the scroll views offset
public var offset: OffsetPublisher

/// Scrolls to an edge or corner
public func scrollTo(_ alignment: Alignment, animated: Bool = true)

/// Scrolls the view with ID to an edge or corner
public func scrollTo(_ id: ID, alignment: Alignment = .top, animated: Bool = true)
```

To use the scroll to ID function you have to add an ID to the view you want to scroll to

```swift
ScrollView { proxy in
HStack { ... }
.scrollId("someId")
}
```
*This is the only part that is different from the SwiftUI 2.0 implementation because I don't know how to access Views by ID from the `.id(_:)` function*

## Example

Everything put together in an example

```swift
struct ScrollViewProxyExample: View {

@State var randomInt = Int.random(in: 0..<200)
@State var proxy: ScrollViewProxy? = nil
@State var offset: CGPoint = .zero

var body: some View {
// GeometryReader for safeAreaInsets on Sticky View
GeometryReader { geometry in
VStack {
ScrollView { proxy in
Text("Sticky View")
.background(Color.white)
.onReceive(proxy.offset) { self.offset = $0 }
.offset(x: offset.x, y: offset.y + geometry.safeAreaInsets.top)
.zIndex(1)

VStack(spacing: 20) {
ForEach(0..<200) { index in
HStack {
Spacer()
Text("Item: \(index)").font(.title)
Spacer()
}.scrollId(index)
}
}
.zIndex(0)
.onAppear {
self.proxy = proxy
}
}
HStack {
Button(action: {
self.proxy?.scrollTo(self.randomInt, alignment: .center)
self.randomInt = Int.random(in: 0..<200)
}, label: {
Text("Go to \(self.randomInt)")
})
Spacer()
Button(action: { self.proxy?.scrollTo(.bottom) }, label: {
Text("Bottom")
})
Spacer()
Button(action: { self.proxy?.scrollTo(.center) }, label: {
Text("Center")
})
}.padding()
}
}
}
}
```

## Deintegrate

Want to drop iOS 13 support and move to the SwiftUI 2.0 version?

1. Remove the Package
2. Add this extension:

```swift
extension View {
public func scrollId(_ id: ID) -> some View {
id(id)
}
}
```

(Or replace all .scrollId with .id)