[TIMOB-14986] iOS7: Support separatorInsets property

GitHub Issue	n/a
Type	New Feature
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2013-10-22T10:46:07.000+0000
Affected Version/s	Release 3.1.2
Fix Version/s	2013 Sprint 22, 2013 Sprint 22 API, Release 3.2.0
Components	iOS
Labels	ios7, module_listview, qe-testadded
Reporter	Tim Poulsen
Assignee	Vishal Duggal
Created	2013-08-28T17:46:27.000+0000
Updated	2014-01-06T16:07:17.000+0000

Description

Expected results

TableView in Window in Tab with left:0 (or no left value set) would be left-aligned to its parent as is the case with iOS6.

Actual results

As shown in the attached screenshot, the tableview is inset from the left edge of the screen. Project is https://github.com/appcelerator-training/tcd_training/tree/master/labcode/Finished/05_alloy

Attachments

File	Date	Size
native IOS 7 tableview.png	2013-09-27T23:16:06.000+0000	116129
Screen Shot 2013-08-28 at 1.43.58 PM.png	2013-08-28T17:46:27.000+0000	181713
Screen Shot 2013-08-28 at 1.57.17 PM.png	2013-08-28T17:58:18.000+0000	165279
titanium tableview iOS 7.png	2013-09-27T23:16:06.000+0000	56466

Comments

Tim Poulsen 2013-08-28

On further testing, it's just the separator lines that are indented. Cell content is to the left where expected.
Sabil Rahim 2013-08-28

Expected behavior in iOS 7
Mark Mokryn 2013-09-16
Oliver Lohoff 2013-09-25

The Status is resolved, but i think it isn't. The TableView still indents to the left on iPhone (not only the lines). 3.1.3, latest Xcode.
Ingo Muschenetz 2013-09-25

[~c4yolli] can you please attach a screenshot?
Oliver Lohoff 2013-09-25

I can't make attachment. Here you can find two Screenshots: http://istbaldsoweit.de/1.png http://istbaldsoweit.de/2.png
Tim Poulsen 2013-09-25

Interesting, because Oliver's results don't match mine -- where just the separator lines are indented, not the titles. (Checked with 3.1.3.GA) Oliver, are you using row titles or child views? Can you post sample code to reproduce the problem?
Oliver Lohoff 2013-09-25

I tested it with "Titanium Classic, Single Window Application" and changed the FirstView with an TableView. ApplicationWindow.js //Application Window Component Constructor function ApplicationWindow() { //load component dependencies var FirstView = require('ui/common/FirstView'); var TableView = require('ui/common/TableView'); //create component instance var self = Ti.UI.createWindow({ backgroundColor:'#ffffff', left:0 }); //construct UI //var firstView = new FirstView(); //self.add(firstView); var tableView = new TableView(); self.add(tableView); return self; } //make constructor function the public component interface module.exports = ApplicationWindow; TableView.js //Application Window Component Constructor function ApplicationWindow() { //load component dependencies var FirstView = require('ui/common/FirstView'); var TableView = require('ui/common/TableView'); //create component instance var self = Ti.UI.createWindow({ backgroundColor:'#ffffff', left:0 }); var tableView = new TableView(); self.add(tableView); return self; } //make constructor function the public component interface module.exports = ApplicationWindow; As you can see, a simple Window / TableView
Sabil Rahim 2013-09-27

i have attached two images above of a native tableview and tableview created using TiSDK. They look are identical in the way they are indented.
Fokke Zandbergen 2013-10-06

This might not be our bug, because this now is the default design for a table on iOS7, but then at least we should expose SeparatorInset for UITableView so developers can decide if they want this. From the [UI Design Guidelines](https://developer.apple.com/library/ios/documentation/userexperience/conceptual/TransitionGuide/ContentViews.html): {quote} If every cell in a table contains an image view of the same size, by default iOS vertically aligns the leading edge of all separators. In a table that mixes text-only cells with cells that contain image views, you can use the separatorInset property to ensure that the separators are vertically aligned. The separatorInset property is of type UIEdgeInsets. By default, UIEdgeInsets uses UITableViewAutomaticDimension as the value for the top, left, bottom, and right parameters. {quote} The API docs on the property: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITableView_Class/Reference/Reference.html#//apple_ref/occ/instp/UITableView/separatorInset

Vishal Duggal 2013-10-18

Test Case

    var win = Ti.UI.createWindow({
        backgroundColor: 'white',
        title:'INSETS',
        layout:'vertical'
    });
    
    
    var container = Ti.UI.createView({height:Ti.UI.SIZE,width:Ti.UI.SIZE,layout:'horizontal'});
    win.add(container);
    
    
    var listView = Ti.UI.createListView({top:5,separatorColor:'red'});
    
    var section = Ti.UI.createListSection();
    
    var data = [
        {properties: { title: 'ONE'}},
        {properties: { title: 'TWO'}},
        {properties: { title: 'THREE'}},
        {properties: { title: 'FOUR'}}
    ];
    section.setItems(data);
    listView.sections = [section]
    
    win.add(listView);
    
    
    var b1 = Ti.UI.createButton({title:' (0,0) ',borderColor:'black',borderWidth:1})
    var b2 = Ti.UI.createButton({title:' (10,0) ',left:5,borderColor:'black',borderWidth:1})
    var b3 = Ti.UI.createButton({title:' (10,10) ',left:5,borderColor:'black',borderWidth:1})
    var b4 = Ti.UI.createButton({title:' RESET ',left:5,borderColor:'black',borderWidth:1})
    
    container.add(b1);
    container.add(b2);
    container.add(b3);
    container.add(b4);
    
    container.addEventListener('click',function(e){
        if(e.source == b1) {
            listView.separatorInsets = {left:0,right:0};
        }
        if(e.source == b2) {
            listView.separatorInsets = {left:10,right:0};
        }
        if(e.source == b3) {
            listView.separatorInsets = {left:10,right:10};
        }
        if(e.source == b4) {
            listView.separatorInsets = null;
        }
    })
    
    var nav = Ti.UI.iOS.createNavigationWindow({
        window:win
    })
    
    nav.open();

Vishal Duggal 2013-10-18

Pull pending against master https://github.com/appcelerator/titanium_mobile/pull/4807
Olga Romero 2013-10-29

Tested and verified the fix with: Titanium Studio, build: 3.2.0.201310290757 Titanium SDK, build:3.2.0.v20131029104858 Xcode 5.0 CLI 3.2.0 (git://github.com/appcelerator/titanium.git) Ran the above code in iOS7 Simulator and iPhone5s iOS 7.0.2 The separator lines being slightly intended as per test code.
Manojkumar Murugesan 2013-11-22

I'm getting the same exact problem. How to solve this. My rows are away from left, even if i set left:0 for both tableview and rows. I'm using Titanium 3.1.3 with XCode 5.0
Fokke Zandbergen 2013-11-22

This is fixed in 3.2.0, which will release in december.
Manojkumar Murugesan 2013-11-22

OK. Thank you for the quick response.
Sameeh Harfoush 2014-01-06

i am still getting the rows intended on iPad3
Dan Wilson 2014-01-06

I had to convert from using the TableView to the ListView to fix the indentation. I figured it was probably a good move anyway, but I agree, the original problem with the TableView is not completely fixed.

JSON Source