Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding sections, separated by dates, to UITableView in Swift

I'm a complete rookie at Swift and iOS programming so you'll have to forgive the perhaps simple question.

I've created a tableView which displays the contents of an array (strings) at the press of a button. Now, I'd like to "group" these strings in tableView sections, sorted by date.

In more detail: When the user taps the button, the string should be inserted at index 0 of the array and be displayed in a section with a header of todays date. If there's values older than today's date in the array, these should be displayed in a separate section for that date. Each section should correspond to a 24 hour day and display all the strings added during that day.

Here's some sample code of what I've achieved so far:

var testArray[String]()
var sectionsInTable[String]()

@IBOutlet weak var testTable: UITableView!

@IBAction func saveButton(sender: AnyObject) {

testArray.insert("\(strTest)", atIndex: 0)
testTable.reloaddata()

}

func numberOfSectionsInTableView(tableView: UITableView) -> Int {

    return sectionsInTable.count

}

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

    return testArray.count

}

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

    var cell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "Cell")

    cell.textLabel.text = String(testArray[indexPath.row])        

    return cell
}

I really don't know how to manage the sections part. Hopefully someone can point me in the right direction. Thanks!

like image 970
maxpetter Avatar asked Oct 27 '14 20:10

maxpetter


People also ask

How do I populate UITableView?

There are two main base ways to populate a tableview. The more popular is through Interface Building, using a prototype cell UI object. The other is strictly through code when you don't need a prototype cell from Interface Builder.

What is Section in UITableView?

UITableView with sections allows us to separate the list into different categories, so the list looks more organized and readable. We can customize sections as per our need, but in this tutorial, we are covering the basic UITableview with sections. Here's is the video if you prefer video over text. Let Create An App.

What is Indexpath section in Swift?

Swift version: 5.6. Index paths describe an item's position inside a table view or collection view, storing both its section and its position inside that section.


2 Answers

I was in need for something similar, and while Ron Fessler's solution works, when there's a lot of sections/rows, it took a very long time for table to load data, and even after that it wasn't much responsive. Main issue there I think is getSectionItems function as it will always go through all of items...

My solution:

struct TableItem {
    let title: String
    let creationDate: NSDate
}

var sections = Dictionary<String, Array<TableItem>>()
var sortedSections = [String]()

@IBAction func saveButton(sender: AnyObject) {

    let date:String = "your date in string..."

    //if we don't have section for particular date, create new one, otherwise we'll just add item to existing section
    if self.sections.indexForKey(date) == nil {
        self.sections[date] = [TableItem(title: name, creationDate: date)]
    }
    else {
        self.sections[date]!.append(TableItem(title: name, creationDate: date))
    } 

    //we are storing our sections in dictionary, so we need to sort it 
    self.sortedSections = self.sections.keys.array.sorted(>)
    self.tableView.reloadData()
}

tableView dataSource methods:

override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    return sections.count
}

override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return sections[sortedSections[section]]!.count
}

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

    var cell = tableView.dequeueReusableCellWithIdentifier("Cell")        

    let tableSection = sections[sortedSections[indexPath.section]]
    let tableItem = tableSection![indexPath.row]

    cell.titleLabel?.text = tableItem.title

    return cell
}

override func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    return sortedSections[section]
}
like image 166
Adam Bardon Avatar answered Oct 20 '22 01:10

Adam Bardon


I would usually do this with Core Data and NSFetchedResultsController since it has built-in methods for getting sections.

However, I'll answer the question without using Core Data. The code is a little messier but here we go...

First, you have to create an object that will store both the date and the text. The testArray will be an array of these objects, instead of a String array. For example:

class DateTextItem: NSObject {
    var text: String = ""
    var insertDate: NSDate = NSDate()    
}

var testArray = [DateTextItem]()

Then when the saveButton is hit, we'll create and add the DateTextItem object. We'll also add the date to the sectionsInTable if it doesn't already exist.

@IBAction func saveButton(sender: AnyObject) {
    let newItem = DateTextItem()
    newItem.text = "Test \(testArray.count)"

    // this is for development only
    // increment the date after 2 records so we can test grouping by date
    if testArray.count >= (testArray.count/2) {
        let incrementDate = NSTimeInterval(86400*(testArray.count/2))
        newItem.insertDate = NSDate(timeIntervalSinceNow:incrementDate)
    }

    testArray.append(newItem)

    // this next bit will create a date string and check if it's in the sectionInTable
    let df = NSDateFormatter()
    df.dateFormat = "MM/dd/yyyy"
    let dateString = df.stringFromDate(newItem.insertDate)

    // create sections NSSet so we can use 'containsObject'
    let sections: NSSet = NSSet(array: sectionsInTable)

    // if sectionsInTable doesn't contain the dateString, then add it
    if !sections.containsObject(dateString) {
        sectionsInTable.append(dateString)
    }

    self.tableView.reloadData()
}

Next, I created a function to get the items in a section since we need it in a couple places.

func getSectionItems(section: Int) -> [DateTextItem] {
    var sectionItems = [DateTextItem]()

    // loop through the testArray to get the items for this sections's date
    for item in testArray {
        let dateTextItem = item as DateTextItem
        let df = NSDateFormatter()
        df.dateFormat = "MM/dd/yyyy"
        let dateString = df.stringFromDate(dateTextItem.insertDate)

        // if the item's date equals the section's date then add it
        if dateString == sectionsInTable[section] as NSString {
            sectionItems.append(dateTextItem)
        }
    }

    return sectionItems
}

Finally, here is what the Table View Data Source methods look like

// MARK: - Table view data source
override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    return sectionsInTable.count
}

override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return self.getSectionItems(section).count
}

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

    // Configure the cell...
    var cell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "Cell")

    // get the items in this section
    let sectionItems = self.getSectionItems(indexPath.section)
    // get the item for the row in this section
    let dateTextItem = sectionItems[indexPath.row]

    cell.textLabel.text = dateTextItem.text

    return cell
}

// print the date as the section header title
override func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    return sectionsInTable[section]
}
like image 32
Ron Fessler Avatar answered Oct 20 '22 00:10

Ron Fessler