码迷,mamicode.com
首页 > 移动开发 > 详细

iOS开发项目篇—12搜索框的封装

时间:2014-07-11 21:52:57      阅读:429      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   使用   strong   

iOS开发项目篇—12搜索框的封装

一、在“发现”导航栏中添加搜索框

1.实现代码

 1 #import "YYDiscoverViewController.h"
 2 
 3 @interface YYDiscoverViewController ()
 4 
 5 @end
 6 
 7 @implementation YYDiscoverViewController
 8 
 9 - (void)viewDidLoad
10 {
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.搜索框添加效果

bubuko.com,布布扣

代码说明:

(1)通过UITextField创建一个搜索框

(2)通过为搜索框设置背景图片,来实现ios6和ios7的适配。在设置背景图片的时候,使用了UIImage的分类,根据图片名返回一张能够自由拉伸的图片。

  分类中,该方法的实现:

1 + (UIImage *)resizedImage:(NSString *)name
2 {
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添加一个分类,把创建搜索框的代码封装到该分类的一个方法中。

  使用分类:

bubuko.com,布布扣

实现代码:

分类的.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];

效果:

bubuko.com,布布扣

优点:在下个项目中,如果也需要用到搜索框的功能,那么直接把这个文件带走就可以快速的创建了(还需要背景和放大镜的图片)

缺点:通过文本输入框创建搜索框,代码的可读性不好。

(2)采用继承的方式

提示:自定义控件,通常采用继承的方式,对UITextField添加分类,创建搜索框感觉很别扭。在这里我们直接使用继承,自定义控件。

建议:UI控件的封装建议使用继承,除开UI控件以外的,可以选择把代码抽到分类里面去。

创建一个新的类,让该类继承自UITextFeild

bubuko.com,布布扣

类的声明:

1 //
2 //  YYSearchBar.h
3 //
4 
5 #import <UIKit/UIKit.h>
6 
7 @interface YYSearchBar : UITextField
8 +(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)frame
11 {
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)SearchBar
42 {
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 @end
11 
12 @implementation YYDiscoverViewController
13 
14 - (void)viewDidLoad
15 {
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

实现效果:

bubuko.com,布布扣

iOS开发项目篇—12搜索框的封装,布布扣,bubuko.com

iOS开发项目篇—12搜索框的封装

标签:style   blog   http   color   使用   strong   

原文地址:http://www.cnblogs.com/wendingding/p/3833205.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!