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