[TIMOB-15067] iOS7: Issue in Table View Style with respect to quick access bar

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Invalid
Resolution Date	2013-09-06T18:03:38.000+0000
Affected Version/s	Release 3.1.2
Fix Version/s	n/a
Components	iOS
Labels	ios7, supportTeam, triage
Reporter	Eduardo Gomez
Assignee	Vishal Duggal
Created	2013-09-06T15:17:43.000+0000
Updated	2017-03-17T17:58:52.000+0000

Description

Issue

An application similar to Contacts, where we display a view with multiple contacts. On iOS7, the letters in the 'quick access bar' on the right side are too tightly placed for the user to interact with and drag with ease. (To preview the issue please refer to attachment A.png) Since the default Apple standard is something similar to what is attached in B.png, where as you would notice, all the 26 alphabets from A to Z plus the symbol '#' is provided even if there is just one or two or three sections in the table. Main issue is that the letters that appear are too tightly coupled and would like to have a fix for the same.

Snippet

var win = Ti.UI.createWindow({
	backgroundColor : '#ffffff',
	title : "Testing",
	layout : 'vertical',
});

var _data = [];
var _index = [];

var tableViewData = ['a', 'b', 'c', 'd', 'e', 'f', 'm', 'y', 'x', 'z'];
var lastLetter = tableViewData[0].substr(0, 1);

for (var i = 0, len = tableViewData.length; i < len; i++) {
	var row = Ti.UI.createTableViewRow({
		height : 50,
		header : tableViewData[i],
		rowIndex : i,
	});

	var labelDetails = Ti.UI.createLabel({
		color : '#222',
		text : tableViewData[i],
		left : 70,
		top : 4,
		width : 360
	});
	row.add(labelDetails);

	_data.push(row);
	_index.push({
		title : tableViewData[i],
		index : i
	});
}

var table = Ti.UI.createTableView({
	filterAttribute : 'mainText',
	selectedIndex : -1,
	index : _index,
});

table.setData(_data);
win.add(table);
win.open();

Attachments

File	Date	Size
1-1.png	2013-09-09T21:13:30.000+0000	25746
1-2.png	2013-09-09T21:13:30.000+0000	19690
A.PNG	2013-09-06T15:17:43.000+0000	20760
B.PNG	2013-09-06T15:17:43.000+0000	34366
iOS7-SDK3.1.3.png	2013-09-06T16:53:33.000+0000	30573

Comments

Davide Cassenti 2013-09-06

Attached screenshot of test with SDK 3.1.3

Vishal Duggal 2013-09-06

Apple only allows us to specify the index titles and the sections they correspond to. How they are rendered on the screen is completely up to the OS and that has changed in IOS7. That being said if you really want more spacing in your indexTitles, there is nothing stopping you from adding an empty title. Something like this

   function isiOS7Plus()
   {
       // add iphone specific tests
       if (Titanium.Platform.name == 'iPhone OS')
       {
           var version = Titanium.Platform.version.split(".");
           var major = parseInt(version[0],10);
            
           // can only test this support on a 3.2+ device
           if (major >= 7)
           {
               return true;
           }
       }
       return false;
    
   }
    
   var isIOS7 = isiOS7Plus();
   
   var win = Ti.UI.createWindow({
       backgroundColor : '#ffffff',
       title : "Testing",
       layout : 'vertical',
       orientationModes:[Ti.UI.PORTRAIT,Ti.UI.LANDSCAPE_LEFT,Ti.UI.LANDSCAPE_RIGHT]
   });
    
   var _data = [];
   var _index = [];
    
   var tableViewData = ['a', 'b', 'c', 'd', 'e', 'f', 'm', 'y', 'x', 'z'];
   var lastLetter = tableViewData[0].substr(0, 1);
    
   for (var i = 0, len = tableViewData.length; i < len; i++) {
       var row = Ti.UI.createTableViewRow({
           height : 50,
           header : tableViewData[i],
           rowIndex : i,
       });
    
       var labelDetails = Ti.UI.createLabel({
           color : '#222',
           text : tableViewData[i],
           left : 70,
           top : 4,
           width : 360
       });
       row.add(labelDetails);
    
       _data.push(row);
       _index.push({
           title : tableViewData[i],
           index : i
       });
       if (isIOS7) {
           _index.push({
               title : ' ',
               index : i
           });
       }
   }
    
   var table = Ti.UI.createTableView({
       filterAttribute : 'mainText',
       selectedIndex : -1,
       index : _index,
   });
    
   table.setData(_data);
   win.add(table);
   win.open();

Lee Morris 2017-03-17

Closing ticket as invalid.

JSON Source