前言
在App的开发中,搜索框是必不可少的。但是苹果给我们提供的搜索框有点差强人意。没有达到我们预想的效果。为了满足我们的需求,我们就要打造属于自己的搜索框。今天就详细介绍如何打造可定制的搜索框。
系统默认的搜索框
1、效果如下:
2、代码如下:
-(void)defualtSysSearchBar{ NetWorkSearchBar = [[UISearchBar alloc]initWithFrame:CGRectMake(30, 100, 300, 40)]; NetWorkSearchBar.placeholder = @"搜一搜"; [self.view addSubview:NetWorkSearchBar]; }
综上显示,所述:我们看到系统为我们提供的搜索框,我们不能直接使用。
第一、去掉系统搜索框后面灰色的背景
1、代码如下:
#pragma mark 去掉后面的灰色背景 -(void)disMissBackColor{ NetWorkSearchBar = [[UISearchBar alloc]initWithFrame:CGRectMake(30, 100, 300, 40)]; NetWorkSearchBar.placeholder = @"搜一搜"; // 去掉背景 NetWorkSearchBar.backgroundImage = [UIImage new]; [self.view addSubview:NetWorkSearchBar]; }2、效果如下:
第二、修改系统搜索框的背景色
1、代码如下:
#pragma mark 修改SearchBar 后面背景色(不可以用于完全去掉背景色) -(void)setUpSearchBarBarBackGroundColor{ NetWorkSearchBar = [[UISearchBar alloc]initWithFrame:CGRectMake(30, 100, 300, 40)]; NetWorkSearchBar.placeholder = @"搜一搜"; NetWorkSearchBar.barTintColor = [UIColor redColor]; [self.view addSubview:NetWorkSearchBar]; }
2、效果如下:
注意了,该方法不可以用来清除搜索框的背景色。因为通过代码将颜色设置为白色后的效果如下图所示:
第三、显示取消(Cancle),并将英文改为中文和设置文字的颜色
1、显示取消英文的代码如下:
#pragma mark 显示取消的SearchBar -(void)showEngCancleSearchBar{ NetWorkSearchBar = [[UISearchBar alloc]initWithFrame:CGRectMake(30, 100, 300, 40)]; NetWorkSearchBar.placeholder = @"搜一搜"; NetWorkSearchBar.showsCancelButton = YES; [self.view addSubview:NetWorkSearchBar]; }2、英文取消效果如下:
3、修改为中文和颜色
#pragma mark 修改显示的取消为中文 -(void)modificationTitleAndColorOfSearchBar{ NetWorkSearchBar = [[UISearchBar alloc]initWithFrame:CGRectMake(30, 100, 300, 40)]; NetWorkSearchBar.placeholder = @"搜一搜"; NetWorkSearchBar.showsCancelButton = YES; if (@available(iOS 9.0 ,*)) { [[UIBarButtonItem appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTitle:@"取消"]; [[UIBarButtonItem appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTintColor:[UIColor redColor]]; }else{ [[UIBarButtonItem appearanceWhenContainedIn:[UISearchBar class], nil] setTitle:@"取消"]; [[UIBarButtonItem appearanceWhenContainedIn:[UISearchBar class], nil] setTintColor:[UIColor redColor]]; } [self.view addSubview:NetWorkSearchBar]; }4、修改后中文效果如下:
第四、修改搜索框里的光标的颜色
1、代码如下:
#pragma mark 修改搜索框里的光标颜色 -(void)modificationCursorOfSearchBar{ NetWorkSearchBar = [[UISearchBar alloc]initWithFrame:CGRectMake(30, 100, 300, 40)]; NetWorkSearchBar.placeholder = @"搜一搜"; NetWorkSearchBar.showsCancelButton = YES; if (@available(iOS 9.0 ,*)) { [[UIBarButtonItem appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTitle:@"取消"]; [[UIBarButtonItem appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTintColor:[UIColor redColor]]; }else{ [[UIBarButtonItem appearanceWhenContainedIn:[UISearchBar class], nil] setTitle:@"取消"]; [[UIBarButtonItem appearanceWhenContainedIn:[UISearchBar class], nil] setTintColor:[UIColor redColor]]; } // 修改光标 NetWorkSearchBar.tintColor = [UIColor greenColor]; [self.view addSubview:NetWorkSearchBar]; }
2、效果如下:
第五、给系统搜索框内置框添加切角和边线
1、代码如下:
#pragma mark 给搜索框内置框添加边线和切角 -(void)addLineOfSearchBar{ NetWorkSearchBar = [[UISearchBar alloc]initWithFrame:CGRectMake(30, 100, 300, 40)]; NetWorkSearchBar.placeholder = @"搜一搜"; UITextField * SearchBarTextField = [NetWorkSearchBar valueForKey:@"searchField"]; SearchBarTextField.layer.masksToBounds = YES; SearchBarTextField.layer.cornerRadius = 10.0; SearchBarTextField.layer.borderWidth = 1.0; SearchBarTextField.layer.borderColor = [UIColor redColor].CGColor; [self.view addSubview:NetWorkSearchBar]; }
2、效果如下:
第六:修改搜索框的提示文字的颜色和大小
1、代码如下:
#pragma mark 修改搜索框的提示文字大小和颜色 -(void)modificationPlaceholderOfSearchBar{ NetWorkSearchBar = [[UISearchBar alloc]initWithFrame:CGRectMake(30, 100, 300, 40)]; UITextField * SearchBarTextField = [NetWorkSearchBar valueForKey:@"searchField"]; NSAttributedString * str = [[NSAttributedString alloc]initWithString:@"搜一搜" attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:18],NSForegroundColorAttributeName:[UIColor greenColor]}]; [SearchBarTextField setAttributedPlaceholder:str]; [self.view addSubview:NetWorkSearchBar]; }
2、效果如下:
第七、修改搜索框里的搜索图片、取消按钮图片、书页图片、搜索结果下拉列表的图片
1、代码如下:
#pragma mark 更换搜索框里的搜索图片 -(void)replaceSearchImageOfSearchBar{ NetWorkSearchBar = [[UISearchBar alloc]initWithFrame:CGRectMake(30, 100, 300, 40)]; NetWorkSearchBar.placeholder = @"搜一搜"; [NetWorkSearchBar setImage:[UIImage imageNamed:@"w22"] forSearchBarIcon:UISearchBarIconSearch state:UIControlStateNormal]; [self.view addSubview:NetWorkSearchBar]; }
2、效果如下:
八、自定义搜索框
1、代码如下:
#pragma mark 给你搜索框添加按钮 -(void)addBtnInSearchBar{ NetWorkSearchBar = [[UISearchBar alloc]initWithFrame:CGRectMake(30, 100, 300, 40)]; NetWorkSearchBar.delegate = self; NetWorkSearchBar.placeholder = @"搜一搜"; [self.view addSubview:NetWorkSearchBar]; // 要添加的按钮 VideoBtn = [UIButton buttonWithType:UIButtonTypeCustom]; [VideoBtn setImage:[UIImage imageNamed:@"vio"] forState:UIControlStateNormal]; [VideoBtn addTarget:self action:@selector(viodeClick) forControlEvents:UIControlEventTouchDragInside]; // 将其添加到搜索框内 [NetWorkSearchBar addSubview:VideoBtn]; // 设置添加按钮的约束条件 VideoBtn.translatesAutoresizingMaskIntoConstraints = NO; NSDictionary * Views = NSDictionaryOfVariableBindings(VideoBtn); // 设置水平约束 [NetWorkSearchBar addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"[VideoBtn(21)]-|" options:NSLayoutFormatAlignAllRight | NSLayoutFormatAlignAllLeft metrics:nil views:Views]]; // 设置高度约束 [NetWorkSearchBar addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"[VideoBtn(21)]-|" options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:nil views:Views]]; //设置垂直方向居中约束 [NetWorkSearchBar addConstraint:[NSLayoutConstraint constraintWithItem:VideoBtn attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:NetWorkSearchBar attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]]; } -(void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText{ VideoBtn.hidden = searchText.length>0; } -(void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar{ VideoBtn.hidden = YES; } // 点击事件 -(void)viodeClick{ }
2、效果如下: