ios开发搜索框

一、简单说明

在“发现”控制器的导航栏中间放置一个搜索框。

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