[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 + ;
         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(, , , );
     self.navigationItem.titleView = searchBar;
 }