一、简单说明
在“发现”控制器的导航栏中间放置一个搜索框。
1.第一种实现方案
第一种实现方案:最简单的方案(直接使用系统的UISearchBar)
实现代码:
//
// YYDiscoverViewController.m
//
#import "YYDiscoverViewController.h"
@interface YYDiscoverViewController ()
@end
@implementation YYDiscoverViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//在导航栏按钮上,添加一个搜索框
//使用UISearchBar
UISearchBar *bar=[[UISearchBar alloc]init];
//设置bar的frame
bar.frame=CGRectMake(0, 0, 300, 35);
self.navigationItem.titleView=bar;
}
@end
2.第二种实现方案:
第一种方案存在的不足之处:系统的搜索框偏白色,和导航栏的颜色很相近,显示效果很难看。
分析新浪微博应用,可以知道官方提供了放大镜和搜索框的背景图片。
那么第二种方案,我们尝试使用它提供的背景图片来完成搜索框的功能
导入相应的图片素材
首先,我们可以尝试给searchBar设置背景图片,查看效果。
//
// YYDiscoverViewController.m
//
#import "YYDiscoverViewController.h"
@interface YYDiscoverViewController ()
@end
@implementation YYDiscoverViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//在导航栏按钮上,添加一个搜索框
/*第一种方案
UISearchBar *bar=[[UISearchBar alloc]init];
//设置bar的frame
bar.frame=CGRectMake(0, 0, 300, 35);
bar.backgroundImage=[UIImage resizedImage:@"searchbar_textfield_background"];
self.navigationItem.titleView=bar;
*/
//第二种方案
//使用UISearchBar
UISearchBar *bar=[[UISearchBar alloc]init];
//设置bar的frame
bar.frame=CGRectMake(0, 0, 300, 35);
bar.backgroundImage=[UIImage resizedImage:@"searchbar_textfield_background"];
self.navigationItem.titleView=bar;
}
@end
在ios7系统下,看不出有什么不同的效果,在IOS6的系统下运行,显示效果如下:
要去掉搜索框内部的椭圆属性,但是searchBar并没有为我们提供相应的方法,所以这种做法被放弃。
注意:对图片进行保护性拉伸,而不是平铺,searchBar自己的属性不好用,设置其样式时只支持ios7,放弃这种方法。
为Image提供一个分类,扩充方法:
分类方法的头文件为:
//
// UIImage+Extension.h
//
#import <UIKit/UIKit.h>
@interface UIImage (Extension)
/**
*根据图片名自动加载适配IOS6和iOS7的图片
*/
+ (UIImage *)imageWithName:(NSString *)name;
/**
* 根据图片名返回一张能自由拉伸的图片
*/
+ (UIImage *)resizedImage:(NSString *)name;
@end
扩充方法的实现为:
//
// UIImage+Extension.m
//
#import "UIImage+Extension.h"
@implementation UIImage (Extension)
+ (UIImage *)imageWithName:(NSString *)name
{
UIImage *image = nil;
if (iOS7) { // 处理iOS7的情况
NSString *newName = [name stringByAppendingString:@"_os7"];
image = [UIImage imageNamed:newName];
}
if (image == nil) {
image = [UIImage imageNamed:name];
}
return image;
}
+ (UIImage *)resizedImage:(NSString *)name
{
UIImage *image = [UIImage imageWithName:name];
return [image stretchableImageWithLeftCapWidth:image.size.width * 0.5 topCapHeight:image.size.height * 0.5];
}
@end
3.第三种实现方案:
使用一个textfield自定义一个搜索框。
设置搜索框的宽高,背景图片。
//第三种方案
UITextField *searchBar=[[UITextField alloc]init];
//设置frmae
searchBar.width=300;
searchBar.height=35;
//设置背景图片
searchBar.background=[UIImage resizedImage:@"searchbar_textfield_background"];
//添加到导航栏中
self.navigationItem.titleView=searchBar;
显示效果如下:
新的问题:光标(输入的文字)不居中,在类中没有垂直居中这个属性。
技巧:一个属性如果找不到的话,可以去它的父类中进行查找
设置内容垂直居中(父类中的属性)
UITextField *searchBar=[[UITextField alloc]init];
//设置frmae
searchBar.width=300;
searchBar.height=35;
//设置背景图片
searchBar.background=[UIImage resizedImage:@"searchbar_textfield_background"];
// searchBar.textAlignment=NSTextAlignmentCenter;//说明:这是设置文字水平居中
//设置文字内容垂直居中
searchBar.contentVerticalAlignment=UIControlContentVerticalAlignmentCenter;
//添加到导航栏中
self.navigationItem.titleView=searchBar;
新的问题:怎么往搜索框中放一个放大镜—使用leftView属性
UITextField *searchBar=[[UITextField alloc]init];
//设置frmae
searchBar.width=300;
searchBar.height=35;
//设置背景图片
searchBar.background=[UIImage resizedImage:@"searchbar_textfield_background"];
// searchBar.textAlignment=NSTextAlignmentCenter;//说明:这是设置文字水平居中
//设置文字内容垂直居中
searchBar.contentVerticalAlignment=UIControlContentVerticalAlignmentCenter;
//设置左边的放大镜
UIImageView *leftView=[[UIImageView alloc]init];
leftView.image=[UIImage imageWithName:@"searchbar_textfield_search_icon"];
searchBar.leftView=leftView;
//添加到导航栏中
self.navigationItem.titleView=searchBar;
添加之后,看不到放大镜?
解决方法,这里需要设置两个属性:
(1)设置leftView的size
(2)设置leftView的leftViewMode属性,因为leftViewMode默认情况下为永远不显示。
(3)调整距离
设置leftView的内容居中,让放大镜距离搜索框左边有一定的间距
contentMode=UIViewContentModeCenter
实现代码:
#import "YYDiscoverViewController.h"
@interface YYDiscoverViewController ()
@end
@implementation YYDiscoverViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//在导航栏按钮上,添加一个搜索框
/*第一种方案
UISearchBar *bar=[[UISearchBar alloc]init];
//设置bar的frame
bar.frame=CGRectMake(0, 0, 300, 35);
bar.backgroundImage=[UIImage resizedImage:@"searchbar_textfield_background"];
self.navigationItem.titleView=bar;
*/
/*第二种方案
//使用UISearchBar
UISearchBar *bar=[[UISearchBar alloc]init];
//设置bar的frame
bar.frame=CGRectMake(0, 0, 300, 35);
bar.backgroundImage=[UIImage resizedImage:@"searchbar_textfield_background"];
self.navigationItem.titleView=bar;
*/
//第三种方案
UITextField *searchBar=[[UITextField alloc]init];
//设置frmae
searchBar.width=300;
searchBar.height=35;
//设置背景图片
searchBar.background=[UIImage resizedImage:@"searchbar_textfield_background"];
// searchBar.textAlignment=NSTextAlignmentCenter;//说明:这是设置文字水平居中
//设置文字内容垂直居中
searchBar.contentVerticalAlignment=UIControlContentVerticalAlignmentCenter;
//设置左边的放大镜
UIImageView *leftView=[[UIImageView alloc]init];
leftView.image=[UIImage imageWithName:@"searchbar_textfield_search_icon"];
searchBar.leftView=leftView;
//设置leftView的frame
leftView.width=40;
leftView.height=35;
//设置leftViewMode
searchBar.leftViewMode=UITextFieldViewModeAlways;
//设置放大镜距离左边的间距,设置leftView的内容居中
leftView.contentMode=UIViewContentModeCenter;
//添加到导航栏中
self.navigationItem.titleView=searchBar;
}
@end
实现效果:
补充:点击清除掉搜索框中的所有内容
设置右边永远显示清除按钮(马桶原理)
clearButtonMode=UITextFieldViewModeALways