[iOS微博项目 - 1.2] - 导航栏搜索框

A.导航栏搜索框

1.需求

• 在“发现”页面，在顶部导航栏NavigationBar上添加一个搜索框
• 左端带有“放大镜”图标

github: https://github.com/hellovoidworld/HVWWeibo

 

 

2.思路

• 使用UISearchBar: 简单易用，但是样式死板不能定制（此处UISearchBar的背景色容易和导航栏的背景色混淆），而且在iOS6和iOS7上会产生不同的样式。
• 使用UITextField创建：继承或者扩展UITextField，设置背景图和左端图标

 

==>由于是一个自定义的“新”控件，这里我们使用继承UITextField来实现

 

3.实现

• 创建一个继承UITextField的类，这里命名为HVWSearchBar
• 重写initWithFrame方法，用来初始化搜索框的图标、背景图片、图标和文字的对称方式、清除按钮的显示
• 在需要的控制器上实例化HVWSearchBar，赋予其位置尺寸信息，添加到NavigationItem的titleView上

 

//
//  HVWSearchBar.m
//  HVWWeibo
//
//  Created by hellovoidworld on 15/2/2.
//  Copyright (c) 2015年 hellovoidworld. All rights reserved.
//

#import "HVWSearchBar.h"

@implementation HVWSearchBar

/** 使用代码创建控件的时候，调用init的时候会调用此方法 */
- (instancetype)initWithFrame:(CGRect)frame {
    // 由于是重写方法，记得一定要先调用父类初始化方法
    if (self = [super initWithFrame:frame]) {
        // 设置内容垂直居中
        [self setContentVerticalAlignment:UIControlContentVerticalAlignmentCenter];
       
        // 设置背景图片（拉伸图片）
        self.background = [UIImage resizedImage:@"searchbar_textfield_background"];
       
        // 添加图标“放大镜“
        UIImageView *searchBarIconView = [[UIImageView alloc] init];
        searchBarIconView.image = [UIImage imageNamed:@"searchbar_textfield_search_icon"];
       
        // 调整”放大镜”两边间距，view显示为正方形
        searchBarIconView.width = searchBarIconView.image.size.width + 10;
        searchBarIconView.height = searchBarIconView.width;
       
        // 设置”放大镜“在imageView中居中
        [searchBarIconView setContentMode:UIViewContentModeCenter];
       
        // 设置textField的左部控件（”放大镜“所属的imageView）显示
        [self setLeftViewMode:UITextFieldViewModeAlways];
       
        // 设置图标到搜索栏
        self.leftView = searchBarIconView;
       
        // 显示清除按钮
        [self setClearButtonMode:UITextFieldViewModeAlways];
    }
   
    return self;
}

@end

 

实例化一个HVWSearchBar：

- (void)viewDidLoad {
    [super viewDidLoad];
   
    // 添加搜索框
    HVWSearchBar *searchBar = [[HVWSearchBar alloc] init];
    searchBar.frame = CGRectMake(0, 0, 300, 40);
    self.navigationItem.titleView = searchBar;
}