最近在学习仿公司App时,遇到这样一个需求,搜索框的最左侧有个小icon,icon后面紧跟着placeholder。看图:
从代码中看,iOS同学(已离职)是这么搞的:
1. 先创建一个通栏的UIView用addSubview添加到self.view上
2. 然后创建一个UITextField,addSubview到上一步中创建的UIView上
3. 再创建一个UIImage类型的icon,addSubview到上一步中创建的UITextField上
4. 使用setText方法将提示文本直接赋值到UITextField,为了让提示文字“搜索商品”与icon之前保持一定的距离,居然写了这么一行代码,看注释
看代码:
1 - (void)initTopMenuBar{ 2 self.navigationController.navigationBar.hidden = YES; 3 4 UIView *bgView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 64)]; 5 [bgView setBackgroundColor:[UIColor whiteColor]]; 6 [self.view addSubview:bgView]; 7 8 UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(15, 20, 48, 44)]; 9 imageView.contentMode = UIViewContentModeCenter; 10 [imageView setImage:[UIImage imageNamed:@"event_logo2"]]; 11 [self.view addSubview:imageView]; 12 13 UITextField *searchBar = [[UITextField alloc]initWithFrame:CGRectMake(73, 29, 232, 25)]; 14 searchBar.layer.cornerRadius = 12.5; 15 searchBar.layer.masksToBounds = YES; 16 searchBar.font = [UIFont systemFontOfSize:12]; 17 searchBar.delegate = self; 18 searchBar.backgroundColor = [BBColorUtils colorWithFloat:236 alpha:1.0]; 19 [searchBar setTextColor:[UIColor whiteColor]]; 20 21 // 吐槽! 虽然我还在学习iOS开发阶段,虽然解决问题的方式有很多种,虽然条条大道通罗马,但是对于这种low代码也实在是看不下去。。。 22 [searchBar setText:@" 搜索商品"]; 23 [bgView addSubview:searchBar]; 24 25 26 UIImageView *eventMagnifier = [[UIImageView alloc] initWithFrame:CGRectMake(7, 2, 20, 20)]; 27 eventMagnifier.image = [UIImage imageNamed:@"icon_title_search"]; 28 [searchBar addSubview:eventMagnifier]; 29 eventMagnifier.userInteractionEnabled = NO; 30 31 }
其实UITextField有placeholder属性的,这里用setText来做提示文案,还得在事件处理逻辑中去处理隐藏的问题,相当繁琐。。。
好了,吐槽完了,接着将我搜索到的相对正常一点的方法整理出来。
关键点:leftView,leftViewMode,rightView,rightViewMode
放上我改进之后的代码:
1 - (void)initSearch 2 { 3 // 隐藏导航标题 4 self.navigationController.navigationBar.hidden = YES; 5 6 UIView *backgroudLayer = [[UIView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, 64)]; 7 [backgroudLayer setBackgroundColor:[UIColor whiteColor]]; 8 [self.view addSubview:backgroudLayer]; 9 10 11 UIImageView *logo = [[UIImageView alloc] initWithFrame:CGRectMake(15, 20, 48, 44)]; 12 logo.contentMode = UIViewContentModeCenter; 13 [logo setImage:[UIImage imageNamed:@"logo"]]; 14 [self.view addSubview:logo]; 15 16 17 UITextField *searchText = [[UITextField alloc] initWithFrame:CGRectMake(73, 29, 232, 25)]; 18 searchText.layer.cornerRadius = 12.5; 19 searchText.layer.masksToBounds = YES; 20 searchText.font = [UIFont systemFontOfSize:12]; 21 searchText.delegate = self; 22 searchText.backgroundColor = [UIColor colorWithRed:236/255.0f green:236/255.0f blue:236/255.0f alpha:1.0]; 23 [searchText setTextColor:[UIColor whiteColor]]; 24 searchText.placeholder = @"搜索商品";// 再也不用在前面加上恶心的空格啦 25 [backgroudLayer addSubview:searchText]; 26 27 28 UIImageView *searchIcon = [[UIImageView alloc] initWithFrame:CGRectMake(7, 2, 20, 20)]; 29 searchIcon.image = [UIImage imageNamed:@"search"]; 30 searchIcon.userInteractionEnabled = NO; 31 32 // 就是这里了,将创建的icon直接赋给leftView就好了 33 searchText.leftView = searchIcon; 34 searchText.leftViewMode = UITextFieldViewModeAlways; 35 }
done。