How To Create An Expandable Table View In Swift Without Using Third Parties?

Creating an example project

Open and Run Xcode and create a new project with File » New » Project ⌘⇧N. Select iOS » Application » Single View Application:

• Here, there will be two methods to load JSON Data one way will be through the .json file which will be stored in out project folder and other way is to parse JSON from URL.
• Now, create one global variable for JSON data type it’s “file” or “url”. For that put below line in ViewDidLoad() and will create a variable of NSMutableArray() type to store JSON Data:

Organize UITableview Data

I decided to use two separate arrays to hold the section titles and section data, which are named sectionNames and sectionItems respectively.

There needs to be a reference to the section header that is currently expanded and position of this header, which are expandedSectionHeader and expandedSectionHeaderNumber respectively.

Normally, the number of position would be sufficient, but I also decided to be fancy and make the dropdown chevron rotate when sections are expanded and collapsed.

So, for this you need to have a reference to the section header object to lookup the reference to the chevron image for the expanded section and un-rotate it as the section is collapsed.

var expandedSectionHeaderNumber: Int = -1

var expandedSectionHeader: UITableViewHeaderFooterView!

var sectionItems: Array = []

var sectionNames: Array = []

Add Data In The View Did Load Method

Define The Number Of Sections

It must be displayed in the initial UITableView when the view loads.

Determine The Number Of Rows

It should be displayed in each section.

Set The Title Text For The Active Section In The Title For Header In Section Method

Setup The Active Header View In The Will Display Header View Method

Displaying The Cell Contents

When a specific section is expanded is relatively simple and is accomplished using the following code:

To Ensure That The Highlighting For The Selected Row Removed, Implement This Functionality In The DidDeselectRowAtindexPathmethod.

The starting point is SectionHeaderWasTouched method. It is in above step that this method is linked to the UITapGestureRecognizer defined and also assigned to each section header.

This method does a very well job, determining which sections are to be expanded and/or collapsed. When the user touches a particular section header, the gesture recognizer triggers this method and the following occurs.

The UITableView Header is separated along with the tags for the headerView and the chevron imageView.

If none of the sections are currently expanded, then the task is straight forward, the expandedSectionHeaderNumber is set to the selected section number and the tableViewExpandSection method is called to perform the expansion.

If a section is expanded then the next thing is to determine if the expanded section is the section that was touched.

If it is then this section is collapsed and the expandedSectionHeaderNumber is reset to -1.

If the section is not the expanded so, then the expanded section is collapsed and finally the new section can be expanded.

The collapse method is detailed within this section. It resets the ExpandedSectionHeaderNumber back to -1, indicating that no section is expanded. The rotation animation is set and the rows are deleted from the UITableView.

The expand section method first verifies that there is data to be displayed. If not, it resets the expandedSectionHeaderNumbersince there is no data to display and the section is not expanded. Otherwise, the animation is set and the required number of rows of data are inserted to the UITableView.

Final Output

Conclusion:

Created a tutorial for you on expandable table views. It is very helpful as it will save you from the trouble of creating new view controllers for app parts that could be handled in these kinds of table views.

It is just an example. You can improve the code according to your requirements. And if you still have doubts at any point in this tutorial, you can contact us. We will guide you on this.