[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;
}