Swift：如何以编程方式使用 UIViews 从 Interface Builder 填充 ScrollView

Question

I am working on a project where I want the user to be able to select two methods of input for the same form. I came up with a scrollview that contains two custom UIViews (made programmatically). Here is the code for the responsible view controller:

import UIKit

class MainVC: UIViewController, UIScrollViewDelegate {

    @IBOutlet weak var scrollView: UIScrollView!
    
    @IBOutlet weak var pageControl: UIPageControl!
    
    var customView1: CustomView1 = CustomView1()
    
    var customView2: customView2 = CustomView2()
    
    var frame = CGRect.zero
    
    func setupScrollView() {

        pageControl.numberOfPages = 2
        
        frame.origin.x = 0
        frame.size = scrollView.frame.size
        
        customView1 = customView1(frame: frame)

        self.scrollView.addSubview(customView1)
        
        frame.origin.x = scrollView.frame.size.width
        frame.size = scrollView.frame.size
        
        customView2 = CustomView2(frame: frame)
        
        self.scrollView.addSubview(customView2)
        
        self.scrollView.contentSize = CGSize(width: scrollView.frame.size.width * 2, height: scrollView.frame.size.height)
        
        self.scrollView.delegate = self
        
    }
    
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        let pageNumber = scrollView.contentOffset.x / scrollView.frame.size.width
        pageControl.currentPage = Int(pageNumber)
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupScrollView()
        
        scrollView.delegate = self
    }

While it works, Xcode gives me an error message for auto layout:

Scrollable content size is ambiguous for "ScrollView"

Also a problem: content on the second UIView is not centered, even though it should be:

picture of the not centered content

import UIKit

class customView2: UIView {

lazy var datePicker: UIDatePicker = {
    let datePicker = UIDatePicker()
    datePicker.translatesAutoresizingMaskIntoConstraints = false
    return datePicker
  }()

//initWithFrame to init view from code
override init(frame: CGRect) {
    super.init(frame: frame)
    setupView()
}
  
//initWithCode to init view from xib or storyboard
required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    setupView()
}

func setupView () {
    self.backgroundColor = .systemYellow
    
    datePicker.datePickerMode = .date
    
    datePicker.addTarget(self, action: #selector(self.datePickerValueChanged(_:)), for: .valueChanged)
    
    addSubview(datePicker)
    
    setupLayout()
}

func setupLayout() {
    
    let view = self
    
    NSLayoutConstraint.activate([
        datePicker.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        datePicker.topAnchor.constraint(equalTo: view.topAnchor, constant: 20),
        datePicker.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.5),
        datePicker.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.2)
    ])
}

@objc func datePickerValueChanged(_ sender: UIDatePicker) {
    let dateFormatter: DateFormatter = DateFormatter()
    dateFormatter.dateFormat = "dd.MM.yyyy"
    let selectedDate: String = dateFormatter.string(from: sender.date)
    print("Selected value \(selectedDate)")
}

Any ideas on how to solve this? Thank you very much in advance. And please go easy on me, this is my first question on stackoverflow. I am also fairly new to programming in swift.

Answer 1

To make things easier on yourself,

• add a horizontal UIStackView to the scroll view
• set .distribution =.fillEqually
• constrain all 4 sides to the scroll view's .contentLayoutGuide
• constrain its height to the scroll view's .frameLayoutGuide
• add your custom views to the stack view
• constrain the width of the first custom view to the width of the scroll view's .frameLayoutGuide

Here is your code, modified with that approach:

class MainVC: UIViewController, UIScrollViewDelegate {
    
    @IBOutlet weak var scrollView: UIScrollView!
    
    @IBOutlet weak var pageControl: UIPageControl!
    
    var customView1: CustomView1 = CustomView1()
    
    var customView2: CustomView2 = CustomView2()
    
    func setupScrollView() {
        
        pageControl.numberOfPages = 2
        
        // let's put the two custom views in a horizontal stack view
        let stack = UIStackView()
        stack.axis = .horizontal
        stack.distribution = .fillEqually
        stack.translatesAutoresizingMaskIntoConstraints = false
        
        stack.addArrangedSubview(customView1)
        stack.addArrangedSubview(customView2)
        
        // add the stack view to the scroll view
        scrollView.addSubview(stack)
        
        let contentG = scrollView.contentLayoutGuide
        let frameG = scrollView.frameLayoutGuide
        
        NSLayoutConstraint.activate([
            
            // constrain stack view to all 4 sides of content layout guide
            stack.topAnchor.constraint(equalTo: contentG.topAnchor),
            stack.leadingAnchor.constraint(equalTo: contentG.leadingAnchor),
            stack.trailingAnchor.constraint(equalTo: contentG.trailingAnchor),
            stack.bottomAnchor.constraint(equalTo: contentG.bottomAnchor),

            // stack view Height equal to scroll view frame layout guide height
            stack.heightAnchor.constraint(equalTo: frameG.heightAnchor),
            
            // stack is set to fillEqually, so we only need to set
            //  width of first custom view equal to scroll view frame layout guide width
            customView1.widthAnchor.constraint(equalTo: frameG.widthAnchor),
            
        ])
        
        self.scrollView.delegate = self
        
    }
    
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        let pageNumber = scrollView.contentOffset.x / scrollView.frame.size.width
        pageControl.currentPage = Int(pageNumber)
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupScrollView()
        
        scrollView.delegate = self
    }
}

---

Edit

Couple additional notes...

1. UIScrollView layout ambiguity.

As I said in my initial comment, if we add a UIScrollView in Storyboard / I nterface B uilder, but do NOT give it any constrained content, IB will complain that it has Scrollable Content Size Ambiguity -- because it does . We haven't told IB what the content will be.

We can either ignore it, or select the scroll view and, at the bottom of the Size Inspector pane, change Ambiguity to Never Verify .

As a general rule, you should correct all auto-layout warnings / errors, but in specific cases such as this - where we know that it's setup how we want, and we'll be satisfying constraints at run-time - it doesn't hurt to leave it alone.

2. UIDatePicker not being centered horizontally.

It actually is centered. If you add this line:

datePicker.backgroundColor = .green

You'll see that the object frame itself is centered, but the UI elements inside the frame are left-aligned:

From quick research, it doesn't appear that can be changed.

Now, from Apple's docs , we see:

You should integrate date pickers in your layout using Auto Layout. Although date pickers can be resized, they should be used at their intrinsic content size.

Curiously, if we add a UIDatePicker in Storyboard, change its Preferred Style to Compact , and give it centerX and centerY constraints... Storyboard doesn't believe it has an intrinsic content size.

If we add it via code, giving it only X/Y position constraints, it will show up where we want it at its intrinsic content size . But... if we jump into Debug View Hierarchy , Xcode tells us its Position and size are ambiguous.

Now, what's even more fun...

Tap that control and watch the Debug console fill with 535 Lines of auto-layout errors / warnings!!!

Some quick investigation -- these are all internal auto-layout issues, and have nothing to do with our code or layout.

We see similar issues with the iOS built-in keyboard when it starts showing auto-complete options.

Those are safe to ignore.