UIScrollView with horizontal paging using UIView as Subviews

Question

I have seen answers for this following question. I am new to swift programming and I am trying to implement a similar feature. I just wondered if you had any guidance on how to achieve this in swift 3 Xcode 8. I have been searching around for a suitable solution but I've had no luck.

I am trying use UIViews as a subview of UIscrollviews. I would also like to have each view fill the screen when pressed and shows another UIView. I have seen a similar feature on the GOLF app by 'Tyler the Creator'

The feature I am trying achieve is pictured below.

Any help you could give would be greatly appreciated.

This is a representation of the feature I am trying to create.

Solution 1

    let scrollView : UIScrollView = UIScrollView(frame: CGRect(x: 80, y: 80, 
    width: 250, height: 300))
    scrollView.isPagingEnabled = true
    scrollView.backgroundColor = .orange
    view.addSubview(scrollView)
    let numberOfPages :Int = 5
    let padding : CGFloat = 15
    let viewWidth = scrollView.frame.size.width - 2 * padding
    let viewHeight = scrollView.frame.size.height - 2 * padding

    var x : CGFloat = 0

    for i in 0...numberOfPages{
        let view: UIView = UIView(frame: CGRect(x: x + padding, y: padding, width: viewWidth, height: viewHeight))
        view.backgroundColor = UIColor.white
        scrollView .addSubview(view)

        x = view.frame.origin.x + viewWidth + padding
    }

    scrollView.contentSize = CGSize(width:x+padding, height:scrollView.frame.size.height)

Solution 2

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var scrollView: UIScrollView!

var colors:[UIColor] = [.red, .blue, .green, .yellow]
var frame: CGRect = CGRect(x: 0, y: 0, width: 0, height: 0)
override func viewDidLoad() {
    super.viewDidLoad()

    scrollView.isPagingEnabled = true
    scrollView.backgroundColor = .orange
    view.addSubview(scrollView)
    let numberOfPages :Int = 3
    let padding : CGFloat = 15
    let viewWidth = scrollView.frame.size.width - 2 * padding
    let viewHeight = scrollView.frame.size.height - 2 * padding

    var x : CGFloat = 0

    for i in 0...numberOfPages{
        let view: UIView = UIView(frame: CGRect(x: x + padding, y: padding, width: viewWidth, height: viewHeight))
        view.backgroundColor = colors[i]
        scrollView .addSubview(view)
        x = view.frame.origin.x + viewWidth + padding
    }

    scrollView.contentSize = CGSize(width:x+padding, height:scrollView.frame.size.height)
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

}

Comments

[Aditya]

It's Working,Try it

[matchifang]

I tried the solution and it's scrolling fine, but it does not show part of the next card.

[iago849]

nice, but I'd recommend using constraints. At least it would work fine with auto rotation