[TIMOB-15483] iOS: Add ability to hide bottom border in the window bar

GitHub Issue	n/a
Type	New Feature
Priority	Low
Status	Closed
Resolution	Duplicate
Resolution Date	2016-09-24T11:32:47.000+0000
Affected Version/s	Release 3.1.3
Fix Version/s	n/a
Components	iOS
Labels	SupportTeam
Reporter	Matej
Assignee	Hans Knöchel
Created	2013-09-30T21:53:46.000+0000
Updated	2019-01-01T03:12:01.000+0000

Description

New property for window that hide the bottom border in the window bar. So many guys have had problem with that. Is impossible to set up own color or picture, bottom border hampers developers to make nice design. Workaround is use toolbar or own view what is not really good way, especially not if there is long navigation through whole app or more orientation modes. I think every app that is going to have custom-nice design needs to change default navBar/winBar ,so this property is important.

var win1 = Ti.UI.createWindow();

var win2 = Ti.UI.createWindow({
	title: "Title",
    backgroundColor: "#469be0",
    barColor: "#469be0",
    barImage: "bg.png", // backgroundImage in #469be0 color [In this case winBar has to merge window backgroundColor]
});

var nav = Ti.UI.iPhone.createNavigationGroup({
   window: win2
});

win1.add(nav);
win1.open();

Attachments

File	Date	Size
iOS Simulator Screen shot Sep 30, 2013 11.52.02 PM.png	2013-09-30T21:53:46.000+0000	8088

Comments

Matej 2013-10-18

Hi I've looked on iOS7 and it has bottomBorder as well ,but in white color. Is there any chance to expect this property in Ti 3.1.4? That would be great, thank you !http://s13.postimg.org/fi50pdk13/ios7_nav_Bar_bottom_Border.png!
Ingo Muschenetz 2013-10-18

Are you looking to hide it, or to change the color? Any preference?
Matej 2013-10-18

In this situation any preference will help me ,but otherwise is probably better to have some function/property for changing color. If somebody want to hide that border, he can use color: "transparent".
Hans Knöchel 2014-04-18

Is there any solution for this case? A property like "navBarBorderHidden: [true/false]" would be great! A native workaround can be found here: http://stackoverflow.com/questions/19101361/ios7-change-uinavigationbar-border-color
Rodolfo Perottoni 2015-11-12

Please give some attention to this feature! Something so simple shouldn't take 2 years to develop. Come on Appcelerator!
Hans Knöchel 2016-01-17

Hi everyone! After some checking, it is not possible to hide the bottom border natively. There are some workarounds available which deal with setting a barImage instead, that overlays the bottom border. Titanium Mobile already covers that behavior using the barImage in a Ti.UI.Window.

Hans Knöchel 2016-01-24

A simple demonstration is shown below (using [this](http://abload.de/img/dottjz0w.png) 1 x 1px transparent png image):

   var win = Titanium.UI.createWindow({
       backgroundColor: 'red',
       barColor: 'red',
       navTintColor: "#000",
       translucent: false,
       title: "Magic!",
       leftNavButton: Ti.UI.createButton({title: "Left"}),
       rightNavButton: Ti.UI.createButton({title: "Right"}),
   
       barImage: "dot.png",
       hideShadow: true
   });
   
   var nav = Ti.UI.iOS.createNavigationWindow({
       window: win
   });
   
   nav.open();

Michael Gangolf 2016-06-11

very useful tip with the 1px png. How about adding it to the documentation: https://github.com/appcelerator/titanium_mobile/pull/8052 ?
Hans Knöchel 2016-09-24

To keep the QE-process clean, marking it as a duplicate of TIMOB-11876, together with the above code to realize this specific use-case. Thx!
Lee Morris 2017-03-23

Closing ticket as Duplicate with reference to the above comments.
Flavio Bontà 2018-03-23

not working with largeTitleEnabled: true
Matthew Delmarter 2019-01-01

JSON Source