把UISearchBar改造成你想要的样子

606 阅读1分钟

产品要求,如下图,在不触发UISearchBar的情况下 1.默认的提示文字居左

2.删除按钮默认显示,且样式要替换

3.取消按钮显示

4.输入光标距最左边指定间隔

5.隐藏放大镜图标

搜索框.png

- (void)addSearchBarView {
UIView *searchBgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 75.f)];

searchBgView.backgroundColor = [UIColor whiteColor];

[self.view addSubview:searchBgView];

UISearchBar *searchBarView = [[UISearchBar alloc] initWithFrame:CGRectMake(8.f, 27.f,SCREEN_WIDTH-58.f, 44.f)];

//光标颜色
searchBarView.tintColor = [UIColor grayColor];

[searchBarView setBackgroundImage:[UIImage imageNamed:@"clear_bg"]];

//背景图片
[searchBarView setSearchFieldBackgroundImage:[UIImage imageNamed:@"searchFiledBg"] forState:UIControlStateNormal];

//输入光标左边距
[searchBarView setSearchTextPositionAdjustment: UIOffsetMake(10, 0)];

searchBarView.delegate = self;

self.searchBarView = searchBarView;

//隐藏放大镜图标
UITextField *txfSearchField = [searchBarView valueForKey:@"_searchField"];

[txfSearchField setLeftViewMode:UITextFieldViewModeNever];

//自定义取消按钮
UIButton *cancelBtn = [[UIButton alloc] initWithFrame:CGRectMake(SCREEN_WIDTH-57.f, CGRectGetMinY(searchBarView.frame), 57.f, 44.f)];

[cancelBtn setTitle:@"取消" forState:UIControlStateNormal];

cancelBtn.titleLabel.font = [UIFont CFRegular:14.f];

[cancelBtn setTitleColor:RGBSame(28) forState:UIControlStateNormal];

[cancelBtn addTarget:self action:@selector(cancelSearch) forControlEvents:UIControlEventTouchUpInside];

//自定义placeholder text
UILabel *label = [UILabel new];

label.frame = CGRectMake(18, 8, 200, 28);

label.text = @"搜索Fashionista和文章";

label.font = [UIFont CFRegular:14];

label.textColor = HBGrayColor;

[searchBarView addSubview:label];

self.placeHolderLbl = label;

[searchBgView addSubview:searchBarView];

[searchBgView addSubview:cancelBtn];}

下一步就是显示删除按钮了,注意要在viewDidAppear方法里操作,遍历UISearchBar的子视图找到searchField,自定义searchField.rightView,然后searchField.rightViewMode = UITextFieldViewModeAlways;将默认的清除按钮状态设为searchField.clearButtonMode = UITextFieldViewModeNever;代码详情如下:

- (void)viewDidAppear:(BOOL)animated{
[super viewDidAppear:animated];
for(UIView *subView in self.searchBarView.subviews.firstObject.subviews) {
    if([subView isKindOfClass: [UITextField class]]){
        UITextField *searchField = (UITextField *)subView;
        CGFloat myWidth = 26.0f;
        CGFloat myHeight = 30.0f;
        UIButton *myButton = [[UIButton alloc] initWithFrame:CGRectMake(0.0f, 0.0f, myWidth, myHeight)];
        [myButton setImage:[UIImage imageNamed:@"icon_delete_search_normal"] forState:UIControlStateNormal];
        [myButton setImage:[UIImage imageNamed:@"icon_delete_search_normal"] forState:UIControlStateHighlighted];
        [myButton addTarget:self action:@selector(clearsearchbar) forControlEvents:UIControlEventTouchUpInside];
        searchField.rightView = myButton;
        searchField.rightViewMode = UITextFieldViewModeAlways;
        searchField.clearButtonMode = UITextFieldViewModeNever;
    }
} }

当然要记得在触发UISearchBar时隐藏自定义的Placeholder,并按照自己的需求去实现删除和取消按钮的触发方法,下面是我的实现 - (void)clearsearchbar { _searchBarView.text = nil; self.placeHolderLbl.hidden = NO; [_searchBarView resignFirstResponder];}

- (void)cancelSearch {
[_searchBarView resignFirstResponder];
[self.navigationController popViewControllerAnimated:YES];}