iOS 自定义searchBar(搜索框)

在项目中使用到搜索框,我们首先想到的是使用系统控件UISearchBar,但是UISearchBar有时候达不到想要的效果,这个时候就需要自定义searchBar了。

搜索框,顾名思义在框中输入关键字查找内容,这里可以替代UISearchBar的可选控件有两个:UITextField和UITextView。

在下面的自定义搜索框中选择以UITextField为例,废话不多说,直接上代码:

MTSearchBar

.h文件

#import 

@interface MTSearchBar : UITextField

+ (instancetype)searchBar;

@end

.m文件

#import "MTSearchBar.h"

@implementation MTSearchBar

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.size = CGSizeMake(300, 30);
        self.font = [UIFont systemFontOfSize:15];
        self.placeholder = @"请输入查询条件";
        // 提前在Xcode上设置图片中间拉伸
        self.background = [UIImage imageNamed:@"searchbar_textfield_background"];
        
        // 通过init初始化的控件大多都没有尺寸
        UIImageView *searchIcon = [[UIImageView alloc] init];
        searchIcon.image = [UIImage imageNamed:@"searchbar_textfield_search_icon"];
        // contentMode:default is UIViewContentModeScaleToFill,要设置为UIViewContentModeCenter:使图片居中,防止图片填充整个imageView
        searchIcon.contentMode = UIViewContentModeCenter;
        searchIcon.size = CGSizeMake(30, 30);
        
        self.leftView = searchIcon;
        self.leftViewMode = UITextFieldViewModeAlways;
    }
    return self;
}

+(instancetype)searchBar
{
    return [[self alloc] init];
}


@end

添加searchBar到navigationBar

- (void)viewDidLoad {
    [super viewDidLoad];

    //设置navigationBar的中间为searchBar
    self.navigationItem.titleView = [MTSearchBar searchBar];
}


模拟器运行效果图:


iOS 自定义searchBar(搜索框)_第1张图片

上面的示例代码仅供参考,更多功能请自定义实现!

参考Demo下载:http://pan.baidu.com/s/1pLvNDwv

你可能感兴趣的:(iOS 自定义searchBar(搜索框))