6月
17
17
UISearchBarの背景色を変える方法
@takashingsです。
新しいアプリを作っているのですが、そのUIでUISearchBarの背景色を変えたくて、いろいろと試行錯誤。
やっと変える方法を見つけたので、備忘録を含めてその方法を書きたいと思います。
ちなみに、iOS7以降の方法です。
(個人的にiOS6以前のものは特に気にしないことにしています)
具体的にやりたいことはこういうものです。
イメージしているのは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の色に合わせています。
ユーザー的には検索バーにフォーカスが当たっているという時にはキーボードが出ているのでわかっているとは思うのですが、検索バーをタップして、「検索バーの色が変わった→文字を入力できる」という感じで、反応があるというのがわかりやすいと思うので、一工夫的なところで実装するというのはどうでしょうか。