Tag: scrolling

This time we are going to look into how to embed custom view in UIScrollView and setting up autolayout constraints for different scenarios.

Setting up view controller with scroll view

We’ll gonna create a new view controller what contains UIScrollView as it’s subview. UIScrollView will cover the whole view area. Everything is set up in code as it is easier to represent the steps needed. It is easy to use those steps and setting up constraints in interface builder.

	override func loadView() {
	self.view = UIView(frame: .zero)
	let scrollView: UIScrollView = {
	let scrollView = UIScrollView(frame: .zero)
	scrollView.backgroundColor = .white
	scrollView.translatesAutoresizingMaskIntoConstraints = false
	return scrollView
	}()
	view.addSubview(scrollView)
	NSLayoutConstraint.activate([
	scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
	scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
	scrollView.topAnchor.constraint(equalTo: view.topAnchor),
	scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
	])
	}

view raw DetailViewController.swift hosted with ❤ by GitHub

Case 1: Vertically scrollable view

Most common case is to have scroll view with vertically scrollable content. Embedded view’s leading, trailing, top and bottom layout anchors should be equal to scroll view’s content layout margin’s corresponding anchors. For making the view only scrollable in vertical axis, embedded view’s width should match with scroll view’s width. This is achieved by adding an extra width constraint to the embedded view. Width constraint should make the view width equal to scroll view’s width. When setting view’s up in interface builder, make sure to add at least one subview to the embedded view what has intrinsic content size (label, button etc) (also add constraints). Otherwise interface builder does not know what size the embedded view has.

	let customView = CustomView(frame: .zero) // view with intrinsicContentSize
	customView.translatesAutoresizingMaskIntoConstraints = false
	scrollView.addSubview(customView)
	NSLayoutConstraint.activate([
	customView.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
	customView.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
	customView.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
	customView.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor),
	customView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
	})

view raw DetailViewController.swift hosted with ❤ by GitHub

Case 2: Horizontally scrollable view

Horizontally scrollable view follows the same setup except instead of width constraint, we’ll add height constraint instead. When setting up the height constraint, scroll view’s safeAreaLayoutGuide’s heightAnchor should be used. This layout guide ignores the portion of the view what is covered by navigation bars, tab bars, toolbars, and other views.

	let customView = CustomView(frame: .zero) // view with intrinsicContentSize
	customView.translatesAutoresizingMaskIntoConstraints = false
	scrollView.addSubview(customView)
	NSLayoutConstraint.activate([
	customView.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
	customView.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
	customView.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
	customView.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor),
	customView.heightAnchor.constraint(equalTo: scrollView.safeAreaLayoutGuide.heightAnchor)
	])

view raw DetailViewController.swift hosted with ❤ by GitHub

Case 3: Vertically and horizontally scrollable view

For making the embedded view to be scrollable in horizontal and vertical axis, we’ll only add leading, trailing, top and bottom constraints to scroll view’s contentLayoutGuide’s corresponding anchors. Embedded view should define intrinsicContentSize as this size is used by scroll view for knowing what size the view wants to be. This kind of layout is probably usable only for fixed size view’s. For example, building a custom grid view where the row and column count define the size of the view.

	let customView = CustomView(frame: .zero) // view with intrinsicContentSize
	customView.translatesAutoresizingMaskIntoConstraints = false
	scrollView.addSubview(customView)
	NSLayoutConstraint.activate([
	customView.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
	customView.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
	customView.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
	customView.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor)
	])

view raw DetailViewController.swift hosted with ❤ by GitHub

Summary

We took a look on how to add constraints to embedded view in scroll view for getting a specific scrolling behaviour. In one sentence: leading, trailing, top, and bottom constraints to contentLayoutGuide and adding width or height constraint when necessary.

If this was helpful, please let me know on Mastodon@toomasvahter or Twitter @toomasvahter. Feel free to subscribe to RSS feed. Thank you for reading.

Example

UIScrollViewExample (Xcode 11.0)