Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-15191] iOS7: Color and Translucency of Window default Navigation and TabGroups are wrong

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionInvalid
Resolution Date2013-09-16T05:46:53.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsiOS
Labelsios7, translucency, triage, window
ReporterMatthew Delmarter
AssigneeShak Hossain
Created2013-09-13T16:51:31.000+0000
Updated2017-03-22T21:14:23.000+0000

Description

By default the level of translucency of the tabGroup and top window navigation do not match the default Apps from Apple, or what Xcode 5 natively builds in iOS 7, or what the Apple docs show as the default UI here: https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/TransitionGuide/index.html The tabGroup and top navigation are too grey in Titanium, and the level of translucency seems less than what the default should be. Perhaps it is simple the default color (being too grey) that is the problem, and the translucency will come right if the color does. Please see attached screenshot with the Apple default on the left, and what Titanium builds on the right. 
var win1 = Ti.UI.createWindow({
	title: 'Test',
	backgroundColor:'white'
});

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:100,
	left: 15,
	backgroundColor: 'red',
	title:L('openWindow'),
	top:300
});
win1.add(box1);

var box2 = Ti.UI.createView({
	height:100,
	width:100,
	left: 130,
	backgroundColor: 'blue',
	title:L('openWindow'),
	top:300
});
win1.add(box2);

var tabs = Ti.UI.createTabGroup();

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();
Can this please be fixed as part of 3.1.3?

Attachments

FileDateSize
ios7 window comparison.png2013-09-13T16:51:31.000+0000116652
iOS Simulator Screen shot 14.09.2013 8.50.45 AM.png2013-09-13T20:52:07.000+000030116

Comments

  1. Matthew Delmarter 2013-09-13

    OK I worked out that this is not a bug in Titanium. It is all about the window being set to includeOpaqueBars = true and extendEdges = [1,4]. (By the way, that extendEdges settings needs way better documentation). However I am not sure this hasn't just led me to a different issue. In the initial screenshot of the Apple window above, the tableView starts scrolling from beneath the navigation group, i.e. you can see the "A" header - but as you start scrolling it slides UNDER the navigation group, so that it is now viewable through the slightly transparent navigation group. I have no idea how to replicate this behaviour in Titanium, and am not sure it is supported? Here is the working code that shows the extendEdges in action: 
       var win1 = Ti.UI.createWindow({
   	title: 'Test',
   	includeOpaqueBars: true,
   	extendEdges: [1,4],
   	backgroundColor:'white'
   });
   
   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:100,
   	left: 15,
   	backgroundColor: 'red',
   	title:L('openWindow'),
   	top:-50
   });
   win1.add(box1);
   
   var box2 = Ti.UI.createView({
   	height:100,
   	width:100,
   	left: 130,
   	backgroundColor: 'blue',
   	title:L('openWindow'),
   	top:300
   });
   win1.add(box2);
   
   //create module instance
   var tabs = Ti.UI.createTabGroup();
   
   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();
  2. Matthew Delmarter 2013-09-13

    Modified code with extendEdges now matches Apples look caused by content UNDER the navigation bar and tab group.
  3. Matthew Delmarter 2013-09-13

    I found the documentation to support the new problem of the extendEdges not allowing a tableView to start scrolling in a viewable position, and then to slide underneath the top navigation group: https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/TransitionGuide/AppearanceCustomization.html#//apple_ref/doc/uid/TP40013174-CH15-SW1 Sections on automaticallyAdjustsScrollViewInsets and topLayoutGuide, bottomLayoutGuide.
  4. Vishal Duggal 2013-09-16

    Regarding the "too gray" section of the bug, it is the background color of the Root View (black by default) showing through. To overcome this set either Ti.UI.backgroundColor or tabGroup.backgroundColor to white. Regarding making the tableView slide underneath the navigation bar, there are multiple solutions The easiest one would be of course to add a dummy headerView to the tableView of height 64 (44 for navBar and 20 for statusBar). In landscape mode set height to 52 on the iPhone idiom. (iPad has navBar height of 44 in both portrait and landscape). You could also play with the contentInsets on the tableView and set an appropriate inset for the top (64 or 52 based on orientation and idiom combo). Both these solutions require ofcourse that you set the window to extend its layout edges. If all you want to do is slide underneath the navigation bar then you only need to set extendEdges = [Ti.UI.EXTEND_EDGE_TOP]. Assuming you did set the navBar to be non translucent you would also have to set includeOpaqueBars to true. If you do extend the bottom edge of the window, make sure that the last row can be scrolled into an interactable area by either either setting a dummy footer view on the table or appropriate content insets for the bottom.
  5. Vishal Duggal 2013-09-16

    Marking bug as invalid. Explanations and workarounds in comments below
  6. Lee Morris 2017-03-22

    Closing ticket as invalid with reference to the above comments.

JSON Source