How to add extra padding to UIScrollView on iPad programmatically? - ios

Question

Some of the applications add extra padding on left and right to the UIScrollView instances when the device width is too large.
What's important, content of the UIScrollView is not restricted to fixed width, because user can scroll outside of the content. It looks like it would have contentInset set, which dynamically changes based on superview width. How can I achieve it?
Note
Screen from above is not implemented as a scrolling view, I just wanted to visualize the concept.

Answer 1

If it is an option at all, you can adjust left and right (trailing, leading) autolayout constraints.
The following code creates horizontally scrollable scrollView with two containers in it. The first container contains a subview (red rectangle) with some margins.
Scroll View with container.
//: A UIKit based Playground for presenting user interface
import UIKit
import PlaygroundSupport
class MyViewController : UIViewController {
private let scrollView = UIScrollView()
private let contentView = UIView()
override func loadView() {
let view = UIView()
self.view = view
self.view.backgroundColor = UIColor.white
scrollView.isPagingEnabled = true
scrollView.isScrollEnabled = true
scrollView.isUserInteractionEnabled = true
scrollView.bounces = true
self.view.addSubview(scrollView)
scrollView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
scrollView.topAnchor.constraint(equalTo: self.view.topAnchor),
scrollView.leftAnchor.constraint(equalTo: self.view.leftAnchor),
scrollView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
scrollView.rightAnchor.constraint(equalTo: self.view.rightAnchor)
])
contentView.translatesAutoresizingMaskIntoConstraints = false
contentView.backgroundColor = UIColor(white: 0.9, alpha: 0.9)
scrollView.addSubview(contentView)
let widthAnchor = contentView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
let heightAnchor = contentView.heightAnchor.constraint(equalTo: scrollView.heightAnchor)
widthAnchor.priority = .defaultLow
heightAnchor.priority = .defaultLow
NSLayoutConstraint.activate([
contentView.topAnchor.constraint(equalTo: scrollView.topAnchor),
contentView.leftAnchor.constraint(equalTo: scrollView.leftAnchor),
contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
contentView.rightAnchor.constraint(equalTo: scrollView.rightAnchor),
widthAnchor,
heightAnchor
])
contentView.layer.borderWidth = 1
contentView.layer.borderColor = UIColor.red.cgColor
let containerView1 = UIView()
containerView1.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(containerView1)
containerView1.backgroundColor = UIColor(white: 0.4, alpha: 1)
NSLayoutConstraint.activate([
containerView1.topAnchor.constraint(equalTo: contentView.topAnchor),
containerView1.leftAnchor.constraint(equalTo: contentView.leftAnchor),
containerView1.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
containerView1.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
])
let container1Content = container1ContentView()
containerView1.addSubview(container1Content)
NSLayoutConstraint.activate([
container1Content.topAnchor.constraint(equalTo: containerView1.topAnchor, constant: 44),
container1Content.leftAnchor.constraint(equalTo: containerView1.leftAnchor, constant: 44),
container1Content.rightAnchor.constraint(equalTo: containerView1.rightAnchor, constant: -44),
container1Content.bottomAnchor.constraint(equalTo: containerView1.bottomAnchor, constant: -44)
])
let containerView2 = UIView()
containerView2.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(containerView2)
containerView2.backgroundColor = UIColor(white: 0.9, alpha: 1)
NSLayoutConstraint.activate([
containerView2.topAnchor.constraint(equalTo: contentView.topAnchor),
containerView2.leftAnchor.constraint(equalTo: containerView1.rightAnchor),
containerView2.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
containerView2.rightAnchor.constraint(equalTo: contentView.rightAnchor),
containerView2.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
])
}
private func container1ContentView() -> UIView {
let content = UIView()
content.translatesAutoresizingMaskIntoConstraints = false
content.backgroundColor = UIColor.red
return content
}
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()