How to show and hide static cells with uiswitch

 

This tutorial has been updated for X code 7.3 & swift 2.2

When user enables any feature then you want to show more options for it. If you always show all the options for every feature then its overwhelming for user at first glance & it also increases clutter. With this example I am using uiswitch to show and hide static cells But you could use button or any other appropriate UI.

  1. First lets set up the x code project as usual. Create new single view application X code project. Set project name to hide static cells & save it on desktop.

new x code project

 

2. Go to main storyboard & select view controller & delete it. Add tableview controller in main storyboard.

add table view controller

 

3. Set size to iPhone 4 inch & set it as initial view controller

set size & make initial view controller

 

4. Select Table View & set content to Static cells & section to 1

set static cells

 

5. Now delete view controller swift file & add new cocoa touch class file of class UITableViewController

table view controller swift file

 

 

6. Go to main storyboard; select table view controller & set its class to TableViewController

set custom class

 

7. Add Label & uiswitch to first row as follows

add label & switch

 

8. Select second row & set its style to right detail. And set title to Date & Time

set right detail for second row

 

9. Select third row & set its height to 165

set custom row height

 

10. Add datepicker in third row

add datepicker

 

11. Select third row & check the box with clip subviews

clip subviews

 

12. Go to TableViewController swift file & comment out number of sections & number of rows per section methods

    // MARK: - Table view data source
    /*
override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    // #warning Potentially incomplete method implementation.
    // Return the number of sections.
    return 0
    }
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    // #warning Incomplete method implementation.
    // Return the number of rows in the section.
    return 0
    }
    */

13. Connect switch as outlet to swift file

switch as outlet

 

14. Connect switch as action to swift file

switch as action to swift file

 

15. Add following code in switch action

@IBAction func toggleValueChanged(sender: UISwitch) {
    tableView.reloadData()
    }

16. Connect detail label as outlet to swift file

detail label to swift file

 

17. Connect date picker as action to swift file

datepicker to swift file

 

18. Add following code in date picker action

@IBAction func dateChanged(sender: UIDatePicker) {
    var dateFormatter = NSDateFormatter()
    dateFormatter.dateStyle = NSDateFormatterStyle.MediumStyle
    dateFormatter.timeStyle = NSDateFormatterStyle.MediumStyle
    date.text = dateFormatter.stringFromDate(sender.date)
}

19. Add a bool called pickerVisible & set its value to false

var pickerVisible = false

20. Add did select row at index path method to show & hide date picker

override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
    if indexPath.row == 1 {
        pickerVisible = !pickerVisible
        tableView.reloadData()
    }
    tableView.deselectRowAtIndexPath(indexPath, animated: true)
}

21. Add height for row at index path to hide & show the static cells

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    if indexPath.row == 1 && toggle.on == false {
        return 0.0
    }
    if indexPath.row == 2 {
        if toggle.on == false || pickerVisible == false {
            return 0.0
        }
        return 165.0
    }
    return 44.0
}

22. Add height for footer method to set height for footer

override func tableView(tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
    return 44.0
}

23. Add following code to view did load to remove unused rows & start table from below status bar

override func viewDidLoad() {
    super.viewDidLoad()

    tableView.contentInset = UIEdgeInsetsMake(20, 0, 0, 0)
    tableView.tableFooterView = UIView(frame: CGRectZero)

    // Uncomment the following line to preserve selection between presentations
    // self.clearsSelectionOnViewWillAppear = false
    // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
    // self.navigationItem.rightBarButtonItem = self.editButtonItem()
}

24. Now build and run app in iPhone 5s and turn off & on the switch to hide & show the static cells

hide cell with uiswitch
Download X code file
Challenge: Create two sections who can be expanded individually by uiswitch.

hide cell in multiple sections
Updated file for show hide static cell with UISwitch
Download Challenge Solution

Total 21 Votes
3

Tell us how can I improve this tutorial?

+ = Verify Human or Spambot ?