[TIMOB-16503] iOS: Allow toolbar to extend underneath statusbar on iOS 7

GitHub Issue	n/a
Type	New Feature
Priority	n/a
Status	Closed
Resolution	Fixed
Resolution Date	2014-02-28T19:43:25.000+0000
Affected Version/s	n/a
Fix Version/s	2014 Sprint 04, 2014 Sprint 04 API, Release 3.3.0
Components	iOS
Labels	extendedges, module_toolbar, navigationbar, navigationgroup, navigationwindow, qe-testadded
Reporter	Fokke Zandbergen
Assignee	Vishal Duggal
Created	2014-02-23T19:18:27.000+0000
Updated	2014-04-23T09:55:00.000+0000

Description

Since the new Window architecture in 3.2.0 it is not possible anymore for a window to have a simple navigation bar. You either have to use a NavigationWindow or a Window + Toolbar. The first feels over-done for just a navigation bar, but the second one has a major short-coming that is pretty much a blocker as well. Take the following app.js:

var win = Ti.UI.createWindow({
  backgroundColor: 'red',
  extendEdges: [Ti.UI.EXTEND_EDGE_ALL]
});
win.add(Ti.UI.iOS.createToolbar({
  items: [Ti.UI.createButton({
    systemButton: Titanium.UI.iPhone.SystemButton.CAMERA,
  })],
  top: 0, // 20 leaves a gap
  height: 64, // doesn't work
  borderTop: false,
  borderBottom: true
}));
win.open();

What we want is for the Toolbar to extend itself to the area under the status bar like the NavigationWindow does and the old window navigation bar had, so they can have a uniform color and more importantly, share the blurred effect enabled by extendEdges. However, when I set top: 0, the first 20 of the 44 points of the toolbar are positioned under the statusbar, even if I try to set the height to 64. And when I set top: 20 the red window is visible in all its glory behind the status bar like demonstrated in the attached screenshot. I could position another view in that area, but there's no way to give it the same blur-effect the toolbar has. It would be nice to have an option to have the Toolbar extend to the area under the statusbar, which would provide a really good and light alternative for the good-old navigation bar.

Attachments

File	Date	Size
chip.jpg	2014-02-25T22:00:08.000+0000	38857
darkstripes_bg.jpg	2014-02-25T22:00:08.000+0000	80497
iOS-simulatorschermafbeelding 23 feb. 2014 20.23.30.png	2014-02-23T19:23:43.000+0000	18905
iOS Simulator Screen shot Feb 25, 2014, 2.01.30 PM.png	2014-02-25T22:02:48.000+0000	77960
iOS Simulator Screen shot Feb 25, 2014, 2.01.51 PM.png	2014-02-25T22:02:48.000+0000	67788

Comments

Vishal Duggal 2014-02-25

Test case

   var send = Titanium.UI.createButton({
       title: 'Send',
       style: Titanium.UI.iPhone.SystemButtonStyle.DONE,
   });
   
   var camera = Titanium.UI.createButton({
       systemButton: Titanium.UI.iPhone.SystemButton.CAMERA,
   });
   
   var cancel = Titanium.UI.createButton({
       systemButton: Titanium.UI.iPhone.SystemButton.CANCEL
   });
   
   var bookmark = Titanium.UI.createButton({
       systemButton: Titanium.UI.iPhone.SystemButton.BOOKMARKS
   });
   
   flexSpace = Titanium.UI.createButton({
       systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
   });
   
   var tb1 = Titanium.UI.iOS.createToolbar({
       items:[send, flexSpace, camera],
       top:20,
       backgroundImage:'images/chip.jpg',
       extendBackground:true
   }); 
   
   var tb2 = Titanium.UI.iOS.createToolbar({
       items:[bookmark, flexSpace, cancel],
       bottom:0,
       backgroundImage:'images/darkstripes_bg.jpg',
   }); 
   
   var label = Ti.UI.createLabel({text:'SEE TOOLBARS !'});
   
   var win = Ti.UI.createWindow({backgroundColor:'white',orientationModes:[1,2,3,4]});
   win.add(tb1);
   win.add(tb2);
   win.add(label);
   win.open();

Vishal Duggal 2014-02-25

Pull pending against master https://github.com/appcelerator/titanium_mobile/pull/5384
Vishal Duggal 2014-02-25

Attaching Resources for testcase
Vishal Duggal 2014-02-25

Attaching screenshots
Fokke Zandbergen 2014-02-26

Nicely done [~vduggal]! The default - non-image translucent/blurred background - works as well?
Vishal Duggal 2014-02-26

@[~fokke] Should work. I put the sample with background image since the background image rendering was changed for Toolbars on iOS7 as part of this PR.
Pragya Rastogi 2014-04-23

Verified the fix with: OSX: 10.9.2 Xcode: 5.1.1 Studio - 3.3.0.201404211130 SDK - 3.3.0.v20140422163054 acs-1.0.14 alloy-1.4.0-dev npm-1.3.2 titanium-3.3.0-dev titanium-code-processor-1.1.1-beta1 Device: iPhone 4s (7.1)

JSON Source