Details
Low
Description
A couple of not so clean effects when focussing and blurring a searchbar. Since I think they are all related I will only create a single issue for them.
1. When you focus a searchbar (e.g. in a listview) for the first time a thin 2-3 pixel gray bottom border appears below the search bar, followed by a bit of white and then the gray results view. (Might also be a white border over the gray results view?)
2. When you blur a search bar and focus it again a full black border appears above the search bar. Now the gray border mentioned in point 1 touches the results view so the white bar is no longer visible.
3. Because of these borders it looks like the searchbar is sort of dropped down a bit when blurring. Hard to explain, watch the 15s video...
I have attached a video showing the behaviour. The code is just a plain listview with a searchbar. I have lowered the listview a bit so you can see the top border issue better.
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
|
Titanium.UI.setBackgroundColor('#000');
|
|
|
// create tab group
|
var tabGroup = Titanium.UI.createTabGroup();
|
|
|
|
|
//
|
// create base UI tab and root window
|
//
|
var win1 = Titanium.UI.createWindow({
|
title:'Tab 1',
|
backgroundColor:'#fff'
|
});
|
var tab1 = Titanium.UI.createTab({
|
icon:'KS_nav_views.png',
|
title:'Tab 1',
|
window:win1
|
});
|
|
|
var search = Ti.UI.createSearchBar({
|
barColor: '#FFFFFF',
|
borderColor: 'white'
|
});
|
search.addEventListener('cancel', function() {
|
search.blur();
|
});
|
|
|
var listView = Ti.UI.createListView({
|
searchView: search,
|
top: 10
|
});
|
|
|
var sections = [];
|
|
var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'});
|
var fruitDataSet = [
|
{properties: { title: 'Apple'}},
|
{properties: { title: 'Banana'}},
|
];
|
fruitSection.setItems(fruitDataSet);
|
sections.push(fruitSection);
|
|
var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables'});
|
var vegDataSet = [
|
{properties: { title: 'Carrots'}},
|
{properties: { title: 'Potatoes'}},
|
];
|
vegSection.setItems(vegDataSet);
|
sections.push(vegSection);
|
|
listView.sections = sections;
|
|
|
win1.add(listView);
|
|
|
//
|
// create controls tab and root window
|
//
|
var win2 = Titanium.UI.createWindow({
|
title:'Tab 2',
|
backgroundColor:'#fff'
|
});
|
var tab2 = Titanium.UI.createTab({
|
icon:'KS_nav_ui.png',
|
title:'Tab 2',
|
window:win2
|
});
|
|
|
var label2 = Titanium.UI.createLabel({
|
color:'#999',
|
text:'I am Window 2',
|
font:{fontSize:20,fontFamily:'Helvetica Neue'},
|
textAlign:'center',
|
width:'auto'
|
});
|
|
|
win2.add(label2);
|
|
|
|
|
|
|
//
|
// add tabs
|
//
|
tabGroup.addTab(tab1);
|
tabGroup.addTab(tab2);
|
|
|
|
|
// open tab group
|
tabGroup.open();
|