如何在iOS中实现如下图像的搜索功能?

时间:2018-01-08 08:47:00

标签: ios objective-c uitableview uisearchbar uisearchcontroller

enter image description here

以上图片是Gmail应用程序的示例。

我想要的是,

图片2 - 我想显示这样的建议列表,当用户点击该建议时,必须根据该搜索值导航下一个视图

图片3 A - (在打字之前)当我点击搜索栏按钮时,就像我要显示的这个视图一样,我也希望显示图像中显示的分段控件。

图片3 B​​ - 当用户根据搜索值开始输入时,必须在表格视图上显示数据。

我不太详细了解表格视图及其功能。我想了解如何在iOS中实现此功能。

任何人都可以帮助我实现此功能。

2 个答案:

答案 0 :(得分:2)

步骤1 :只需创建一个搜索导航按钮

    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];

第2步:在对其执行操作后,编写用于导航下一个视图的代码

- (IBAction)searchButtonClicked {

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

    }

第3步:获取一个文本字段和分段控件(如屏幕截图所示),并在分段控件下方添加2个表格视图并编写代码。 enter image description here

// 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

}

}

答案 1 :(得分:0)

第1步:只需创建搜索

的导航按钮即可
        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];

第2步:在对其进行操作后,编写用于导航下一个视图的代码

- (IBAction)searchButtonClicked {

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

    }

第3步:获取一个文本字段和分段控件,如下面的屏幕截图所示,并在分段控件下面添加2个表视图并编写代码。

enter image description here

// 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

    }

}

我希望这会对你有所帮助。