CODEWITHSUNDEEP
iosuiscrollviewautolayoutxcode-storyboarduistackview
nambatee
nambatee

Reputation: 1568

Horizontal UIStackView inside UIScrollView not scrolling

I have a horizontal UIStackView with 3 buttons inside UIScrollView. I'd like the stack to scroll horizontally when the user changes the font size (via Accessibility).

Storyboard

Right now, when the user increases the font size, one of the buttons gets squashed.

Here are my constraints:

UIStackView constraints

UIScrollView constraints

Upvotes: 0

Views: 1437

Answers (3)

user1039695
user1039695

Reputation: 1061

Try this working fine my side and scrolling well.

func createHorizontalStackViewWithScroll() {

 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

John Franke
John Franke

Reputation: 1515

Make sure the UIScrollView's content size is set up correctly. Here are some useful parameters.

scrollVIew.contentInset scrollVIew.scrollIndicatorInsets scrollView.contentSize

When the content view is taller than the scroll view, the scroll view enables vertical scrolling. When the content view is wider than the scroll view, the scroll view enables horizontal scrolling. Otherwise, scrolling is disabled by default. You must set your content view size dynamically so when they change the font, the content view gets wider than the scroll view width. You could wrap your stack view in another UIViewController and treat it as a content view.

Upvotes: 1

nambatee
nambatee

Reputation: 1568

It seems like the Greater Than or Equal constraint between the scroll view and the button on the right was the problem. I changed it to Equal and it worked.

Upvotes: 1

Related Questions