Swift - Segmented control - Switch multiple views

Until now I still can't figure how to switch multiple views in one view controller. My storyboard is like this one.

Right now I want to embed two views inside my view controller.

My code for segmented control to switch two views in one view controller so far.

import UIKit

class PopularHistoryViewController: UIViewController {

    @IBOutlet weak var segmentedControl: UISegmentedControl!

    @IBAction func indexChanged(sender: UISegmentedControl) {
        switch segmentedControl.selectedSegmentIndex
        {
        case 0:
            NSLog("Popular selected")
            //show popular view
        case 1:
            NSLog("History selected")
            //show history view
        default:
            break; 
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }


}

Another thing, If I put two views inside my controller, what is best practice to differentiate it?

Solution 1:

If you want to do UI layout in Xcode for the two overlapping subviews, a better solution is to use two UIContainerViewController, and use the same way of setting the hidden property as suggested in the above answer.

Solution 2:

You can use the isHidden property of the UIView to show/hide your required views. First you have to link both views to IBOutlets through the Interface builder

@IBOutlet weak var historyView: UIView!
@IBOutlet weak var popularView: UIView!

@IBAction func indexChanged(_ sender: UISegmentedControl) {
    switch segmentedControl.selectedSegmentIndex {
    case 0:
        historyView.isHidden = true
        popularView.isHidden = false
    case 1:
        historyView.isHidden = false
        popularView.isHidden = true
    default:
        break;
    }
}

Note: it was named hidden in Swift 1 and 2.

Solution 3:

First of all create two outlets and connect hose to the views in your ViewController.

@IBOutlet weak var firstView: UIView!
@IBOutlet weak var secondView: UIView!

And Change the code like:

@IBAction func indexChanged(sender: UISegmentedControl)
{
    switch segmentedControl.selectedSegmentIndex
    {
    case 0:
        firstView.hidden = false
        secondView.hidden = true
    case 1:
        firstView.hidden = true
        secondView.hidden = false
    default:
        break; 
    }
}

If you don't want to create Outlets, assign the views individual tags (Say 101 and 102) and you can do it like:

@IBAction func indexChanged(sender: UISegmentedControl)
{
    switch segmentedControl.selectedSegmentIndex
    {
    case 0:
        self.view.viewWithTag(101)?.hidden = false
        self.view.viewWithTag(102)?.hidden = true
    case 1:
        self.view.viewWithTag(101)?.hidden = true
        self.view.viewWithTag(102)?.hidden = false
    default:
        break; 
    }
}

Solution 4:

Add both views to the view controller in the story board and set one of them to be hidden = yes or alpha = 0. When your index changed function gets called set the current view on screen to hidden = yes/alpha of 0 and set the previously hidden view to hidden = no/alpha = 1. This should achieve what you want.