CODEWITHSUNDEEP
swiftuiscrollviewscrollview
MirrorJacket123
MirrorJacket123

Reputation: 432

ScrollView with StackView Inside Programmatically Not Scrolling

I am making a UIScrollView with a UIStackView inside it programmatically.

The UIScrollView does not scroll even though the UIStacVview that is inside it has a much larger width.

Here is my code:

    view.backgroundColor = UIColor(red: 0.161, green: 0.165, blue: 0.188, alpha: 1.00) // 292a30

    view1.backgroundColor = UIColor.green
    view2.backgroundColor = UIColor.yellow
    view3.backgroundColor = UIColor.gray
    view4.backgroundColor = UIColor.white
    view5.backgroundColor = UIColor.orange

    scrollView.backgroundColor = UIColor.red
    scrollView.frame = CGRect(x: 10, y: 100, width: view.frame.width - 20, height: 100)
    scrollView.translatesAutoresizingMaskIntoConstraints = false

    stackView.backgroundColor = UIColor.blue
    stackView.axis = .horizontal
    stackView.spacing = 10
    stackView.distribution = .fillEqually
    stackView.frame = CGRect(x: 0, y: 0, width: view.frame.width + 200, height: 100)
    stackView.addArrangedSubview(view1)
    stackView.addArrangedSubview(view2)
    stackView.addArrangedSubview(view3)
    stackView.addArrangedSubview(view4)
    stackView.addArrangedSubview(view5)

    scrollView.addSubview(stackView)
    view.addSubview(scrollView)

What is working:

  1. The UIStackView loads and looks like this:

  1. The UIStackView stretches out the side of the UIScrollView.

What is not working:

  1. You cannot scroll with the UIScrollView, it is just like it isn't there.

Upvotes: 0

Views: 3384

Answers (2)

user1039695
user1039695

Reputation: 1061

After various attempts i am able to make it horizontally scrollable and without overlapping.

func createHorizontalStackViewsWithScroll() {

 self.view.addSubview(stackScrollView)
 stackScrollView.translatesAutoresizingMaskIntoConstraints = false
 stackScrollView.heightAnchor.constraint(equalToConstant: 85).isActive = true
 stackScrollView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
 stackScrollView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
 stackScrollView.bottomAnchor.constraint(equalTo: visualEffectViews.topAnchor).isActive = true
 stackScrollView.addSubview(stackView)

 stackView.translatesAutoresizingMaskIntoConstraints = false
 stackView.topAnchor.constraint(equalTo: stackScrollView.topAnchor).isActive = true
 stackView.leadingAnchor.constraint(equalTo: stackScrollView.leadingAnchor).isActive = true
 stackView.trailingAnchor.constraint(equalTo: stackScrollView.trailingAnchor).isActive = true
 stackView.bottomAnchor.constraint(equalTo: stackScrollView.bottomAnchor).isActive = true
 stackView.heightAnchor.constraint(equalTo: stackScrollView.heightAnchor).isActive = true

 stackView.distribution = .equalSpacing
 stackView.spacing = 5
 stackView.axis = .horizontal
 stackView.alignment = .fill


 for i in 0 ..< images.count {
 let photoView = UIButton.init(frame: CGRect(x: 0, y: 0, width: 85, height: 85))
 // set button image
 photoView.translatesAutoresizingMaskIntoConstraints = false
 photoView.heightAnchor.constraint(equalToConstant: photoView.frame.height).isActive = true
 photoView.widthAnchor.constraint(equalToConstant: photoView.frame.width).isActive = true

 stackView.addArrangedSubview(photoView)
 }
 stackView.setNeedsLayout()

 }

Upvotes: 0

Shehata Gamal
Shehata Gamal

Reputation: 100541

1 - When you use frame-layout then don't set:

scrollView.translatesAutoresizingMaskIntoConstraints = false

(That is for when you set constraints programmatically.)

2 - For the scrollView either use:

scrollView.contentSize = CGSize(width: 200 * 5, height: 100)

(Above I suppose width of each view is 200 and number of them equals 5.)

OR

Use Constraints.

Upvotes: 1

Related Questions