[TIMOB-16094] iOS 7: Allow users to set negative spacer in Window NavButton

GitHub Issue	n/a
Type	New Feature
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2014-04-08T21:08:15.000+0000
Affected Version/s	Release 3.1.3, Release 3.2.0
Fix Version/s	2014 Sprint 07, 2014 Sprint 07 SDK, Release 3.3.0
Components	iOS
Labels	module_navwindow, qe-closed-3.3.0, qe-testadded, supportTeam
Reporter	Marco Cota
Assignee	Vishal Duggal
Created	2013-12-27T16:18:23.000+0000
Updated	2014-08-05T16:02:38.000+0000

Description

Request

Since iOS 7 the left and right space in the NavButtons has been increased and this is causing that some apps have issues with the look and feel of their app, would be useful to the developers to be able to set this space in order to avoid issues with their design.

Native Workaround

There are some workaround in obj-C that allow the developer to play with negative spacers or imageInsets that allow them to preserve the original design. Negative spacer http://stackoverflow.com/questions/18914812/how-to-edit-empty-spaces-of-left-right-uibarbuttonitem-in-uinavigationbar-in-io

UIBarButtonItem *negativeSpacer = [[UIBarButtonItem alloc]
                                       initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace
                                  target:nil action:nil];
negativeSpacer.width = -16;// it was -6 in iOS 6
[self.navigationItem setLeftBarButtonItems:[NSArray arrayWithObjects:negativeSpacer, requriedButton/*this will be the button which u actually need*/, nil] animated:NO];

imageInsets http://stackoverflow.com/questions/18861201/uibarbuttonitem-with-custom-view-not-properly-aligned-on-ios-7-when-used-as-left

// Add your barButtonItem with custom image as the following 
UIBarButtonItem *barButton = [[UIBarButtonItem alloc] initWithTitle:@"" style:UIBarButtonItemStyleBordered target:self action:@selector(categoryButtonPressed)];
// set your custom image
[barButton setImage:categoryImage];
// finally do the magic
barButton.imageInsets = UIEdgeInsetsMake(0.0, -20, 0, 0);

Comments

Vishal Duggal 2014-04-01

Exposed new properties leftNavButtons and rightNavButtons on Ti.UI.Window Test case

   function win_nav(_args) {
       // current window
       var win = Titanium.UI.createWindow({
           title:_args.title
       });
       
       //
       // TOGGLE TITLE
       //
       var b1 = Titanium.UI.createButton({
           title:'Title',
           height:40,
           width:145,
           top:10,
           left:10
       });
       
       b1.addEventListener('click', function()
       {
           if (win.title != 'New Title')
           {
               win.title = 'New Title';
           }
           else
           {
               win.title = 'Window NavBar';
           }
       });
       
       win.add(b1);
       
       //
       // TOGGLE TITLE PROMPT
       //
       var b2 = Titanium.UI.createButton({
           title:'Title Prompt',
           height:40,
           width:145,
           top:10,
           right:10
       });
       
       b2.addEventListener('click', function()
       {
           if (win.titlePrompt != 'Title Prompt')
           {
               win.titlePrompt = 'Title Prompt';
           }
           else
           {
               win.titlePrompt = null;
           }
       });
       
       win.add(b2);
       
       //
       // TOGGLE TITLE IMAGE
       //
       var b3 = Titanium.UI.createButton({
           title:'Title Image',
           height:40,
           width:145,
           top:60,
           left:10
       });
       
       b3.addEventListener('click', function()
       {
           Titanium.API.info('title image ' + win.titleImage);
       
           if (win.titleImage == null)
           {
               win.titleControl = null;
               win.titleImage = '/images/slider_thumb.png';
           }
           else
           {
               win.titleImage = null;
           }
       });
       
       win.add(b3);
       
       //
       // TOGGLE TITLE CONTROL
       //
       var b4 = Titanium.UI.createButton({
           title:'Title Control',
           height:40,
           width:145,
           top:60,
           right:10
       });
       
       var control = false;
       b4.addEventListener('click', function()
       {
           if (!control)
           {
               var sw = Titanium.UI.createSwitch({value:false});
               win.titleControl = sw;
               control = true;
           }
           else
           {
               win.titleControl = null;
               control = false;
           }
       });
       
       win.add(b4);
       
       //
       // TOGGLE NAV BAR VISIBILITY
       //
       var b5 = Titanium.UI.createButton({
           title:'Hide/Show Nav',
           height:40,
           width:145,
           top:110,
           left:10
       });
       var hidden=false;
       b5.addEventListener('click', function()
       {
           if (!hidden)
           {
               win.hideNavBar();
               hidden = true;
           }
           else
           {
               win.showNavBar();
               hidden = false;
           }
       });
       win.add(b5);
       
       //
       // TOGGLE BAR COLOR
       //
       var b6 = Titanium.UI.createButton({
           title:'Bar Color',
           height:40,
           width:145,
           top:110,
           right:10
       });
       
       var barcolor=false;
       b6.addEventListener('click', function()
       {
           if (!barcolor)
           {
               win.barColor = '#336699';
               barcolor = true;
           }
           else
           {
               win.barColor = null;
               barcolor = false;
           }
       });
       
       win.add(b6);
       
       //
       // TOGGLE LEFT NAV BUTTON
       //
       var b7 = Titanium.UI.createButton({
           title:'Left Nav',
           height:40,
           width:145,
           top:160,
           left:10
       });
       
       var leftnav=false;
       b7.addEventListener('click', function()
       {
           if (!leftnav)
           {
               var b = Titanium.UI.createButton({title:'Left Nav'});
               win.leftNavButton = b;
               leftnav = true;
           }
           else
           {
               win.setLeftNavButton(null);
               leftnav = false;
           }
       });
       
       win.add(b7);
       
       //
       // TOGGLE RIGHT NAV BUTTON
       //
       var b8 = Titanium.UI.createButton({
           title:'Right Nav',
           height:40,
           width:145,
           top:160,
           right:10
       });
       
       var rightnav=false;
       b8.addEventListener('click', function()
       {
           if (!rightnav)
           {
               var b = Titanium.UI.createButton({title:'Right Nav'});
               win.rightNavButton = b;
               rightnav = true;
           }
           else
           {
               win.setRightNavButton(null);
               rightnav = false;
           }
       });
       
       win.add(b8);
       
       //
       // TOGGLE BACK BUTTON TITLE
       //
       var b9 = Titanium.UI.createButton({
           title:'Back Button Title',
           height:40,
           width:145,
           top:210,
           left:10
       });
       
       var backtitle=false;
       b9.addEventListener('click', function()
       {
           if (!backtitle)
           {
               win.backButtonTitleImage = null;    
               win.backButtonTitle = 'It Worked!';
               backtitle = true;
           }
           else
           {
               win.backButtonTitleImage = null;    
               win.backButtonTitle = 'Base UI';
               backtitle = false;
           }
       });
       
       win.add(b9);
       
       //
       // TOGGLE BACK BUTTON TITLE IMAGE
       //
       var b10 = Titanium.UI.createButton({
           title:'Back Button Image',
           height:40,
           width:145,
           top:210,
           right:10
       });
       
       var backtitleimage=false;
       b10.addEventListener('click', function()
       {
           if (!backtitleimage)
           {
               win.backButtonTitleImage = '/images/slider_thumb.png';      
               backtitleimage = true;
           }
           else
           {
               win.backButtonTitleImage = null;    
               backtitleimage = false;
           }
       });
       
       win.add(b10);
       
       var b11 = Titanium.UI.createButton({
           title:'Back button BG',
           height:40,
           width:145,
           top:260,
           left:10
       });
       
       var colored = false;
       b11.addEventListener('click', function()
       {
           if (!colored) {
               var backbutton = Titanium.UI.createButton({
                   title:'BG nav', 
                   backgroundImage:'/images/chat.png',
                   width:100,
                   height:20
               });
               backbutton.addEventListener('click', function() {
                   win.close();
               });
               win.leftNavButton = backbutton;
               colored = true;
           }
           else {
               win.leftNavButton = null;
               colored = false;
           }
       });
       win.add(b11);
       
       //
       // BACKGROUND IMAGE ON NORMAL BUTTON
       //
       var b12 = Titanium.UI.createButton({
           title:'Button With Image',
           height:40,
           width:145,
           top:260,
           right:10
       });
       b12.addEventListener('click', function()
       {
           var b = Ti.UI.createButton({
               backgroundImage:'/images/camera.png',
               height:33,
               width:33
           });
           win.rightNavButton = b;
       });
       win.add(b12);
       
       var b13 = Titanium.UI.createButton({
           title:'Set Label',
           height:40,
           width:145,
           top:310,
           left:10
       });
       
       b13.addEventListener('click', function()
       {
           var l = Ti.UI.createLabel({
               text:'Hello',
               color:'#0f0',
               font:{fontSize:14}
           });
           win.rightNavButton = l;
       });
       win.add(b13);
       
       var b14 = Titanium.UI.createButton({
           title:'Set Bar Image',
           height:40,
           width:145,
           top:310,
           right:10
       });
       
       b14.addEventListener('click', function()
       {
           if(win.barImage)
           {
               win.barImage = null;
           }
           else
           {
               win.barImage = '/images/corkboard.jpg';
           }
       });
       win.add(b14);
       return win;
   };
   
   function win_nav2(_args) 
   {
       var win1 = Titanium.UI.createWindow({
           title:_args.title,
           layout:'vertical'
       });
   
       var l1 = Ti.UI.createLabel({text:'LEFT NAV'});win1.add(l1);
       var b11 = Ti.UI.createButton({title:'SINGLE'});win1.add(b11);
       var b12 = Ti.UI.createButton({title:'MULTI'});win1.add(b12);
       var b13 = Ti.UI.createButton({title:'RESET'});win1.add(b13);
       var l2 = Ti.UI.createLabel({text:'RIGHT NAV'});win1.add(l2);
       var b21 = Ti.UI.createButton({title:'SINGLE'});win1.add(b21);
       var b22 = Ti.UI.createButton({title:'MULTI'});win1.add(b22);
       var b23 = Ti.UI.createButton({title:'RESET'});win1.add(b23);
   
       var v1 = Ti.UI.createButton({ 
           systemButton: Ti.UI.iPhone.SystemButton.BOOKMARKS 
       });
   
       var v2 = Ti.UI.createButton({ 
           systemButton: Ti.UI.iPhone.SystemButton.CAMERA,
           width:-16 
       });
   
       var v3 = Ti.UI.createButton({ 
           systemButton: Ti.UI.iPhone.SystemButton.COMPOSE 
       });
       
       var v4 = Ti.UI.createButton({ 
           systemButton: Ti.UI.iPhone.SystemButton.ACTION 
       });
   
       b11.addEventListener('click',function(e){win1.leftNavButton = v1});
       b12.addEventListener('click',function(e){win1.leftNavButtons = [v1,v2]});
       b13.addEventListener('click',function(e){win1.leftNavButtons = null});
       b21.addEventListener('click',function(e){win1.rightNavButton = v3});
       b22.addEventListener('click',function(e){win1.rightNavButtons = [v3,v4]});
       b23.addEventListener('click',function(e){win1.rightNavButtons = null});
   
       return win1;
   }
   
   var navWin = Ti.UI.createWindow({title:'Nav Test'});
   var n1 = Ti.UI.createButton({title:'REGRESSION', top:100});
   var n2 = Ti.UI.createButton({title:'MULTI BUTTONS', top:200});
   
   navWin.add(n1);
   navWin.add(n2);
   
   var ng = Ti.UI.iOS.createNavigationWindow({
       window:navWin,
       backgroundColor:'white'
   });
   
   ng.open();
   
   n1.addEventListener('click',function(e) {
       var newWin = win_nav({title:'Window Properties'});
   
       ng.openWindow(newWin);
   })
   
   n2.addEventListener('click',function(e) {
       var newWin = win_nav2({title:'MULTI TEST'});
   
       ng.openWindow(newWin);
   })

Vishal Duggal 2014-04-01

Pull pending against master https://github.com/appcelerator/titanium_mobile/pull/5570
Neha Mittal 2014-04-24

Verified fix with below environment: Appc Studio: 3.3.0.201404211130 SDK build: 3.3.0.v20140423155715 acs: 1.0.14 npm: 1.3.2 alloy: 1.4.0-dev CLI: titanium-3.3.0-dev titanium-code-processor:1.1.1-beta1 Xcode: 5.1.1 Osx: Mavericks(10.9.2) Device: iPhone 5C (7.1) Able to set the empty spaces of left, right in Window NavButton. Hence closing the issue.

JSON Source