How can I implement feature of search like below image in iOS?

Question

above images are example of Gmail application.

what I want is that,

Image 2 - I want to show suggestion list like this and when user click on that suggestion it has to navigate next view according to that search value

Image 3 A - (before typing) When I click on search bar button, like this view I want to show, also I want to show segmented control like shown in the image.

Image 3 B - When a user starts typing according to search value data has to be displayed on table view.

I do not know in detail about table view and its feature. I want to learn that how to implement this feature in iOS.

Anybody can help me to implement this functionality.

Answer 1

Step 1: Simply create a navigation button of search

    UIButton *searchButton =  [UIButton buttonWithType:UIButtonTypeCustom];
    [searchButton setImage:[UIImage imageNamed:@"search1"] forState:UIControlStateNormal];
    [searchButton addTarget:self action:@selector(searchButtonClicked) forControlEvents:UIControlEventTouchUpInside];
    [searchButton setFrame:CGRectMake(10, 0, 35, 35)];

     UIView *rightBarButtonItems = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 76, 32)];
    [rightBarButtonItems addSubview:searchButton];

    self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:rightBarButtonItems];

Step 2: After that give action to it, write code for navigating next view

- (IBAction)searchButtonClicked {

   SearchViewController * search=[self.storyboard instantiateViewControllerWithIdentifier:@"SearchViewControllerId"];
   [self.navigationController pushViewController:search animated:YES];

    }

Step 3: Take one text field and segmented control like below screenshot and add 2 table view below a segmented control and write code.

// This method used to allow select segmented button multiple times (multi-select segmented control)

-(void)setMultiSelectControl:(MultiSelectSegmentedControl *)multiSelectControl{
    _multiSelectControl = multiSelectControl;
    self.multiSelectControl.tag = 2;
    self.multiSelectControl.delegate = self;
}

-(void)multiSelect:(MultiSelectSegmentedControl *)multiSelecSegmendedControl didChangeValue:(BOOL)value atIndex:(NSUInteger)index{

if(index==0)
    {

    _multiSelectControl.selectedSegmentIndex=0;
    _tableview1.hidden=NO;
    _tableview2.hidden=YES;

    [_seachTextField resignFirstResponder];

    // your code

}

if (index==1) {

    _multiSelectControl.selectedSegmentIndex=1;

    _tableview1.hidden=YES;
    _tableview2.hidden=NO;

    [_seachTextField resignFirstResponder];

     // your code

}

}