Sliding Segmented Control

The segmented control in iOS 7 can act as a sleek replacement to the tabs which can be used to change categories quickly. It will also help in avoiding over-crowding of the side navigation menu. But trying to fit a number of items in our 320 pixels of width can become quite cumbersome.

To counter that, the best way is to have a segmented control which is scrollable which means that on flicking the control, it just slides to display the hidden items.

To achieve that, we will make a demo project which can produce a sliding segmented control.

Setting up the project layout

We will do this initial setup of our project before taking upon the segmented control part :

Screen Shot 2013-12-11 at 3.34.43 PM

1. Create a new Xcode Project and name it as “SlidingSegmentedControl”.

2. Add a label at the top of the view and give the text as “Journals I like”.

3. We add a table view onto the storyboard and create a custom cell called “JournalCell“.This cell will contain the names of our favourite journals.

4. Add a UISegmented Control and add some categories for the journals in that.

5. Connect the tableview delegate and dataSource to the view.

Screen Shot 2013-12-12 at 11.18.22 AM

Writing the configuration methods

We configure the tableView delegate and dataSource methods :

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    return 5;

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    static NSString *staticIdentifier = @"JournalCell";

    JournalCell *cell = (JournalCell*)[tableView dequeueReusableCellWithIdentifier:staticIdentifier forIndexPath:indexPath];

    cell.journalLabel.text = [journals objectAtIndex:indexPath.row];

    return cell;

Add the following code in the viewDidLoad method:

    [super viewDidLoad];

    journals = [[NSMutableArray alloc]init];

    self.tableView.dataSource = self;
    self.tableView.delegate = self;

    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 49, 320, 29)];
    self.segmentedControl.frame = CGRectMake(0, 0, 640, 29);

    scrollView.contentSize = CGSizeMake(self.segmentedControl.frame.size.width, self.segmentedControl.frame.size.height -1);
    scrollView.showsHorizontalScrollIndicator = NO;

    self.segmentedControl.selectedSegmentIndex = 0;

    [scrollView addSubview:self.segmentedControl];
    [self.view addSubview:scrollView];

    [self fillJournals];

	// Do any additional setup after loading the view, typically from a nib.

The fillJournals method will be defined as :

[journals removeAllObjects];

    NSString *segmentName = [self.segmentedControl titleForSegmentAtIndex:self.segmentedControl.selectedSegmentIndex];

    for (int i=0; i<5; i++) {
        [journals addObject:[NSString stringWithFormat:@"%@ %d",segmentName,i+1]];

Connect the UISegmented Control’s “valueChanged” method outlet to the method :

- (IBAction)categoryDidChange:(id)sender
    [self fillJournals];
    [self.tableView reloadData];

The project can be downloaded from github :

Thank You!! Have a nice day coding.


Comments are closed.

%d bloggers like this: