Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-16471

iOS: Ugly / inconsistent border effects when focussing / blurring searchbar

    Details

    • Story Points:
      1
    • Sprint:
      2016 Sprint 09 SDK

      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();
      

        Attachments

          Activity

            People

            • Assignee:
              hknoechel Hans Knöchel
              Reporter:
              martijnkooij Martijn Kooij
              Reviewer:
              Angel Petkov
            • Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Titanium SDK/CLI <> Titanium Mobile
                  Synced with:
                  TIMOB-18378
                  Sync status:
                  ERROR
                  Last received:
                  Last sent:

                  Git Integration