[TIMOB-1689] SearchBar doesn't correctly show background image
| GitHub Issue | n/a |
|---|---|
| Type | Bug |
| Priority | Medium |
| Status | Closed |
| Resolution | Fixed |
| Resolution Date | 2011-10-27T15:42:31.000+0000 |
| Affected Version/s | Release 1.7.1 |
| Fix Version/s | Sprint 2011-32, Release 1.8.0 |
| Components | iOS |
| Labels | n/a |
| Reporter | Dawson Toth |
| Assignee | Blain Hamon |
| Created | 2011-04-15T02:59:26.000+0000 |
| Updated | 2011-11-16T14:21:01.000+0000 |
Description
Based on the official Titanium Mobile documentation the
SearchBar component can have a background image but, right now in
the 1.4.0 version this property is ignored.
For coherence with the rest of the API i think it's important to
implement the barImage property just like in the Window object, so
we can completely customize the UI.
I believe the documentation is wrong, and we can't really add backgroundImage etc to the TiSearchBar. It's a light wrapper around the UISearchBar. What we could do is add a special case for when you set the barColor to "transparent" to get rid of the gradient. That would free you up to place a view behind the search bar, and customize it however you like. That would actually help out quite a few customers, and it would keep good consistency with Android. What do you think, Reggie? Something like this:
... -(void)setBarColor_:(id)value { UISearchBar *search = [self searchBar]; if ([value isEqualToString: @"transparent"]) { [search setBarStyle:UIBarStyleBlack]; [search setTranslucent:YES]; [[search.subviews objectAtIndex:0] removeFromSuperview]; } else { TiColor * newBarColor = [TiUtils colorValue:value]; [search setBarStyle:[TiUtils barStyleForColor:newBarColor]]; [search setTintColor:[TiUtils barColorForColor:newBarColor]]; [search setTranslucent:[TiUtils barTranslucencyForColor:newBarColor]]; } } ...We have a pro customer interested in this now.
Question: As it is, when you do transparent, you do have the transparent black search field that you'd get natively. Wouldn't this new custom behavior break apps of other customers using this?
@Blain: Yup, good point. So maybe some other string would work here? What about "none"?
I did some R&D, and I found no combo that got better than the black translucent you see currently for 'transparent'. Worse, removing the subview index 0 could lead to some oddities. (IE, what if it's been already removed? What if searchBar changes this undocumented structure in the next release? Would this lead to requests to support 'none' elsewhere?) HOWEVER, the primary issue was that the customer couldn't customize the UI. We already have a property that's supposed to work, called backgroundImage, that there's a precedent for. Were the backgroundImage be properly placed over the default bar graphic but under the text field and buttons, that should solve the need. I have a working code that does that ready to commit/push. Sound good?
Tested On: Mac OSX Lion TiMob: 1.8.0v20110819142548 TiStud: 1.0.4.201108101535 Devices: iPhone4 version 4.2.10 iPad2 version 4.3.5 iPod 3
So can we have a searchbar with transparent background now?
Hello setting the searchbar to barColor 'transparent' still gives the gradient background ios 5.0 1.80 beta do I have to make specific other changes to get the searchbar transparent so background view from behind searchbar is visible? thanks
@Ben S and @Steve Course: Setting barColor to transparent won't give you a transparent background. The gradient background image will always be there. But the backgroundImage property works properly now so that you can overlay an image on top of it. It isn't transparency, but it's what we can offer. If that doesn't work, you need to work on creating your own search bar (through the creative usage of text fields, buttons, or whatever else you can think of). This is what Apple gives us to work with.