把UISearchBar改造成你想要的样子

作者: 十六月 | 来源:发表于2016-08-15 12:20 被阅读1768次

    产品要求,如下图,在不触发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];}

    相关文章

      网友评论

      本文标题:把UISearchBar改造成你想要的样子

      本文链接:https://www.haomeiwen.com/subject/bwjusttx.html