首页 > 代码库 > iOS开发项目篇—12搜索框的封装
iOS开发项目篇—12搜索框的封装
iOS开发项目篇—12搜索框的封装
一、在“发现”导航栏中添加搜索框
1.实现代码
1 #import "YYDiscoverViewController.h" 2 3 @interface YYDiscoverViewController () 4 5 @end 6 7 @implementation YYDiscoverViewController 8 9 - (void)viewDidLoad10 {11 [super viewDidLoad];12 13 //添加搜索框14 UITextField *searchBar=[[UITextField alloc]init];15 //设置搜索框的宽度和高度16 searchBar.width=300;17 searchBar.height=35;18 //设置内容居中19 //水平居中20 // searchBar.textAlignment=NSTextAlignmentCenter;21 //垂直居中22 searchBar.contentVerticalAlignment=UIControlContentVerticalAlignmentCenter;23 //设置搜索框的背景颜色为提供的图片24 searchBar.background=[UIImage resizedImage:@"searchbar_textfield_background"];25 26 //添加放大镜27 UIImageView *leftView=[[UIImageView alloc]init];28 leftView.image=[UIImage imageWithName:@"searchbar_textfield_search_icon"];29 leftView.backgroundColor=[UIColor redColor];30 //设置放大镜距离两边的间隔31 leftView.width=searchBar.height;32 leftView.height=searchBar.height;33 //设置放大镜居中34 leftView.contentMode=UIViewContentModeCenter;35 searchBar.leftView=leftView;36 //设置左边永远显示37 searchBar.leftViewMode=UITextFieldViewModeAlways;38 39 //设置全部清除按钮，永远显示40 searchBar.clearButtonMode=UITextFieldViewModeAlways;41 self.navigationItem.titleView=searchBar;42 43 }44 45 46 @end
2.搜索框添加效果
代码说明：
（1）通过UITextField创建一个搜索框
（2）通过为搜索框设置背景图片，来实现ios6和ios7的适配。在设置背景图片的时候，使用了UIImage的分类，根据图片名返回一张能够自由拉伸的图片。
分类中，该方法的实现：
1 + (UIImage *)resizedImage:(NSString *)name2 {3 UIImage *image = [UIImage imageWithName:name];4 return [image stretchableImageWithLeftCapWidth:image.size.width * 0.5 topCapHeight:image.size.height * 0.5];5 }
（3）设置内容居中（有三种方法，可以参考之前的文章）
（4）UITextField的leftView属性，通过该属性来设置放大镜，默认情况下该属性为永远不显示，需要对leftViewMode进行设置。
（5）设置搜索框右侧的全部清除按钮永远显示。
二、对搜索框的封装
(1)为UITextField添加一个分类，把创建搜索框的代码封装到该分类的一个方法中。
使用分类：
实现代码：
分类的.h文件
1 // UITextField+Extension.h 2 3 4 #import <UIKit/UIKit.h> 5 6 @interface UITextField (Extension) 7 /** 8 *提供一个搜索框 9 */10 +(UITextField *)searchBarWithTextField;11 @end
分类的实现文件
1 // 2 // UITextField+Extension.m 3 // 4 5 #import "UITextField+Extension.h" 6 7 @implementation UITextField (Extension) 8 +(UITextField *)searchBarWithTextField 9 {10 //添加搜索框11 UITextField *searchBar=[[UITextField alloc]init];12 //设置搜索框的宽度和高度属性改为由外界进行设置13 // searchBar.width=300;14 // searchBar.height=35;15 //垂直居中16 searchBar.contentVerticalAlignment=UIControlContentVerticalAlignmentCenter;17 //设置搜索框的背景颜色为提供的图片18 searchBar.background=[UIImage resizedImage:@"searchbar_textfield_background"];19 // searchBar.background=[UIImage imageWithName:@"searchbar_textfield_background"];20 21 //添加放大镜22 UIImageView *leftView=[[UIImageView alloc]init];23 leftView.image=[UIImage imageWithName:@"searchbar_textfield_search_icon"];24 leftView.backgroundColor=[UIColor redColor];25 //设置放大镜距离两边的间隔26 leftView.width=leftView.image.size.width+10;27 leftView.height=leftView.width;28 29 //设置放大镜居中30 leftView.contentMode=UIViewContentModeCenter;31 searchBar.leftView=leftView;32 //设置左边永远显示33 searchBar.leftViewMode=UITextFieldViewModeAlways;34 35 //设置全部清除按钮，永远显示36 searchBar.clearButtonMode=UITextFieldViewModeAlways;37 return searchBar;38 }39 @end
使用的代码：
1 //添加一个搜索框2 UITextField *searchBar=[UITextField searchBarWithTextField];3 searchBar.frame=CGRectMake(0, 100, 300, 35);6 [self.view addSubview:searchBar];
效果：
优点：在下个项目中，如果也需要用到搜索框的功能，那么直接把这个文件带走就可以快速的创建了（还需要背景和放大镜的图片）
缺点：通过文本输入框创建搜索框，代码的可读性不好。
（2）采用继承的方式
提示：自定义控件，通常采用继承的方式，对UITextField添加分类，创建搜索框感觉很别扭。在这里我们直接使用继承，自定义控件。
建议：UI控件的封装建议使用继承，除开UI控件以外的，可以选择把代码抽到分类里面去。
创建一个新的类，让该类继承自UITextFeild
类的声明：
1 //2 // YYSearchBar.h3 //4 5 #import <UIKit/UIKit.h>6 7 @interface YYSearchBar : UITextField8 +(instancetype)SearchBar;9 @end
类的实现：
1 // 2 // YYSearchBar.m 3 // 4 5 #import "YYSearchBar.h" 6 7 @implementation YYSearchBar 8 9 //说明：init方法内部会调用initWithFrame：方法10 - (id)initWithFrame:(CGRect)frame11 {12 self = [super initWithFrame:frame];13 if (self) {14 //实现初始化控件的代码15 //垂直居中16 self.contentVerticalAlignment=UIControlContentVerticalAlignmentCenter;17 //设置搜索框的背景颜色为提供的图片18 self.background=[UIImage resizedImage:@"searchbar_textfield_background"];19 // searchBar.background=[UIImage imageWithName:@"searchbar_textfield_background"];20 21 //添加放大镜22 UIImageView *leftView=[[UIImageView alloc]init];23 leftView.image=[UIImage imageWithName:@"searchbar_textfield_search_icon"];24 leftView.backgroundColor=[UIColor redColor];25 //设置放大镜距离两边的间隔26 leftView.width=leftView.image.size.width+10;27 leftView.height=leftView.width;28 29 //设置放大镜居中30 leftView.contentMode=UIViewContentModeCenter;31 self.leftView=leftView;32 //设置左边永远显示33 self.leftViewMode=UITextFieldViewModeAlways;34 35 //设置全部清除按钮，永远显示36 self.clearButtonMode=UITextFieldViewModeAlways;37 }38 return self;39 }40 41 +(instancetype)SearchBar42 {43 return [[self alloc]init];44 }45 @end
创建并添加一个搜索框：
1 // 2 // YYDiscoverViewController.m 3 // 4 5 #import "YYDiscoverViewController.h" 6 #import "YYSearchBar.h" 7 8 @interface YYDiscoverViewController () 9 10 @end11 12 @implementation YYDiscoverViewController13 14 - (void)viewDidLoad15 {16 [super viewDidLoad];17 18 //创建并添加一个搜索框19 //添加一个搜索框20 YYSearchBar *searchBar=[YYSearchBar SearchBar];21 searchBar.frame=CGRectMake(0, 100, 300, 35);22 self.navigationItem.titleView=searchBar;23 }24 25 @end
实现效果：
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。