Search code examples
iosswiftxcodeuisegmentedcontrol

Use SegmentController to Make TableView Disappear and UIContainerView Appear


I'm trying to use a segment controller to switch between my tableView and a container view, but when I try to switch between them it only half works. The TableView appears and disappears, but the container view never appears.

Here is my code:

@IBAction func switchAction(_ sender: UISegmentedControl) {
    if sender.selectedSegmentIndex == 0 {
        profileTableView.isHidden = false
        modelsContainerView.isHidden = true
    } else {
        profileTableView.isHidden = true
        modelsContainerView.isHidden = false
    }
}

UPDATE

If i use this code the simulation sort of works. The container view appears but it doesn't fill the screen like the tableview did.

    @IBAction func switchAction(_ sender: UISegmentedControl) {
    if sender.selectedSegmentIndex == 0 {
        UIView.animate(withDuration: 0.5, animations: {
            self.profileTableView.alpha = 1
            self.modelsContainerView.alpha = 0
        })
    } else {
        UIView.animate(withDuration: 0.5, animations: {
            self.profileTableView.alpha = 0
            self.modelsContainerView.alpha = 1
        })
    }
}

Updated picture

I can tell it's not working because I've set the container view's background color to pink. And this is what it looks like when I try to switch from TableView(which works) to container View: Segment With TableView

Segment Where Container View Should Appear (not working)

Storyboard

All of the outlets appear to be connected. And my UI set up is a green view behind the segment controller, with a tableView below and a containerView that in the same place.

Thank you very much for your help in advanced.


Solution

  • Try this approach...

    enter image description here

    Seg Background view is 45-pts height, and pinned top, leading, trailing all equal to 0.

    Profile Container is pinned leading, trailing, bottom all equal to 0, and the top is pinned to the bottom of Seg Background.

    But you can't see Profile Container (red background), because Models Container (orange background) is on top of it, and...

    Models Container is equal width and height, and centered Horizontally and Vertically, all to Profile Container.

    Profile Container has Profile Table VC embedded in it.

    Models Container has Models VC embedded in it.

    The idea is:

    When Seg 0 is selected, Profile Container is alpha 1 and not hidden, while Models Container is alpha 0 and is hidden.

    When Seg 1 is selected, Profile Container is alpha 0 and is hidden, while Models Container is alpha 1 and not hidden.

    class SegContainerViewController: UIViewController {
    
        @IBOutlet weak var profileContainerView: UIView!
        @IBOutlet weak var modelsContainerView: UIView!
    
        override func viewDidLoad() {
            super.viewDidLoad()
    
            // start with Profile visible
            // so hide Models and set its alphs to 0
            self.modelsContainerView.alpha = 0
            self.modelsContainerView.isHidden = true
    
        }
    
        @IBAction func switchAction(_ sender: UISegmentedControl) {
    
            // on segment select, the "other" container will be
            // transparent and hidden, so
            // un-hide it, then animate the alpha for both (for cross-fade)
            // on animation completion, hide the now transparent container
    
            if sender.selectedSegmentIndex == 0 {
    
                self.profileContainerView.isHidden = false
                UIView.animate(withDuration: 0.5, animations: {
    
                    self.profileContainerView.alpha = 1
                    self.modelsContainerView.alpha = 0
    
                }, completion: { (finished: Bool) in
    
                    self.modelsContainerView.isHidden = true
    
                })
    
            } else {
    
                self.modelsContainerView.isHidden = false
                UIView.animate(withDuration: 0.5, animations: {
    
                    self.profileContainerView.alpha = 0
                    self.modelsContainerView.alpha = 1
    
                }, completion: { (finished: Bool) in
    
                    self.profileContainerView.isHidden = true
    
                })
    
            }
    
        }
    }
    

    Edit:

    To access the Embedded View Controllers, override prepareForSegue:

    var theProfileVC: ProfileTableViewController?
    var theModelsVC: ModelsViewControler?
    
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    
        if let vc = segue.destination as? ProfileTableViewController {
    
            // do something here if desired, like setting a property of the VC
    
            // save a reference so we can use it later
            theProfileVC = vc
        }
    
        if let vc = segue.destination as? ModelsViewControler {
    
            // do something here if desired, like setting a property of the VC
    
            // save a reference so we can use it later
            theModelsVC = vc
    
        }
    
    }
    

    I've also updated the GitHub repo with an example of this.


    I put this up as a sample project, if you'd like to dig into it: https://github.com/DonMag/SegmentsAndContainers