How to set content width to the size of device/parent width?

Question

The images in my feature scroll show up weirdly in smaller sized phones such as the iPhone 5s, iPhone 6, etc.

EDIT: I'm using UIScrollView to do this. :)

I've tried adding my code into viewDidLayoutSubviews and viewWillLayoutSubviews but it does not seem to be working.

//1st attempt

override func viewDidLayoutSubviews() {
    featureScroll.contentSize = CGSize(width: self.view.bounds.width * CGFloat(featureArray.count), height: 300)
}

//2nd attempt

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()()
    featureScroll.contentSize = CGSize(width: self.view.bounds.width * CGFloat(featureArray.count), height: 300)
}

EDIT: //how i'm loading the images into the featureScroll

let feature1 = ["image": "ic_home1"]
let feature2 = ["image": "ic_home2"]
let feature3 = ["image": "ic_home3"]

var featureArray = [Dictionary<String, String>](


override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    featureArray = [feature1, feature2, feature3]
    featureScroll.isPagingEnabled = true
    featureScroll.contentSize = CGSize(width: self.view.bounds.width * CGFloat(featureArray.count), height: 300)
    featureScroll.showsHorizontalScrollIndicator = false

    featureScroll.delegate = self

    loadFeatures()


}

func loadFeatures(){
    for (index, feature) in featureArray.enumerated() {
        if let featureView = Bundle.main.loadNibNamed("Feature", owner: self, options: nil)?.first as? FeatureView {

            featureView.featureImage.image = UIImage(named: feature["image"]!)

            featureScroll.addSubview(featureView)

            featureView.frame.size.width = featureScroll.bounds.size.width
            featureView.frame.origin.x = CGFloat(index) * featureScroll.bounds.size.width


        }
    }

}


func scrollViewDidScroll(_ featureScroll: UIScrollView) {
    let page = featureScroll.contentOffset.x / featureScroll.frame.size.width
    featurePageControl.currentPage = Int(page)
}

The link below shows the actual results, I want to get rid of the white spaces, how should I go about doing so?

--> https://i.stack.imgur.com/2RlAv.png

Thank you in advance for your help! :)

Answer 1

The theory

A scrollView needs to know where it stands (its frame = position and size) and the size of its content (which will scroll).

A vertical stackView needs to know its position (x, y) and its width. Its height is determined by its content and settings (eg spacing between items).

---

Example

So, for your need, to have a scrollView on the entire screen and a stack of vertical views inside you can do something like this (only with constraints, nothing is set programmatically) :

---

UIScrollView:

Top, leading, trailing, bottom constraints at 0 to its superview

---

Vertical UIStackView:

Leading, trailing, constraints at 0 to the ViewController's view. Top, leading, trailing, bottom = 0 to its superview (scrollView) > this will make the ScrollView ... scroll when the stackView content is bigger than the scrollView's height

---

StackView's items:

In your case I think it's a bunch of imageViews. Each item needs to set its own height.

The sum of the ImageView heights (and the spacing set in the stackView) will determine the stackView's height which in will determine the scrollView's content height (and thus the scrollable height).

For more information about UIScrollView see the documentation here

For more information UIStackView see the documentation here