Post
Ask Question

iPhone App Development: Dynamic Cell In Table View - Day Two

Before reading this article, please go through the following article

Introduction

This is the second article on table view. In this article, we will see that if we have two arrays with different names and categories how we can set separate in the table view and how we categorize it.

Declare Two Different Arrays
  • Now, we create two constant arrays where one array is devcourses and webcourses, but if you see with open eyes, you see that in one array value, we assign two strings- one is course name and another is course author name because for course author name, we will use a subtitle.
    1. let devCourses = [  
    2. ("iOS App Dev with Swift Essential Training","Khawar Islam"),  
    3. ("iOS 8 SDK New Features","Khawar Islam"),  
    4. ("Data Visualization with D3.js","Khawar Islam"),  
    5. ("Swift Essential Training","Khawar Islam"),  
    6. ("Up and Running with AngularJS","Khawar Islam"),  
    7. ("MySQL Essential Training","Khawar Islam"),  
    8. ("Building Adaptive Android Apps with Fragments","Khawar Islam"),  
    9. ("Advanced Unity 3D Game Programming","Khawar Islam"),  
    10. ("Up and Running with Ubuntu Desktop Linux","Khawar Islam"),  
    11. ("Up and Running with C","Khawar Islam") ]  
    12.   
    13. let webCourses = [  
    14. ("HTML Essential Training","Khawar Islam"),  
    15. ("Building a Responsive Single-Page Design","Khawar Islam"),  
    16. ("Muse Essential Training","Khawar Islam"),  
    17. ("WordPress Essential Training","Khawar Islam"),  
    18. ("Installing and Running Joomla! 3: Local and Web-Hosted Sites","Khawar Islam"),  
    19. ("Managing Records in SharePoint","Khawar Islam"),  
    20. ("Design the Web: SVG Rollovers with CSS","Khawar Islam"),  
    21. ("Up and Running with Ember.js","Khawar Islam"),  
    22. ("HTML5 Game Development with Phaser","Khawar Islam"),  
    23. ("Responsive Media","Khawar Islam") ]  

Change the Style into Grouped style

  • Go to the storyboard. Click the table view and change the style plain to style grouped.

    storyboard

  • We declared two different arrays. Now, we set return value 2, because we see at two sections or categories in the table view.
    1. func numberOfSectionsInTableView(tableView: UITableView) - > Int  
    2. {  
    3.     return 2  
    4. }  
  • Now, we implement each section in this method, so we make two sections- one is devcourse and other is webcourse.
    1. func tableView(tableView: UITableView, numberOfRowsInSection section: Int) - > Int   
    2. {  
    3.         if section == 0   
    4.         {  
    5.             return devCourses.count  
    6.         }  
    7.         else   
    8.         {  
    9.             return webCourses.count  
    10.         }  
    11. }  
  • Now, we add the course title and the course author name in the table view to see the result and move to the next.
    1. func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) - > UITableViewCell  
    2. {  
    3.     let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as UITableViewCell  
    4.     if indexPath.section == 0   
    5.     {  
    6.         let (courseTitle, _) = devCourses[indexPath.row]  
    7.         cell.textLabel ? .text = courseTitle  
    8.   
    9.     }  
    10.     else  
    11.     {  
    12.         let (courseTitle, _) = webCourses[indexPath.row]  
    13.         cell.textLabel ? .text = courseTitle  
    14.     }  
    15.   
    16.     return cell  
    17. }  

Give Header Name to Each Category

  • Now, we make use of one method more, in which we put the heading names.
    1. func tableView(tableView: UITableView, titleForHeaderInSection section: Int) - > String ?  
    2. {  
    3.         if section == 0   
    4.         {  
    5.             return "Developer Courses"  
    6.         } else  
    7.         {  
    8.             return "Web Courses"  
    9.         }  
    10. }  
  • When you run the app, the result is shown, in which you see that the two sections are divided differently- webcourses and devcourses.

    result


Similar Articles