best approach for tableview with rows expand and collapse option - ios

Question

I have view which contains tableview and searchbar. When i begin searching it should search the tableview. Below is the sample data of tableview in attached image:
STUDENT 1, STUDENT 2 are different sections in the table
Suppose i search for "S" then result should be as shown below where matched rows should be visible and unmatched rows - should be hidden and a button "Show Remaining" should be visible. When i click on "Show Remaining" button it should show remaining rows of the same section :
how do i achieve this and if possible please provide the example for above scenario.

Answer 1

I had created the code for your requirement please find the below url for download the code and review it.
Link : https://www.dropbox.com/s/22ijwgxybn98wyj/ExpandCollapse.zip?dl=0
Environment : Xcode 8 and Objective-C
Highlight of the code which I had done it.
I had created NSObject of student based on your structure, create two(StudentListCell and ShowMoreCell) UITableViewCell for display the record of student and "Show Remaining button" record.
Also I have taken two(arrStudentInfo, arrSearchInfo) NSMutablebleArray for keeping the search records and original records.
After that I initilize the NSObject of student in ViewController.m. Please find the below code.
- (void)setupData {
self.arrStudentInfo = [[NSMutableArray alloc] init];
self.arrSearchInfo = [[NSMutableArray alloc] init];
StudentInfo *student_1 = [[StudentInfo alloc] init];
student_1.name = #"Sia S";
student_1.style = #"S";
student_1.trend = #"S";
student_1.age = #"60";
student_1.locale = #"Node";
student_1.street = #"BR";
student_1.city = #"JP";
student_1.country = #"US";
student_1.isOpen = YES;
student_1.isShowMore = NO;
[self.arrStudentInfo addObject:student_1];
StudentInfo *student_2 = [[StudentInfo alloc] init];
student_2.name = #"Nitin";
student_2.style = #"N";
student_2.trend = #"N";
student_2.age = #"40";
student_2.locale = #"Node";
student_2.street = #"BR";
student_2.city = #"SP";
student_2.country = #"US";
student_2.isOpen = YES;
student_2.isShowMore = NO;
[self.arrStudentInfo addObject:student_2];
}
I had created the method which return the currently active which means search record or original record of array.
- (NSMutableArray *)getCurrentArray {
if(self.isSearch)
return self.arrSearchInfo;
else
return self.arrStudentInfo;
}
Load the data based on scenario,
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
StudentInfo *studentInfo = [self getCurrentArray][indexPath.section];
if(indexPath.row == SHOW_MORE_INDEX && studentInfo.isShowMore == NO) {
static NSString *strCellIdentifier = #"ShowMoreCell";
ShowMoreCell *cell = [tableView dequeueReusableCellWithIdentifier:strCellIdentifier];
cell.btnShowMore.tag = indexPath.section;
[cell.btnShowMore addTarget:self action:#selector(clickONShowMore:) forControlEvents:UIControlEventTouchUpInside];
return cell;
}
else {
static NSString *strCellIdentifier = #"StudentListCell";
StudentListCell *cell = [tableView dequeueReusableCellWithIdentifier:strCellIdentifier];
[cell setupCell:studentInfo indexPath:indexPath];
return cell;
}
}
For searching the student name,
- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar {
[searchBar resignFirstResponder];
self.isSearch = YES;
NSPredicate *predicateStudent = [NSPredicate predicateWithFormat:[NSString stringWithFormat:#"self.name CONTAINS[cd] '%#'",searchBar.text]];
NSArray *arrGetSearch = [self.arrStudentInfo filteredArrayUsingPredicate:predicateStudent];
if(self.arrSearchInfo.count)
[self.arrSearchInfo removeAllObjects];
[self.arrSearchInfo addObjectsFromArray:arrGetSearch];
[self.tblView reloadData];
}
And again load the original record if user click on "X" button on UISearchbar.
- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText {
if([searchText isEqualToString:#""] || searchText==nil) {
[searchBar resignFirstResponder];
self.isSearch = NO;
[self.tblView reloadData];
}
}
Hope this will work for you.

Answer 2

There are many examples available for expand and collapse table.
You can refer below example
http://www.appcoda.com/expandable-table-view/
By setting up dynamically in plist file. you can maintain expandable and collapsable tableview.
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let currentCellDescriptor = getCellDescriptorForIndexPath(indexPath)
let cell = tableView.dequeueReusableCellWithIdentifier(currentCellDescriptor["cellIdentifier"] as! String, forIndexPath: indexPath) as! CustomCell
if currentCellDescriptor["cellIdentifier"] as! String == "idCellNormal" {
if let primaryTitle = currentCellDescriptor["primaryTitle"] {
cell.textLabel?.text = primaryTitle as? String
}
if let secondaryTitle = currentCellDescriptor["secondaryTitle"] {
cell.detailTextLabel?.text = secondaryTitle as? String
}
}
else if currentCellDescriptor["cellIdentifier"] as! String == "idCellTextfield" {
cell.textField.placeholder = currentCellDescriptor["primaryTitle"] as? String
}
else if currentCellDescriptor["cellIdentifier"] as! String == "idCellSwitch" {
cell.lblSwitchLabel.text = currentCellDescriptor["primaryTitle"] as? String
let value = currentCellDescriptor["value"] as? String
cell.swMaritalStatus.on = (value == "true") ? true : false
}
else if currentCellDescriptor["cellIdentifier"] as! String == "idCellValuePicker" {
cell.textLabel?.text = currentCellDescriptor["primaryTitle"] as? String
}
else if currentCellDescriptor["cellIdentifier"] as! String == "idCellSlider" {
let value = currentCellDescriptor["value"] as! String
cell.slExperienceLevel.value = (value as NSString).floatValue
}
return cell
}

Answer 3

I can't think of any general "best approach" for collapsing/expanding behaviour in UITableView. I suspect that is the reason why there's no provided by Apple. Instead, they gave us enough instruments to implement it the way we wish.
In your particular case I have next vision.
I don't know, and don't need to know, how exactly do you work with model side of your task and the following code serves only this answer's purpose, which is - to provide you with collapsing behaviour you seek.
I would suggest to implement your desired behaviour in such a manner. In ViewController, in which you control both search bar and table view add fields
#property NSArray* filteredStudents;
#property NSMutableIndexSet* expandedStudents;
Those properties would be nil (or empty instances) while no search is taking place. Once search starts (first symbols entered or "Search" button tapped - whatever you like most) - instantiate them.
filteredStudents - array that holds reference to those students, that satisfy your search criteria. It is updated every time search executed. Each time you update it - do [tableView reloadData].
expandedStudents - index set that tells you in which sections have user pressed "Show all". Don't forget - it holds only section numbers. So, when filteredStudents array changes, you have to update it manually. For example, when you entered "S" - you have two students shown. You press Show All on the second student. expandStudents now has number 1 in it. Than you enter "Se", and only second student remains. You have to, in that case, replace 1 in expandedStudents with 0, 'cause second student's section becomes first.
Another property
#property BOOL searchMode;
This property should be YES whenever filtered results display takes place. NO - otherwise.
Next, modify UITableViewDataSource and Delegate methods like this
- (NSInteger) numberOfSectionsInTableView:(UITableView *)tableView {
if(searchMode) {
return self.filteredStudents.count;
}
else {
//Your current behaviour here
}
}
- (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
if(searchMode) {
if([self.expandedStudents containsIndex:section]) { // Button "Show all" was already tapped for this student
return /* Number of all fields you need to show for student. Just like you do now. It is for expanded section */
}
else {
return /* Number of fields that satisfy search criteria for student self.filteredStudents[section] */
}
}
else {
//Your current behaviour here
}
}
- (UITableViewCell*) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
if(searchMode) {
if(![self.expandedStudents containsIndex:section] && /* indexPath corresponds to place, where "Show All" should be */) {
//Create "Show All" cell
}
else {
//Create cell that contains info from filtered student fields
}
}
else {
//Your current behaviour here
}
}
- (void) tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
if(searchMode && ![self.expandedStudents containsIndex:section] && /* indexPath corresponds to place, where "Show All" should be */) {
//"Show All" button pressed
[self.expandedStudents addIndex:indexPath.section];
[tableView beginUpdates];
/* For each row, that wasn't presented in collapsed student perform insertRowsAtIndexPaths:withRowAnimation: method */
[tableView endUpdates];
}
else {
//Your current behaviour
}
}