自定義UISearchBar外觀

本文轉載至 http://www.jianshu.com/p/66b5b777f5dc

最近，在項目過程中遇到要自定義SearchBar的外觀，雖然自己覺得用系統預設的外觀就行了，不過UI設計師要求不用系統的預設樣式，要跟app主題保持

一緻。

圖1：設計效果圖

從上圖可以看出，我們要做的UISearchBar要有圓角，邊框顔色，取消按鈕顔色，背景透明等等。

開始以為可能要自己寫一個自定義的UISearchBar控件了，後面研究了一番，發現可以設定系統UISearchBar屬性來更改，便把經驗記錄下來。

首先，我們看下系統預設的SearchBar的樣式，離我們的目标樣式确實相差很大, 後面我會一步一步詳細說明做成我們的目标樣式。

圖2：UISearchBar預設樣式

1. 設定背景色

我以白色的背景色為例，下面看看代碼：

//1. 設定背景顔色
    //設定背景圖是為了去掉上下黑線
    self.customSearchBar.backgroundImage = [[UIImage alloc] init];
    // 設定SearchBar的顔色主題為白色
    self.customSearchBar.barTintColor = [UIColor whiteColor];

圖3：設定SearchBar背景色為白色

2. 設定邊框顔色和圓角

//2. 設定圓角和邊框顔色
    UITextField *searchField = [self.customSearchBar valueForKey:@"searchField"];
    if (searchField) {
        [searchField setBackgroundColor:[UIColor whiteColor]];
        searchField.layer.cornerRadius = 14.0f;
        searchField.layer.borderColor = [UIColor colorWithRed:247/255.0 green:75/255.0 blue:31/255.0 alpha:1].CGColor;
        searchField.layer.borderWidth = 1;
        searchField.layer.masksToBounds = YES;
    }

這段代碼有個特别的地方就是通過KVC獲得到UISearchBar的私有變量

searchField（類型為UITextField），設定SearchBar的邊框顔色和圓角實際上也就變成了設定searchField的邊框顔色和圓角，你可以試試直接設定SearchBar.layer.borderColor和cornerRadius，會發現這樣做是有問題的。

圖4：設定邊框顔色和圓角

嗯，離預期效果越來越近了，有木有！

3. 設定按鈕（取消按鈕）的文字和文字顔色

//3. 設定按鈕文字和顔色
    [self.customSearchBar fm_setCancelButtonTitle:@"取消"];
    self.customSearchBar.tintColor = [UIColor colorWithRed:86/255.0 green:179/255.0 blue:11/255.0 alpha:1];
    //修正光标顔色
    [searchField setTintColor:[UIColor blackColor]];

//其中fm_setCancelButtonTitle是我寫的UISearchBar一個分類的方法
- (void)fm_setCancelButtonTitle:(NSString *)title {
    if (IS_IOS9) {
        [[UIBarButtonItem appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTitle:title];
    }else {
        [[UIBarButtonItem appearanceWhenContainedIn:[UISearchBar class], nil] setTitle:title];
    }
}

圖5：設定按鈕文字和顔色

需要特别注意的是設定searchBar的tintColor會使輸入框的光标顔色改變，可以通過設定searchField的tintColor來修正。

4. 設定輸入框的文字顔色和字型

//4. 設定輸入框文字顔色和字型
    [self.customSearchBar fm_setTextColor:[UIColor blackColor]];
    [self.customSearchBar fm_setTextFont:[UIFont systemFontOfSize:14]];

//下面兩個方法是UISearchBar分類代碼
- (void)fm_setTextColor:(UIColor *)textColor {
    if (IS_IOS9) {
        [UITextField appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]].textColor = textColor;
    }else {
        [[UITextField appearanceWhenContainedIn:[UISearchBar class], nil] setTextColor:textColor];
    }
}

- (void)fm_setCancelButtonTitle:(NSString *)title {
    if (IS_IOS9) {
        [[UIBarButtonItem appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTitle:title];
    }else {
        [[UIBarButtonItem appearanceWhenContainedIn:[UISearchBar class], nil] setTitle:title];
    }
}

圖6：最終對比效果圖

5. 如何設定搜尋圖示

下面評論中有簡友問我怎麼更改預設的搜尋圖示，我查了下UISearchBar的API，發現有方法可以更改的。

//5. 設定搜尋Icon
    [self.customSearchBar setImage:[UIImage imageNamed:@"Search_Icon"]
                  forSearchBarIcon:UISearchBarIconSearch
                             state:UIControlStateNormal];

為了跟系統預設Icon的有個明顯的對比，我特殊找了張綠色的搜尋Icon，效果見下圖：

設定搜尋Icon.png

Tips: 還可以設定其他的Icon（如清除按鈕圖示），也是用上面的方法，具體要設定什麼，可以去看看UISearchBarIcon這個枚舉。

最後，介紹下QQ的搜尋樣式的實作

圖7：類似QQ搜尋框樣式

很簡單，在storyboard中設定searchBar的Bar Style為Minimal，或者用代碼設定：

//設定類似QQ搜尋框
    self.minimalSearchBar.searchBarStyle = UISearchBarStyleMinimal;

完整代碼在這裡。