Hi, today’s article will guide you to create an expandable 1UITableviewcell, applicable in case of hiding / showing information. Based on the idea of UIStackview, we will be able to design it simply, without creating many constraints.
Step 1: Create tableView, interface design
We imagine as follows: Initially the cell only has 2 labels, Family name and Age, the right corner is the SeeAll button, when pressed, it will show the information in a cell.
Step 2: Create Logic
In the management file, create a tabble view with 1 cell as designed, here is pull the outlet
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | class ViewController: UIViewController { @IBOutlet weak var tableView: UITableView! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. tableView.dataSource = self tableView.estimatedRowHeight = 100 tableView.rowHeight = UITableView.automaticDimension } @IBAction func seeAllButtonTapped(_ sender: Any) { } } extension ViewController: UITableViewDataSource { func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { 1 } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) return cell } } |
Step 3: Create a Custion Cell file
And assign to the cell that created the UI before
At this point, we build the app to see if the view has been created successfully
Step 4: Create the hidden logic
In the custion cell file, we pull out let when we press the see all button and process it
1 2 3 4 5 6 7 8 9 10 11 12 13 | @IBAction func seeAllTapped(_ sender: Any) { locationLabel.isHidden = !locationLabel.isHidden jobLabel.isHidden = !jobLabel.isHidden if jobLabel.isHidden { seeAllButton.setTitle("See All", for: .normal) } else { seeAllButton.setTitle("Hide", for: .normal) } if let expand = expand { expand() } } |
Note: Closure expand is used to make call back, update cell when click see all / hide
Step 5: Update TableView (height)
On the main screen, we need to handle reloading tableview every time we update state
1 2 3 4 5 6 7 8 | func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! EmployTableViewCell cell.expand = { tableView.reloadData() } return cell } |
Above is an idea to implement dynamic UItableview cell, hope you will apply it successfully in your project. Thanks for reading the article