Need approach to show tables using segmented control?

Question

Hi there I using a segmented control on a view. With the help of this segmented control I would like to display to different tables on my view, Suppose I have two segments in my table on tap of segment 1 I would like to display table 1 and on tap of segment 2 I would like to display table 2 my table 1 is a Plain table and table 2 is a grouped table, Apple is using approach to display differnt apps in differnt categories on app store but I am not sure how do I do that. Please suggest any approach or any code sample for the same will also appriciated.

Thanks Sandy

Answer 1

We do this by having a single tableview, and then doing an if/case statement in each tableview callback method to return the right data based on which value is selected in the segmented control.

First, add the segmentedControl to the titleView, and set a callback function for when it is changed:

- (void) addSegmentedControl {
    NSArray * segmentItems = [NSArray arrayWithObjects: @"One", @"Two", nil];
    segmentedControl = [[[UISegmentedControl alloc] initWithItems: segmentItems] retain];
    segmentedControl.segmentedControlStyle = UISegmentedControlStyleBar;
    segmentedControl.selectedSegmentIndex = 0;
    [segmentedControl addTarget: self action: @selector(onSegmentedControlChanged:) forControlEvents: UIControlEventValueChanged];
    self.navigationItem.titleView = segmentedControl;
}

Next, when the segmented control is changed, you need to load the data for the new segment, and reset the table view to show this data:

- (void) onSegmentedControlChanged:(UISegmentedControl *) sender {
    // lazy load data for a segment choice (write this based on your data)
    [self loadSegmentData:segmentedControl.selectedSegmentIndex];

    // reload data based on the new index
    [self.tableView reloadData];

    // reset the scrolling to the top of the table view
    if ([self tableView:self.tableView numberOfRowsInSection:0] > 0) {
        NSIndexPath *topIndexPath = [NSIndexPath indexPathForRow:0 inSection:0]; 
        [self.tableView scrollToRowAtIndexPath:topIndexPath atScrollPosition:UITableViewScrollPositionTop animated:NO];
    }
}

Then in your tableView callbacks, you need to have logic per segment value to return the right thing. I'll show you one callback as an example, but implement the rest like this:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @"GenericCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[NSBundle mainBundle] loadNibNamed:@"GenericCell" owner:self options:nil] objectAtIndex: 0];
    }   

    if (segmentedControl.selectedSegmentIndex == 0) { 
        cell.textLabel.text = @"One";
    } else if (segmentedControl.selectedSegmentIndex == 1) {
        cell.textLabel.text = @"Two";
    }
    return cell;
}

That's about it, hope it helps.

Answer 2

Another alternative is to have a container view, which you add whichever tableView is current as a subview. You can even have each table be in a different view controller to keep things separated out, by creating the table view controllers and then adding .view as a subview of the container, but if you do that you'll have to manually call viewWillAppear and viewWillDisapear (which is not very hard as you just call them when swapping out tables when the segmented control is touched).