6月
17

UISearchBarの背景色を変える方法

Written by takashings posted on 6月 17, 2014 in Objective-C

Objective c uiserachbar backgroundcolor 01

@takashingsです。

新しいアプリを作っているのですが、そのUIでUISearchBarの背景色を変えたくて、いろいろと試行錯誤。
やっと変える方法を見つけたので、備忘録を含めてその方法を書きたいと思います。

ちなみに、iOS7以降の方法です。
(個人的にiOS6以前のものは特に気にしないことにしています)


具体的にやりたいことはこういうものです。

Objective c uiserachbar backgroundcolor 02

イメージしているのはTweetbot3の検索タブにある検索バーです。

フォーカスが当たっている時には青色になって、
フォーカスが当たっていない時、外れた時には灰色になるというものです。

そもそもなのですが、これでは背景色って変えられないんですよね。

searchBar.backgroundColor = [UIColor redColor];

よくよく調べると、iOS7のUISearchBarにはUITextFieldクラスが含まれているみたい。

ということで、これで変更することができました。

for (UIView *subView in searchBar.subviews) {
	for (UIView *secondSubview in subView.subviews){
		if ([secondSubview isKindOfClass:[UITextField class]]) {
			UITextField *searchBarTextField = (UITextField *)secondSubview;
			// ここで背景色を指定する
			searchBarTextField.backgroundColor = [UIColor redColor];
			break;
		}
	}
}

今回はフォーカスを当たった時とそうでない時に色を変えるので、こんな感じですね。

- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar {
	[self changeUISearchBarBackgroundColor:searchBar color:[UIColor colorWithRed:(10.0f/255.0f) green:(96.0f/255.0f) blue:(254.0f/255.0f) alpha:1.0f]];
}

- (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar {
	[self changeUISearchBarBackgroundColor:searchBar color:[UIColor colorWithRed:(135.0f/255.0f) green:(135.0f/255.0f) blue:(135.0f/255.0f) alpha:1.0f]];
}

- (void)changeUISearchBarBackgroundColor : (UISearchBar *)searchBar color:(UIColor *)color {
	for (UIView *subView in searchBar.subviews) {
		for (UIView *secondSubview in subView.subviews){
			if ([secondSubview isKindOfClass:[UITextField class]]) {
				UITextField *searchBarTextField = (UITextField *)secondSubview;
				searchBarTextField.backgroundColor = color;
				return;
			}
		}
	}
}

これを実装したら、こんな感じに色が変わります。
色はTweetbot3の色に合わせています。

Objective c uiserachbar backgroundcolor 03

ユーザー的には検索バーにフォーカスが当たっているという時にはキーボードが出ているのでわかっているとは思うのですが、検索バーをタップして、「検索バーの色が変わった→文字を入力できる」という感じで、反応があるというのがわかりやすいと思うので、一工夫的なところで実装するというのはどうでしょうか。



この記事をシェアする

  • このエントリーをはてなブックマークに追加