Adding tableview to scrollview with paging enabled.

Question

I am creating an app and one of its screen needs to have a UIScrollView with paging. In each page of the scrollview it needs to have a UITableView as shown:

I have accomplished to create a scrollview with paging enabled (programatically) but the problem I am facing is: If I create a simple UILabel and add it to the pages, it works fine. But if I create a tableview and add it to the pages (if this term makes sense) nothing gets displayed on the screen. Here is my code with comments on related places for better understanding:

class SampleViewController: UIViewController, UIScrollViewDelegate, UITableViewDelegate, UITableViewDataSource {

    let screenHeight = UIScreen.main.bounds.height
    let screenWidth = UIScreen.main.bounds.width

    let scrollView = UIScrollView()
    let tableView = UITableView()

    var colors:[UIColor] = [UIColor.red, UIColor.blue, UIColor.green, UIColor.yellow]
    let animals: [String] = ["Horse", "Cow", "Camel", "Sheep", "Goat", "Dog", "Cat", "Kitten", "Lion", "Tiger", "Owl", "Skylark", "Snail", "Cub", "Zebra"]
    var frame: CGRect = CGRect(x:0, y:0, width:0, height:0)
    var pageControl : UIPageControl = UIPageControl(frame: CGRect(x:50,y: 300, width:200, height:50))
    let cellReuseIdentifier = "cell"

    override func viewDidLoad() {
        super.viewDidLoad()

        let frameOfScrollView : CGRect = CGRect(x:0, y:0, width:screenWidth, height:screenHeight)
        scrollView.frame = frameOfScrollView

        scrollView.delegate = self
        scrollView.isPagingEnabled = true

        tableView.delegate = self
        tableView.dataSource = self

        self.view.addSubview(scrollView)
        self.tableView.register(UITableViewCell.self, forCellReuseIdentifier: cellReuseIdentifier)
        self.scrollView.contentSize = CGSize(width:self.scrollView.frame.size.width * 4,height: self.scrollView.frame.size.height)

        for index in 0..<4 {

            frame.origin.x = self.scrollView.frame.size.width * CGFloat(index)
            frame.size = self.scrollView.frame.size

            // THIS THING DOESN'T WORK
            tableView.frame = frame
            self.scrollView .addSubview(tableView)

            // THIS THING WORKS
            let subView = UILabel(frame: frame)
            subView.backgroundColor = colors[index]
            subView.text = "how are you?"
            self.scrollView .addSubview(subview)
        }
    }

    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {

        let pageNumber = round(scrollView.contentOffset.x / scrollView.frame.size.width)
        pageControl.currentPage = Int(pageNumber)
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.animals.count
    }

    // create a cell for each table view row
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell:UITableViewCell = self.tableView.dequeueReusableCell(withIdentifier: cellReuseIdentifier) as UITableViewCell!
            cell.textLabel?.text = self.animals[indexPath.row]
        return cell
    }
}

What am I doing wrong? Did I miss anything regrading tableview?

Note: I have created views programmatically because I didn't have much understanding regarding which constraints shall I use in order to add paging to scrollview because I am a newbie to iOS. If anyone can provide some solution to my problem in terms of auto layouts, it would be welcomed. Basically the purpose is just to achieve what is shown in the screenshot attached above. Any alternate approach if applicable, would also be appreciated.

Answer 1

No need to declare global variable for UITableview. Replace viewDidLoad() to achieve your requirement.

override func viewDidLoad() {
        super.viewDidLoad()

        let frameOfScrollView : CGRect = CGRect(x:0, y:0, width:screenWidth, height:screenHeight)
        scrollView.frame = frameOfScrollView

        scrollView.delegate = self
        scrollView.isPagingEnabled = true

//        tableView.delegate = self
//        tableView.dataSource = self

        self.view.addSubview(scrollView)
//        self.tableView.register(UITableViewCell.self, forCellReuseIdentifier: cellReuseIdentifier)
        self.scrollView.contentSize = CGSize(width:self.scrollView.frame.size.width * 4,height: self.scrollView.frame.size.height)

        for index in 0..<4 {

            frame.origin.x = self.scrollView.frame.size.width * CGFloat(index)
            frame.size = self.scrollView.frame.size

            let tableView = UITableView()
            tableView.delegate = self
            tableView.dataSource = self
            tableView.register(UITableViewCell.self, forCellReuseIdentifier: cellReuseIdentifier)
            tableView.frame = frame
            self.scrollView .addSubview(tableView)

////            // THIS THING DOESN'T WORK
//            tableView.frame = frame
//            self.scrollView .addSubview(tableView)

            // THIS THING WORKS
//            let subView = UILabel(frame: frame)
//            subView.backgroundColor = colors[index]
//            subView.text = "how are you?"
//            self.scrollView.addSubview(subView)
        }
    }

Replace

let cell:UITableViewCell = self.tableView.dequeueReusableCell(withIdentifier: cellReuseIdentifier) as UITableViewCell!

with

let cell:UITableViewCell = tableView.dequeueReusableCell(withIdentifier: cellReuseIdentifier) as UITableViewCell! 

Remove

let tableView = UITableView()