最近,在項目過程中遇到要自定義SearchBar的外觀,雖然自己覺得用系統默認的外觀就行了,不過UI設計師要求不用系統的默認樣式,要跟app主題保持一致
從上圖可以看出,我們要做的UISearchBar要有圓角,邊框顏色,取消按鈕顏色,背景透明等等。
開始以為可能要自己寫一個自定義的UISearchBar控件了,后面研究了一番,發現可以設定系統UISearchBar屬性來更改,便把經驗記錄下來。
首先,我們看下系統默認的SearchBar的樣式,離我們的目標樣式確實相差很大, 后面我會一步一步詳細說明做成我們的目標樣式。
1. 設置背景色
我以白色的背景色為例,下面看看代碼:
//1\. 設置背景顏色
//設置背景圖是為了去掉上下黑線
self.customSearchBar.backgroundImage = [[UIImage alloc] init];
// 設置SearchBar的顏色主題為白色
self.customSearchBar.barTintColor = [UIColor whiteColor];
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,會發現這樣做是有問題的。
嗯,離預期效果越來越近了,有木有!
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];
}
}
需要特別注意的是設置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];
}
}
5. 如何設置搜索圖標
下面評論中有簡友問我怎么更改默認的搜索圖標,我查了下UISearchBar的API,發現有方法可以更改的。
//5\. 設置搜索Icon
[self.customSearchBar setImage:[UIImage imageNamed:@"Search_Icon"]
forSearchBarIcon:UISearchBarIconSearch
state:UIControlStateNormal];
為了跟系統默認Icon的有個明顯的對比,我特殊找了張綠色的搜索Icon,效果見下圖:
Tips: 還可以設置其他的Icon(如清除按鈕圖標),也是用上面的方法,具體要設置什么,可以去看看UISearchBarIcon這個枚舉。
](https://upload-images.jianshu.io/upload_images/452998-2fb38aaa38a2b351.png?imageMogr2/auto-orient/strip%7CimageView2/2)
從上圖可以看出,我們要做的UISearchBar要有圓角,邊框顏色,取消按鈕顏色,背景透明等等。
開始以為可能要自己寫一個自定義的UISearchBar控件了,后面研究了一番,發現可以設定系統UISearchBar屬性來更改,便把經驗記錄下來。
首先,我們看下系統默認的SearchBar的樣式,離我們的目標樣式確實相差很大, 后面我會一步一步詳細說明做成我們的目標樣式。
1. 設置背景色
我以白色的背景色為例,下面看看代碼:
//1\. 設置背景顏色
//設置背景圖是為了去掉上下黑線
self.customSearchBar.backgroundImage = [[UIImage alloc] init];
// 設置SearchBar的顏色主題為白色
self.customSearchBar.barTintColor = [UIColor whiteColor];
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,會發現這樣做是有問題的。
嗯,離預期效果越來越近了,有木有!
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];
}
}
需要特別注意的是設置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];
}
}
5. 如何設置搜索圖標
下面評論中有簡友問我怎么更改默認的搜索圖標,我查了下UISearchBar的API,發現有方法可以更改的。
//5\. 設置搜索Icon
[self.customSearchBar setImage:[UIImage imageNamed:@"Search_Icon"]
forSearchBarIcon:UISearchBarIconSearch
state:UIControlStateNormal];
為了跟系統默認Icon的有個明顯的對比,我特殊找了張綠色的搜索Icon,效果見下圖:
Tips: 還可以設置其他的Icon(如清除按鈕圖標),也是用上面的方法,具體要設置什么,可以去看看UISearchBarIcon這個枚舉。