Swift Swipe Navigation Table Views

Question

I'm trying to do a swipe navigation between different tableViewControllers in swift. I managed to do it with viewControllers with the following code :

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var scrollView: UIScrollView!

override func viewDidLoad() {
    super.viewDidLoad()

}

var scrollViewAdded = false

override func viewDidLayoutSubviews() {

    super.viewDidLayoutSubviews()

    if !scrollViewAdded {

        self.loadSrollView()

        self.scrollViewAdded = true
    }
}


func loadSrollView() {

    self.scrollView.pagingEnabled = true

    let vc0 = self.storyboard?.instantiateViewControllerWithIdentifier("ViewController0")

    self.addChildViewController(vc0!)
    self.scrollView.addSubview(vc0!.view)
    vc0!.didMoveToParentViewController(self)


    let vc1 = self.storyboard?.instantiateViewControllerWithIdentifier("ViewController1")

    var frame1 = vc1!.view.frame
    frame1.origin.x = self.view.frame.size.width
    vc1!.view.frame = frame1

    self.addChildViewController(vc1!)
    self.scrollView.addSubview(vc1!.view)
    vc1!.didMoveToParentViewController(self)


    let vc2 = self.storyboard?.instantiateViewControllerWithIdentifier("ViewController2")

    var frame2 = vc2!.view.frame
    frame2.origin.x = self.view.frame.size.width * 2
    vc2!.view.frame = frame2

    self.addChildViewController(vc2!)
    self.scrollView.addSubview(vc2!.view)
    vc2!.didMoveToParentViewController(self)


    let vc3 = self.storyboard?.instantiateViewControllerWithIdentifier("ViewController3")

    var frame3 = vc3!.view.frame
    frame3.origin.x = self.view.frame.size.width * 3
    vc3!.view.frame = frame3

    self.addChildViewController(vc3!)
    self.scrollView.addSubview(vc3!.view)
    vc3!.didMoveToParentViewController(self)


    self.scrollView.contentSize = CGSizeMake(self.view.frame.size.width * 4, self.view.frame.size.height - 66)
}

}

I thought that I could adapt it by replacing the viewcontrollers by tableviewcontrollers but it doesn't work. Anyone knows how to do it?

Answer 1

Following are the steps to use XLPagerTabStrip Library in your project :

Step 1: Drag a VC on Storyboard (Supposedly Intial VC) and drag a Container View on this VC(fully occupying the VC). Drag another empty VC (define its class as "myPagerStrip" which will be created in next step). Now Control drag from Container View and choose embed and define identifier of this Storyboard Embed segue as "showMyPagerStrip"

Step 2: Create a new Swift file named "myPagerStrip.swift" with following code :-

Note: Any doubt with below code, refer the github link already mentioned above, everything is explained there.

import XLPagerTabStrip

class myPagerStrip: ButtonBarPagerTabStripViewController {


    override func viewDidLoad() {


        settings.style.buttonBarBackgroundColor = UIColor.yellowColor()


        // selected bar view is created programmatically so it's important to set up the following 2 properties properly
        settings.style.selectedBarBackgroundColor = UIColor.blackColor()
        //settings.style.selectedBarHeight: CGFloat = 5

        // each buttonBar item is a UICollectionView cell of type ButtonBarViewCell
        settings.style.buttonBarItemBackgroundColor =  UIColor.redColor()
        settings.style.buttonBarItemFont = UIFont.systemFontOfSize(18)
        // helps to determine the cell width, it represent the space before and after the title label
       // settings.style.buttonBarItemLeftRightMargin: CGFloat = 8
        settings.style.buttonBarItemTitleColor =  UIColor.whiteColor()
        // in case the barView items do not fill the screen width this property stretch the cells to fill the screen
        settings.style.buttonBarItemsShouldFillAvailiableWidth = true

        changeCurrentIndexProgressive = { (oldCell: ButtonBarViewCell?, newCell: ButtonBarViewCell?, progressPercentage: CGFloat, changeCurrentIndex: Bool, animated: Bool) -> Void in
            guard changeCurrentIndex == true else { return }

            oldCell?.label.textColor = UIColor(white: 1, alpha: 0.6)
            newCell?.label.textColor = .whiteColor()

            if animated {
                UIView.animateWithDuration(0.1, animations: { () -> Void in
                    newCell?.transform = CGAffineTransformMakeScale(1.0, 1.0)
                    oldCell?.transform = CGAffineTransformMakeScale(0.8, 0.8)
                })
            }
            else {
                newCell?.transform = CGAffineTransformMakeScale(1.0, 1.0)
                oldCell?.transform = CGAffineTransformMakeScale(0.8, 0.8)
            }
        }

        super.viewDidLoad()
    }


    override func viewControllersForPagerTabStrip(pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {


        let child_1 = UIStoryboard(name: "Main", bundle: nil).instantiateViewControllerWithIdentifier("tableViewOne") // First Table View

        let child_2 = UIStoryboard(name: "Main", bundle: nil).instantiateViewControllerWithIdentifier("tableViewTwo") // Second Table View

        let child_3 = UIStoryboard(name: "Main", bundle: nil).instantiateViewControllerWithIdentifier("tableViewThree") // Third Table View

        let childVC = [child_1,child_2, child_3]

        return childVC

    }

    override func reloadPagerTabStripView() {
        super.reloadPagerTabStripView()
    }

}

Step 3: Drag 3 more VC on Storyboard and create 3 Cocoa Class files namely tableViewOne.swift, tableViewTwo.swift and tableViewThree.swift with Storyboard IDs as "tableViewOne","tableViewTwo", "tableViewThree".//(As mentioned in above code for child_1,child_2 and child_3)

Note: Assuming all 3 tableViews or required tableViews are setup with required data.

Step 4: Inherit "IndicatorInfoProvider" in each of the tableViews (perform after step 5) i.e.

class tableViewOne: UIViewController,IndicatorInfoProvider

Step 5: Import XLPagerTabStrip in each of this files and also add following function in each tableView:-

func indicatorInfoForPagerTabStrip(pagerTabStripController: PagerTabStripViewController) -> IndicatorInfo {
        return IndicatorInfo(title: "My Child title 1")
    }

Now, you are done. Simply Run the project in Simulator or Actual device.:)

In case having trouble with table Views, following is code for tableViewOne.swift for reference :-

import UIKit
import XLPagerTabStrip

class tableViewOne: UIViewController,IndicatorInfoProvider {

    @IBOutlet var tableView: UITableView!
        var dummyData = ["data 0","data 001","data try"]

    override func viewDidLoad() {
        super.viewDidLoad()

    }

    func indicatorInfoForPagerTabStrip(pagerTabStripController: PagerTabStripViewController) -> IndicatorInfo {
        return IndicatorInfo(title: "My Child title 1")
    }

}
extension tableViewOne: UITableViewDataSource, UITableViewDelegate {

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

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
    {
        let cell = tableView.dequeueReusableCellWithIdentifier("Cell")! as UITableViewCell

        cell.textLabel!.text = dummyData[indexPath.row]

        return cell;
    }

}