Swift: How to convert vertical UIScrollView to a horizontal one - swift

Question

Usually, I would use SwiftUI's ScrollView, but in my edge case scenario, I need to use it as a UIScrollView in SwiftUI's UIViewRepresentable
struct CALayerScrollView: UIViewRepresentable {
func makeUIView(context: Context) -> some UIView {
var view = UIView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width / 2, height: UIScreen.main.bounds.height / 2))
let scrollView: UIScrollView = {
let scrollView = UIScrollView()
scrollView.translatesAutoresizingMaskIntoConstraints = false
return scrollView
}()
let scrollViewContainer: UIStackView = {
let view = UIStackView()
view.axis = .vertical
view.spacing = 10
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
let redView: UIView = {
let view = UIView()
view.heightAnchor.constraint(equalToConstant: 500).isActive = true
view.backgroundColor = .red
return view
}()
let blueView: UIView = {
let view = UIView()
view.heightAnchor.constraint(equalToConstant: 200).isActive = true
view.backgroundColor = .blue
return view
}()
let greenView: UIView = {
let view = UIView()
view.heightAnchor.constraint(equalToConstant: 1200).isActive = true
view.backgroundColor = .green
return view
}()
view.addSubview(scrollView)
scrollView.addSubview(scrollViewContainer)
scrollViewContainer.addArrangedSubview(redView)
scrollViewContainer.addArrangedSubview(blueView)
scrollViewContainer.addArrangedSubview(greenView)
scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
scrollViewContainer.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
scrollViewContainer.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
scrollViewContainer.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
scrollViewContainer.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
// this is important for scrolling
scrollViewContainer.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
return view
}
func updateUIView(_ uiView: UIViewType, context: Context) { }
}
I've tried setting the viewAxis to .horizontal, but I still does not scroll laterally.
Any advices is appreciated. Thanks

Answer 1

You are setting the stack view axis to Vertical -- but you want Horizontal scrolling... so set it to .horizontal.
You are setting Height for each arranged subview, but you haven't set the Widths... so give them Widths.
You should constrain the scroll view's content to the scroll view's Content Layout Guide.
Because you're setting varying Heights, it's not quite clear if you want only horizontal scrolling... so this example ends up scrolling both directions:
struct TestView: View {
var body: some View {
VStack {
CALayerScrollView()
}
.frame(width: 240, height: 400)
.background(Color.yellow)
}
}
struct CALayerScrollView: UIViewRepresentable {
func makeUIView(context: Context) -> some UIView {
let view = UIView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width / 2, height: UIScreen.main.bounds.height / 2))
let scrollView: UIScrollView = {
let scrollView = UIScrollView()
scrollView.translatesAutoresizingMaskIntoConstraints = false
return scrollView
}()
let scrollViewContainer: UIStackView = {
let view = UIStackView()
// Horizontal Stack View
view.axis = .horizontal
view.spacing = 10
// .top Alignment, because we're setting different heights for the subviews
view.alignment = .top
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
let redView: UIView = {
let view = UIView()
view.heightAnchor.constraint(equalToConstant: 500).isActive = true
// also needs a width
view.widthAnchor.constraint(equalToConstant: 200).isActive = true
view.backgroundColor = .red
return view
}()
let blueView: UIView = {
let view = UIView()
view.heightAnchor.constraint(equalToConstant: 200).isActive = true
// also needs a width
view.widthAnchor.constraint(equalToConstant: 400).isActive = true
view.backgroundColor = .blue
return view
}()
let greenView: UIView = {
let view = UIView()
view.heightAnchor.constraint(equalToConstant: 1200).isActive = true
// also needs a width
view.widthAnchor.constraint(equalToConstant: 800).isActive = true
view.backgroundColor = .green
return view
}()
view.addSubview(scrollView)
scrollView.addSubview(scrollViewContainer)
scrollViewContainer.addArrangedSubview(redView)
scrollViewContainer.addArrangedSubview(blueView)
scrollViewContainer.addArrangedSubview(greenView)
scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
// we want to constrain the scroll view *content* to the Content Layout Guide
let cg = scrollView.contentLayoutGuide
scrollViewContainer.leadingAnchor.constraint(equalTo: cg.leadingAnchor).isActive = true
scrollViewContainer.trailingAnchor.constraint(equalTo: cg.trailingAnchor).isActive = true
scrollViewContainer.topAnchor.constraint(equalTo: cg.topAnchor).isActive = true
scrollViewContainer.bottomAnchor.constraint(equalTo: cg.bottomAnchor).isActive = true
return view
}
func updateUIView(_ uiView: UIViewType, context: Context) { }
}
Should get you on your way...