Touches to UIScrollView subviews outside the clipping bounds - ios

Question

I am making a swiftUI app. I have some scrollable content for which I am using UIScrollView (Not using SwiftUI ScrollView due to some limitations). I have embedded my UIScrollView in a VStack. Above UIScrollView inside VStack I have a swiftUI view which has a tap gesture. My UIScrollView subview also has a tap gesture and UIScrollView subview can scroll over SwiftUI view inside VStack.
Problem:
When I scroll up and UIScrollView covers the SwiftUI View I can not tap on the portion of subview which is outside of the clipping bounds of UIScrollView, My SwiftUI View gets tapped instead, even when its not visible.
I have attached my sample code and some Images.
Code:
UIScrollViewWrapper
struct UIScrollViewWrapper<Content: View>: UIViewRepresentable {
var width: CGFloat
var height: CGFloat
#ViewBuilder var content: () -> Content
func makeUIView(context: Context) -> UIScrollView {
let scrollView = UIScrollView()
scrollView.clipsToBounds = false
scrollView.delegate = context.coordinator
scrollView.isScrollEnabled = true
scrollView.showsVerticalScrollIndicator = false
let child = UIHostingController(rootView: content())
child.view.backgroundColor = .clear
context.coordinator.hostingController = child
scrollView.addSubview(child.view)
let newSize = child.view.sizeThatFits(CGSize(width: width, height: height))
child.view.frame = CGRect(origin: .zero, size: newSize)
scrollView.contentSize = newSize
return scrollView
}
func updateUIView(_ scrollView: UIScrollView, context: Context) {
context.coordinator.hostingController?.rootView = content()
if let child = context.coordinator.hostingController {
let newSize = child.view.sizeThatFits(CGSize(width: width, height: height))
child.view.frame = CGRect(origin: .zero, size: newSize)
scrollView.contentSize = newSize
}
}
func makeCoordinator() -> Coordinator {
Coordinator(self)
}
class Coordinator: NSObject, UIScrollViewDelegate {
var parent: UIScrollViewWrapper
var hostingController: UIHostingController<Content>!
init(_ parent: UIScrollViewWrapper) {
self.parent = parent
}
}
}
ContentView
struct ContentView: View {
var body: some View {
GeometryReader { geometry in
VStack(spacing: 0) {
RoundedRectangle(cornerRadius: 15)
.fill(.cyan)
.overlay(
Text("SwiftUI View")
.foregroundColor(.white)
)
.frame(height: 75)
.onTapGesture {
print("SwiftUI")
}
UIScrollViewWrapper(width: geometry.size.width, height: geometry.size.height - 75) {
RoundedRectangle(cornerRadius: 15)
.fill(.mint)
.frame(height: geometry.size.height * 2)
.onTapGesture {
print("UIScrollView")
}
}
.border(.red, width: 2)
}
}
}
}
Things I have tried:
I tried making UIScrollView fullscreen and offsetting the subview so my SwiftUI view is visible. If I do this touches to my SwiftUI view gets blocked by UIScrollView. With this approach I have tried changing the zIndex of SwiftUI View putting it on top of UIScrollView when necessary but this is not working with my animations and giving bad user experience.
struct ContentView: View {
var body: some View {
GeometryReader { geometry in
ZStack(alignment: .top) {
RoundedRectangle(cornerRadius: 15)
.fill(.cyan)
.overlay(
Text("SwiftUI View")
.foregroundColor(.white)
)
.frame(height: 75)
.onTapGesture {
print("SwiftUI")
}
UIScrollViewWrapper(width: geometry.size.width, height: geometry.size.height) {
RoundedRectangle(cornerRadius: 15)
.fill(.mint)
.frame(height: geometry.size.height * 2)
.offset(y: 75)
.onTapGesture {
print("UIScrollView")
}
}
.border(.red, width: 2)
}
}
}
}
Can you help me solve this problem ?
Thank You !

Answer 1

To do this with UIKit...
constrain the scroll view to fill the screen (safe area)
constrain the "sticky top view" to the scroll view's Frame Layout Guide
constrain the "scrollable content view" to the scroll view's Content Layout Guide
This will keep the top view "stuck in place" while allowing the content view to scroll normally.
Quick example:
class StickyTopScrollView: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let scrollView = UIScrollView()
let stickyTopView = UIView()
let contentView = UIView()
// label to add to the sticky top view
let stvLabel = UILabel()
stvLabel.font = .systemFont(ofSize: 26, weight: .light)
stvLabel.textAlignment = .center
stvLabel.textColor = .white
stvLabel.text = "Sticky Top View"
// vertical stack view to add to the "scrollable content" view
// to which we'll add some labels
let stackView = UIStackView()
stackView.axis = .vertical
stackView.spacing = 32
scrollView.backgroundColor = .systemRed
stickyTopView.backgroundColor = .systemGreen
contentView.backgroundColor = .systemBlue
[scrollView, stickyTopView, contentView, stvLabel, stackView].forEach { v in
v.translatesAutoresizingMaskIntoConstraints = false
}
stickyTopView.addSubview(stvLabel)
contentView.addSubview(stackView)
scrollView.addSubview(stickyTopView)
scrollView.addSubview(contentView)
view.addSubview(scrollView)
let safeG = view.safeAreaLayoutGuide
let contentG = scrollView.contentLayoutGuide
let frameG = scrollView.frameLayoutGuide
let topViewHeight: CGFloat = 75.0
NSLayoutConstraint.activate([
// scroll view fills the safe area
scrollView.topAnchor.constraint(equalTo: safeG.topAnchor, constant: 0.0),
scrollView.leadingAnchor.constraint(equalTo: safeG.leadingAnchor, constant: 0.0),
scrollView.trailingAnchor.constraint(equalTo: safeG.trailingAnchor, constant: 0.0),
scrollView.bottomAnchor.constraint(equalTo: safeG.bottomAnchor, constant: 0.0),
// center label in stick top view
stvLabel.centerXAnchor.constraint(equalTo: stickyTopView.centerXAnchor),
stvLabel.centerYAnchor.constraint(equalTo: stickyTopView.centerYAnchor),
// sticky top view should be full width and "stuck" to the top of the
// scroll view Frame Layout Guide
stickyTopView.topAnchor.constraint(equalTo: frameG.topAnchor, constant: 0.0),
stickyTopView.leadingAnchor.constraint(equalTo: frameG.leadingAnchor, constant: 0.0),
stickyTopView.trailingAnchor.constraint(equalTo: frameG.trailingAnchor, constant: 0.0),
stickyTopView.heightAnchor.constraint(equalToConstant: topViewHeight),
// constrain "scrollable content" view to Content Layout Guide
contentView.topAnchor.constraint(equalTo: contentG.topAnchor, constant: topViewHeight),
contentView.leadingAnchor.constraint(equalTo: contentG.leadingAnchor, constant: 0.0),
contentView.trailingAnchor.constraint(equalTo: contentG.trailingAnchor, constant: 0.0),
contentView.bottomAnchor.constraint(equalTo: contentG.bottomAnchor, constant: 0.0),
// constrain "scrollable content" view Width to Frame Layout Guide
contentView.widthAnchor.constraint(equalTo: frameG.widthAnchor, constant: 0.0),
// constrain stack view in "scrollable content" view with
// 20-points "padding" on all 4 sides
stackView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 20.0),
stackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 20.0),
stackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -20.0),
stackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -20.0),
])
// now, let's add some labels to the stack view so our
// "scrollable content" view will be tall enough to need to scroll
for i in 1...20 {
let v = UILabel()
v.font = .systemFont(ofSize: 26, weight: .light)
v.text = "Label \(i)"
v.backgroundColor = .yellow
stackView.addArrangedSubview(v)
}
// a little styling
stickyTopView.layer.cornerRadius = 16
contentView.layer.cornerRadius = 16
// and add tap gesture recognizers
stickyTopView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(stickyTopTapped(_:))))
contentView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(scrollContentTapped(_:))))
}
#objc func stickyTopTapped(_ g: UITapGestureRecognizer) {
print("Sticky Top View Tapped")
}
#objc func scrollContentTapped(_ g: UITapGestureRecognizer) {
print("Scrollable Content View Tapped")
}
}
Looks like this when running and scrolling:
While the "sticky top view" is visible, it can be tapped. As we "cover" it with the scrollable content view, the content view will get the tap.
You may be able to adapt that to SwiftUI with a UIScrollView in a UIViewRepresentable object.