Scrollview with embedded tableview

Wiingaard picture Wiingaard · Sep 10, 2015 · Viewed 7.4k times · Source

I'm building an iOS app in swift with Xcode 6. I'm trying to embed a view controller with a table view in a scrollview. When the user drags in the table view, it is suppose to move the table, not the the scrollview that it is embedded in. I've made this illustration, to clearify my view and view controller hierachy: View Hierachy

The red area is the content size area of the scrollview.

The green and blue areas are different view controllers, embedded in the scrollview.

The yellow area is a Text field in the blue view controller.

The orange area is a table view in the blue view controller.

I have enabled paging in the scrollview, so that it snaps to either the green or blue view controller. How can I pop the Table view to the top of the view hierachy, so that the only way to scroll the scrollview, will be to drag in the text field.

import UIKit

class RootViewController: UIViewController, UIScrollViewDelegate {

var scrollView: UIScrollView!

var greenViewController: GreenViewController!
var blueViewController: BlueViewController!

override func viewDidLoad() {
    super.viewDidLoad()

    scrollView = UIScrollView(frame: CGRectMake(0, 0, self.view.frame.width, self.view.frame.height))
    scrollView.delegate = self
    scrollView.pagingEnabled = true

    self.greenViewController = self.storyboard?.instantiateViewControllerWithIdentifier("Green View Controller") as! GreenViewController
    self.blueViewController = self.storyboard?.instantiateViewControllerWithIdentifier("Blue View Controller") as! BlueViewController

    greenViewController.view.frame = CGRectMake(0, 0, view.bounds.width, view.bounds.height)
    blueViewController = CGRectMake(0, view.bounds.height, view.bounds.width, view.bounds.height)


    scrollView.addSubview(greenViewController.view)
    scrollView.addSubview(blueViewController.view)

    scrollView.contentSize = CGSizeMake(view.bounds.width, view.bounds.height*2)

    self.view.addSubview(scrollView)

}

I hope that I have expressed myself clearly.

EDIT:

I've tried changing the size of the scrollview, when it scrolls. The idea was to change the height of the frame so it matches the height of the textfield when it is scrolled all the way down. But it seems that it also changes the visible part of whats embedded in the scrollview:

    func scrollViewDidScroll(scrollView: UIScrollView) {

    if self.scrollView.contentOffset.y > textField.View.bounds.height {
        self.scrollView.frame.size.height = view.bounds.height - scrollView.contentOffset.y - textField.View.bounds.height
        println(self.scrollView.frame)
    }
}

Answer

nikhil nangia picture nikhil nangia · Jul 31, 2016

Ok it might be bit late now but still i m posting this as a tutorial ! This is a less prefered way to achieve this. Better way would be,

Using table view controller as parent view and then using prototype cells as static cell(In 'n' numbers as per your requirement) as a card view or for any other use

The every different cell used would be considered as a section and no of prototype cells will be equal to no of sections in code as in snippet below

override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    return 3
}

override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    if section == 2 {
        return list.count
    }
    return 1
}

number of rows in case of section 0 and 1 would be 1 as static part Whereas No of rows in case of section 2 i.e dynamic part would be equal to count of list.

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    var cell : CustomTableViewCell.swift = CustomTableViewCell.swift()
    switch indexPath.section {

        case 0:
            cell = tableView.dequeueReusableCellWithIdentifier("staticCell1", forIndexPath: indexPath) as! CustomTableViewCell
            break
        
        case 1:
            cell = tableView.dequeueReusableCellWithIdentifier("staticCell2", forIndexPath: indexPath) as! CustomTableViewCell
            break
        
        case 2:
            cell  = tableView.dequeueReusableCellWithIdentifier("dynamicCell", forIndexPath: indexPath) as! CustomTableViewCell
            break
        
        default:
            break
    }
    return cell;

}

and thats it! Work is done! Party!

I got reference from here Mixing static and dynamic sections in a grouped table view?