Adding tableview to scrollview with paging enabled. - ios

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()