Create multilevel UITableview (like categoris list) in swift 5

Today, We will implement multilevel UITableview (like display categories list) in swift 5 without any third party. The items can be expanded and collapsed by tapping them. We create a basic design you can implement according to your requirement.

In this section, we implement tableview inside a UItableViewcell and the cell will be n level depth. Click here for more details about UITableview. And also we will manage the height of tableviewcell

Here we have used a JSON file for the data source and a specific structure so that we can easily manage it.

Getting Started

Swift version: 5
iOS version: 13
Xcode: 11.3

Step 1: Create a project from Xcode.

File ▸ New ▸ Project…. Choose the iOS ▸ Application ▸ Single View App template and create a new project.

Step 2: Add a UITableview inside the view controller and create Outlet. Here I will use a custom tableview class that helps to manage the height of the cell.

class AutoHeightTableView: UITableView {
    override var intrinsicContentSize: CGSize {
        self.layoutIfNeeded()
       return self.contentSize

    }
    override var contentSize: CGSize {
        didSet{
            self.invalidateIntrinsicContentSize()
        }
    }
}

class AutoHeightTableView: UITableView {

override var intrinsicContentSize: CGSize {

self.layoutIfNeeded()

return self.contentSize

}

override var contentSize: CGSize {

didSet{

self.invalidateIntrinsicContentSize()

}

Step 3: Create a UItableViewCell for the tableView.

Step 4: Now parse the data which we will use in tableview. We have used some specific format of json shown in below.

{
          "id_category" : "3",
          "name" : "Clothes",
          "children" : {
            "category" : [
              {
                "id_category" : "4",
                "is_selected" : "0",
                "name" : "Men"
              },
              {
                "id_category" : "5",
                "is_selected" : "0",
                "name" : "Women"
              }
            ]
          },
          "is_selected" : "0"
        }

{

"id_category" : "3",

"name" : "Clothes",

"children" : {

"category" : [

{

"id_category" : "4",

"is_selected" : "0",

"name" : "Men"

{

"id_category" : "5",

"is_selected" : "0",

"name" : "Women"

}

]

"is_selected" : "0"

}

Create a class to parse the data.

class categoryList{
    var isSelected  = false
    var idCategory = ""
    var name = ""
    var isExpend = false
    var children = [categoryList]()
    init(data:JSON) {
        isSelected = data["is_selected"].boolValue
        idCategory = data["id_category"].stringValue
        name = data["name"].stringValue
        children = data["children"]["category"].arrayValue.map({categoryList(data: $0)})
    }
    
}

class categoryList{

var isSelected = false

var idCategory = ""

var name = ""

var isExpend = false

var children = [categoryList]()

init(data:JSON) {

isSelected = data["is_selected"].boolValue

idCategory = data["id_category"].stringValue

name = data["name"].stringValue

children = data["children"]["category"].arrayValue.map({categoryList(data: $0)})

}

Now add the Delegate and Datasource of the tableview.

var list = [categoryList]()
    
    var viewmodel: CategoryTableViewModel!
    
    override func viewDidLoad() {
    super.viewDidLoad()
        
        tableView.register(CategoryTableViewCell.nib, forCellReuseIdentifier: CategoryTableViewCell.identifier)

    guard let list = Bundle.main.url(forResource: "data", withExtension: "json"),
      let data = try? Data(contentsOf: list),
      let json = try? JSON(data: data)
      else { return }
        if let arr = json["category"].array{
            list = arr.map({categoryList(data: $0)})
        }else{
            list = [categoryList(data: json["category"])]
        }
        viewmodel = CategoryTableViewModel(list: list, level: 1)
        DispatchQueue.main.async {
            self.tableView.delegate = self.viewmodel
            self.tableView.dataSource = self.viewmodel
            self.tableView.reloadData()
            self.tableView.layoutIfNeeded()
        }
  }

var list = [categoryList]()

var viewmodel: CategoryTableViewModel!

override func viewDidLoad() {

super.viewDidLoad()

tableView.register(CategoryTableViewCell.nib, forCellReuseIdentifier: CategoryTableViewCell.identifier)

guard let list = Bundle.main.url(forResource: "data", withExtension: "json"),

let data = try? Data(contentsOf: list),

let json = try? JSON(data: data)

else { return }

if let arr = json["category"].array{

list = arr.map({categoryList(data: $0)})

}else{

list = [categoryList(data: json["category"])]

}

viewmodel = CategoryTableViewModel(list: list, level: 1)

DispatchQueue.main.async {

self.tableView.delegate = self.viewmodel

self.tableView.dataSource = self.viewmodel

self.tableView.reloadData()

self.tableView.layoutIfNeeded()

}

Step 5: Now create a model class which handles tableview delegate and datasource. We will use a common class for both tableview.

class CategoryTableViewModel: NSObject,UITableViewDataSource,UITableViewDelegate {
    
    var list = [categoryList]()
    var obj : CategoryTableViewModel!
    var level = 0
    init(list :[categoryList],level:Int) {
        self.list = list
        self.level = level
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return list.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if let cell = tableView.dequeueReusableCell(withIdentifier: CategoryTableViewCell.identifier) as? CategoryTableViewCell{
            cell.titleLabel.text = list[indexPath.row].name
            cell.tableView.delegate = nil
            cell.tableView.dataSource = nil
            cell.expendBtn.setImage(nil, for: .normal)
            cell.leadingTableView.constant = CGFloat(level * 12)
            if list[indexPath.row].children.count>0{
                if list[indexPath.row].isExpend{
                    obj = CategoryTableViewModel(list: list[indexPath.row].children, level: level+1)
                    cell.tableView.delegate = obj
                    cell.tableView.dataSource = obj
                    cell.expendBtn.setImage(UIImage(named: "openArrow"), for: .normal)
                    cell.separator(hide: true) // Shows separator
                    
                }else{
                    cell.tableView.delegate = nil
                    cell.tableView.dataSource = nil
                    cell.expendBtn.setImage(UIImage(named: "closeArrow"), for: .normal)
                    cell.separator(hide: false)
                }
            }else{
                cell.tableView.delegate = nil
                cell.tableView.dataSource = nil
            }
            cell.tableView.reloadData()
            cell.callCack = {
                self.list[indexPath.row].isExpend = !(self.list[indexPath.row].isExpend)
                self.getParentTableView(tableView: tableView).reloadData()
            }
            cell.layoutIfNeeded()
            return cell
        }
        return UITableViewCell()
    }
    
    func getParentTableView(tableView:UITableView)->UITableView{
        if let _tableView = tableView.superview?.superview?.superview as? UITableView{
            return getParentTableView(tableView: _tableView)
        }
        else{
            return tableView
        }
    }
}

class CategoryTableViewModel: NSObject,UITableViewDataSource,UITableViewDelegate {

var list = [categoryList]()

var obj : CategoryTableViewModel!

var level = 0

init(list :[categoryList],level:Int) {

self.list = list

self.level = level

}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

return list.count

}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

if let cell = tableView.dequeueReusableCell(withIdentifier: CategoryTableViewCell.identifier) as? CategoryTableViewCell{

cell.titleLabel.text = list[indexPath.row].name

cell.tableView.delegate = nil

cell.tableView.dataSource = nil

cell.expendBtn.setImage(nil, for: .normal)

cell.leadingTableView.constant = CGFloat(level * 12)

if list[indexPath.row].children.count>0{

if list[indexPath.row].isExpend{

obj = CategoryTableViewModel(list: list[indexPath.row].children, level: level+1)

cell.tableView.delegate = obj

cell.tableView.dataSource = obj

cell.expendBtn.setImage(UIImage(named: "openArrow"), for: .normal)

cell.separator(hide: true) // Shows separator

}else{

cell.tableView.delegate = nil

cell.tableView.dataSource = nil

cell.expendBtn.setImage(UIImage(named: "closeArrow"), for: .normal)

cell.separator(hide: false)

}

}else{

cell.tableView.delegate = nil

cell.tableView.dataSource = nil

}

cell.tableView.reloadData()

cell.callCack = {

self.list[indexPath.row].isExpend = !(self.list[indexPath.row].isExpend)

self.getParentTableView(tableView: tableView).reloadData()

}

cell.layoutIfNeeded()

return cell

}

return UITableViewCell()

}

func getParentTableView(tableView:UITableView)->UITableView{

if let _tableView = tableView.superview?.superview?.superview as? UITableView{

return getParentTableView(tableView: _tableView)

}

else{

return tableView

}

And the same model will use in UITableView. UITableViewCell code attached below.

class CategoryTableViewCell: UITableViewCell {
    @IBOutlet weak var expendBtn : UIButton!
    @IBOutlet weak var titleLabel : UILabel!
    @IBOutlet weak var leadingTableView : NSLayoutConstraint!
    @IBOutlet weak var tableView : AutoHeightTableView!

    var callCack:(()->Void)?
    override func awakeFromNib() {
        super.awakeFromNib()
        tableView.isScrollEnabled = false
         tableView.register(CategoryTableViewCell.nib, forCellReuseIdentifier: CategoryTableViewCell.identifier)
    }

    static var identifier : String{
        return String(describing: self)
    }
    
    static var nib : UINib{
        return UINib(nibName: identifier, bundle: nil)
    }
    @IBAction func ependBtnPress(_ sender : UIButton){
        callCack?()
    }
    
}

class CategoryTableViewCell: UITableViewCell {

@IBOutlet weak var expendBtn : UIButton!

@IBOutlet weak var titleLabel : UILabel!

@IBOutlet weak var leadingTableView : NSLayoutConstraint!

@IBOutlet weak var tableView : AutoHeightTableView!

var callCack:(()->Void)?

override func awakeFromNib() {

super.awakeFromNib()

tableView.isScrollEnabled = false

tableView.register(CategoryTableViewCell.nib, forCellReuseIdentifier: CategoryTableViewCell.identifier)

}

static var identifier : String{

return String(describing: self)

}

static var nib : UINib{

return UINib(nibName: identifier, bundle: nil)

}

@IBAction func ependBtnPress(_ sender : UIButton){

callCack?()

}

Step 6: Now run the app in the simulator or a real device.

I hope this code will help you better to understand multilevel UITableview. If you feel any doubt or query please comment below.

Thank you.

Debabrata Roy 29 August 2020

. . .

Discuss on Helpdesk

8 comments

Farras Apr 26, 2021 at 8:02 am

Hi, I can’t find any JSON class, there is only JSONEncoder and JSONDecoder. Do you create ‘JSON’ class yourself?

Debabrata Roy (Moderator) Apr 26, 2021 at 11:16 am
I have used SwiftyJSON to parse data.
https://github.com/SwiftyJSON/SwiftyJSON

Reply

beefTeriyaqie Nov 8, 2021 at 2:04 pm

hi, when I try cell.tableView it says has no member tableView, do you happen to know why ?

Debabrata Roy (Moderator) Nov 29, 2021 at 8:02 pm
I think you are accessing wrong class

Reply

Lau Nov 8, 2021 at 2:05 pm

hi, when I try cell.tableView it says has no member tableView, do you happen to know why ?

Debabrata Roy (Moderator) Nov 29, 2021 at 8:02 pm
I think you are accessing wrong class

Reply

Anwesh Dec 7, 2021 at 11:19 pm

Hi Can you share the project guthub link?

Debabrata Roy (Moderator) Dec 31, 2021 at 5:24 pm
Sorry, we do not upload code on GitHub.

Reply

Create multilevel UITableview in swift without third party.

Getting Started

Leave a Comment Cancel Reply

8 comments

Create multilevel UITableview in swift without third party.

Getting Started

Leave a Comment Cancel Reply

8 comments

Message Sent!