[TIMOB-15285] iOS7: Translucent Toolbar in Translucent Navigation Group not rendering correctly

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Duplicate
Resolution Date	2014-04-02T19:19:24.000+0000
Affected Version/s	n/a
Fix Version/s	2014 Sprint 07, 2014 Sprint 07 SDK, Release 3.3.0
Components	iOS
Labels	ios7, toolbar, translucent, triage
Reporter	Matthew Delmarter
Assignee	Vishal Duggal
Created	2013-09-16T06:34:45.000+0000
Updated	2017-03-22T22:11:45.000+0000

Description

When adding a Toolbar to a Window Navigation (win.rightNavButton = toolbar), the translucent effects are layering and rendering incorrectly - see the attached screenshot. As far as I know the Toolbar added to the Window navigation bar is the correct way to have multiple icons in the top nav. This method is used by the native apps like Mail / Safari etc. Is there another method I should be using? If not, can this be fixed so that the Toolbar when translucent renders correctly on top of the the already translucent navigation bar.

Attachments

File	Date	Size
Screen Shot 2013-09-19 at 2.55.35 AM.png	2013-09-18T14:56:57.000+0000	11195
toolbar.png	2013-09-16T06:34:45.000+0000	13461

Comments

Ingo Muschenetz 2013-09-16

Can you please add a test case?

Matthew Delmarter 2013-09-18

Test case as requested, with screenshot of output attached:

   var win1 = Ti.UI.createWindow({
   	title: 'Test',
   	//includeOpaqueBars: true,
   	extendEdges: [1,4],
   	navBarTintColor: '#333',
   	backgroundColor:'white'
   });
   
   var btnBookmarks = Ti.UI.createButton({	
   	systemButton: Ti.UI.iPhone.SystemButton.BOOKMARKS,
   });
   var btnAction = Ti.UI.createButton({
   	systemButton: Ti.UI.iPhone.SystemButton.ACTION
   });	
   var toolbar = Ti.UI.iOS.createToolbar({
   	items:[btnBookmarks, btnAction],
   	top:0,
   	width: 265,
   	right:0
   });	
   win1.rightNavButton = toolbar;
   
   var button = Ti.UI.createButton({
   	height:44,
   	width:200,
   	title:L('openWindow'),
   	top:20
   });
   win1.add(button);
   
   var win2 = Ti.UI.createWindow({
   	title: 'Test',
   	backgroundColor:'white'
   });
   
   var button = Ti.UI.createButton({
   	height:44,
   	width:200,
   	title:L('openWindow'),
   	top:20
   });
   win2.add(button);
   
   var box1 = Ti.UI.createView({
   	height:100,
   	width:720,
   	left: 15,
   	backgroundColor: 'red',
   	title:L('openWindow'),
   	top:0
   });
   win1.add(box1);
   
   var box2 = Ti.UI.createView({
   	height:100,
   	width:100,
   	left: 130,
   	backgroundColor: 'red',
   	title:L('openWindow'),
   	top:450
   });
   win1.add(box2);
   
   //create module instance
   var tabs = Ti.UI.createTabGroup({
   	styleCSS: 'pixate:true',
   	translucent: true
   });
   
   var tab1 = Ti.UI.createTab({
   	title: L('home'),
   	icon: '/images/KS_nav_ui.png',
   	window: win1
   });
   
   var tab2 = Ti.UI.createTab({
   	title: L('settings'),
   	icon: '/images/KS_nav_views.png',
   	window: win2
   });
   
   tabs.addTab(tab1);
   tabs.addTab(tab2);
   
   tabs.open();

Pier Paolo Ramon 2013-10-18

Isn't there a workaround at least? This is very problematic, given the (almost) mandatory translucency in iOS7.
Ingo Muschenetz 2013-10-18

[~vduggal], thoughts?
Pier Paolo Ramon 2013-10-18

Actually the problem lies in the fact that you have no support for [controller.navigationItem setRightBarButtonItems:animated:] as the way to set more than one element on the {right,left}Button area.
Matthew Delmarter 2013-10-18

@Pier I think you hit the nail on the head there. If you search the Q&A forums, users have been struggling since version 1.0 with ways to implement multiple buttons in the navigation bar - and have had to fall back on hacks using Toolbars and ButtonBars. This has cost me tens of hours trying to work around this limitation and still make my apps look "native" down to the pixel on both iPad and iPhone. The ability to add multiple buttons should be a basic feature - enabling us to easily mimic default app layouts like Mail etc. Using a Toolbar for example sounds like a quick "hack-around" but in reality the Toolbar is indented too far in from the left / right, so the buttons added are not sitting in quite the right place. iOS 7 has just made this Titanium limitation more noticeable with the transparency issue. It would be really great to see support for multiple elements in the right/left button areas. Finally. PS: Is there a ticket open about this? I will have a quick look...
Pier Paolo Ramon 2013-10-18

In my company we use a (custom made) native module which simply overrides the setRightNavButton of TiUIWindowProxy with an Objective-C categroy, so that when you set a toolbar it simply takes out the items from it and uses them for the rightNavButton. Sounds interesting? :)
Matthew Delmarter 2013-10-18

Yes very! Tell me more! matthew [at] imattsolutions [dot] com
Pier Paolo Ramon 2013-12-24

To everyone looking for the ability to add more than one item in the right nav area, we're pleased to announce this small yet useful module: https://github.com/smclab/TiNavItems
Vishal Duggal 2014-04-02

The fix for the issue here is to expose the leftBarButtonItems and rightBarButtonItems properties for navigationItem. That has been done as part of TIMOB-16094. Once the PR is merged in you should be able to set multiple laft and right nav items using the Ti.UI.Window.leftNavButtons and Ti.UI.Window.rightNavButtons properties. For the test case attached here you could do something like win1.rightNavButtons = [btnBookmarks, btnAction];
Lee Morris 2017-03-22

Closing ticket as duplicate and links to the related ticket have been provided above.

JSON Source