[TIMOB-15193] iOS7: ListItems in ListView are white and not transparent, strange separators

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2013-09-17T20:31:27.000+0000
Affected Version/s	n/a
Fix Version/s	2013 Sprint 19, 2013 Sprint 19 API, Release 3.1.3, Release 3.2.0
Components	iOS
Labels	3.1.3, ios7, listview, listviewitem, triage
Reporter	Mark Mokryn
Assignee	Vishal Duggal
Created	2013-09-15T15:20:44.000+0000
Updated	2013-09-18T13:11:23.000+0000

Description

See screen shots - looks good on iOS 6.1 but buggy on iOS 7. (Code updated to reflect last screenshot) index.xml:

<Alloy>
	<Window class="container">
		<ListView id="lv">
			<ListSection>
				<ListItem title="row 1" color="white" backgroundColor="transparent"/>
				<ListItem title="Weird separators on iOS7" color="white" backgroundColor="blue"/>
				<ListItem title="Weird separators on iOS7" color="white" backgroundColor="blue"/>
				<ListItem title="Weird separators on iOS7" color="white" backgroundColor="blue"/>
				<ListItem title="row 2" color="white"/>
				<ListItem title="row 3" color="white" backgroundColor="transparent"/>
			</ListSection>
		</ListView>
	</Window>
</Alloy>

index.tss

".container": {
	backgroundColor:"black"
}
"ListView":{
	backgroundColor: 'transparent'
}

index.js:

$.index.open();

Attachments

File	Date	Size
ios6.1-listview.png	2013-09-15T15:20:44.000+0000	18944
ios7-listview.png	2013-09-15T15:20:44.000+0000	13446
iOS7-ListView-Weird.png	2013-09-16T07:55:14.000+0000	33742

Comments

Mark Mokryn 2013-09-15

Additional observation: if I set one of the ListItems in the following manner: <ListItem title="row 1" color="white" backgroundColor="red"/> then indeed the background is red on iOS7, however setting backgroundColor="transparent" in the same manner has no effect - the item stays white.
Mark Mokryn 2013-09-16

And an additional visible bug here: look at the iOS 7 ListView: the dividers are not extending to the left edge of the window. In my app, where I have thumbnails on the left side it causes "bleeding" of the image over this edge and looks unprofessional.
Ingo Muschenetz 2013-09-16

[~mokesmokes] note that the "indented" behavior is standard in iOS 7 (as noted in TIMOB-14986), so there is little that can be done about that appearance.
Mark Mokryn 2013-09-16

There is still something strange, take a look at the additional screen shot I posted: The indentation occurs for empty items, or items where the content is not viewable due to the backgroundColor bug. For visible items, the left edge of the separator appears to be highlighted, or a different weight, than most of the separator. (Additional note: I am now noticing that Apple's TableViews also have that indentation, however they remain indented when there is content, unlike 3.1.3RC which apparently emphasizes that part of the separator)
Vishal Duggal 2013-09-16

Already caught and exposed by our internal tests in Kitchen Sink and we have punted this to 3.2.0 or later depending on resource availability. The TableView subview hierarchy has changed and the tableView cells are no longer direct subviews of the tableView but of a separate wrapper view which ofcourse is not exposed and we have no idea what the properties of this wrapper view are. Moreover iOS7 has some issues with refreshing cell separators when reloading rows So yes transparent background does not work but other colors should as long as explicitly set. Default seems to be white. Regarding separators not extending all the way across, that is an iOS 7 design change we have no control over.
Mark Mokryn 2013-09-16

Probably related re the transparent background: http://stackoverflow.com/questions/17081067/uitableview-transparant-background-in-ios-7
Vishal Duggal 2013-09-16

[~mokesmokes] cool. Totally works. Setting up PR.
Vishal Duggal 2013-09-16

The problem is that we have no way to get the default background color of the ListItem unless it is attached to the ListView (Needed for undefined behavior). And by then it is too late because we've already stored null which is incorrect. The only way to fix it is to define a default background Color on the ListItem like in TableView (which is white). But that would be a change in behavior. Maybe we should punt this out of 3.1.3 and change behavior in 3.2.0 with the remaining V2 fixes.
Mark Mokryn 2013-09-16

Personally, in my app, I can handle it. But I can imagine that for some apps it may be terrible - e.g. imagine that the window background is supposed to be viewed through the list view - this capability would be blown away until fixed. 3.2.0 is a long ways off...
Ingo Muschenetz 2013-09-16

Will _attempt_ to get this into 3.1.3
Vishal Duggal 2013-09-17

Pull pending master - https://github.com/appcelerator/titanium_mobile/pull/4701 3_1_X - https://github.com/appcelerator/titanium_mobile/pull/4702

Vishal Duggal 2013-09-17

Test Code. Shows table view and list view. Play with style GROUPED and PLAIN. Also with background colors of the table View. Essentially what you want to see is that transparent backgroundColor is respected

    var win = Ti.UI.createWindow({backgroundColor: 'red'});
    
    var listView = Ti.UI.createListView();
    var sections = [];
    
    var section1 = Ti.UI.createListSection({ headerTitle: 'Section 1'});
    var section1DataSet = [
        {properties: { title: 'My Background Color is White', backgroundColor:'white'}},
        {properties: { title: 'My Background Color is Yellow', backgroundColor:'yellow'}},
        {properties: { title: 'My Background Color is Green', backgroundColor:'green'}},
        {properties: { title: 'My Background Color is Transparent', backgroundColor:'transparent'}},
        {properties: { title: 'My Background Color is Undefined'}},
        {properties: { title: 'My Background Color is White', backgroundColor:'white'}},
        {properties: { title: 'My Background Color is Yellow', backgroundColor:'yellow'}},
        {properties: { title: 'My Background Color is Green', backgroundColor:'green'}},
        {properties: { title: 'My Background Color is Transparent', backgroundColor:'transparent'}},
        {properties: { title: 'My Background Color is Undefined'}},
        {properties: { title: 'My Background Color is White', backgroundColor:'white'}},
        {properties: { title: 'My Background Color is Yellow', backgroundColor:'yellow'}},
        {properties: { title: 'My Background Color is Green', backgroundColor:'green'}},
        {properties: { title: 'My Background Color is Transparent', backgroundColor:'transparent'}},
        {properties: { title: 'My Background Color is Undefined'}},
        {properties: { title: 'My Background Color is White', backgroundColor:'white'}},
        {properties: { title: 'My Background Color is Yellow', backgroundColor:'yellow'}},
        {properties: { title: 'My Background Color is Green', backgroundColor:'green'}},
        {properties: { title: 'My Background Color is Transparent', backgroundColor:'transparent'}},
        {properties: { title: 'My Background Color is Undefined'}},
        {properties: { title: 'My Background Color is White', backgroundColor:'white'}},
        {properties: { title: 'My Background Color is Yellow', backgroundColor:'yellow'}},
        {properties: { title: 'My Background Color is Green', backgroundColor:'green'}},
        {properties: { title: 'My Background Color is Transparent', backgroundColor:'transparent'}},
        {properties: { title: 'My Background Color is Undefined'}},
    ];
    section1.setItems(section1DataSet);
    sections.push(section1);
    
    listView.sections = sections;
    listView.style=Ti.UI.iPhone.ListViewStyle.GROUPED;
    win.add(listView);
    
    var win2 = Ti.UI.createWindow({backgroundColor: 'red'});
    var data = [
        { title: 'My Background Color is White', backgroundColor:'white', header:'Section 1'},
        { title: 'My Background Color is Yellow', backgroundColor:'yellow'},
        { title: 'My Background Color is Green', backgroundColor:'green'},
        { title: 'My Background Color is Transparent', backgroundColor:'transparent'},
        { title: 'My Background Color is Undefined'},
        { title: 'My Background Color is White', backgroundColor:'white'},
        { title: 'My Background Color is Yellow', backgroundColor:'yellow'},
        { title: 'My Background Color is Green', backgroundColor:'green'},
        { title: 'My Background Color is Transparent', backgroundColor:'transparent'},
        { title: 'My Background Color is Undefined'},
        { title: 'My Background Color is White', backgroundColor:'white'},
        { title: 'My Background Color is Yellow', backgroundColor:'yellow'},
        { title: 'My Background Color is Green', backgroundColor:'green'},
        { title: 'My Background Color is Transparent', backgroundColor:'transparent'},
        { title: 'My Background Color is Undefined'},
        { title: 'My Background Color is White', backgroundColor:'white'},
        { title: 'My Background Color is Yellow', backgroundColor:'yellow'},
        { title: 'My Background Color is Green', backgroundColor:'green'},
        { title: 'My Background Color is Transparent', backgroundColor:'transparent'},
        { title: 'My Background Color is Undefined'},
        { title: 'My Background Color is White', backgroundColor:'white'},
        { title: 'My Background Color is Yellow', backgroundColor:'yellow'},
        { title: 'My Background Color is Green', backgroundColor:'green'},
        { title: 'My Background Color is Transparent', backgroundColor:'transparent'},
        { title: 'My Background Color is Undefined'},
    ]
    
    var tableView = Ti.UI.createTableView({
        data:data
    });
    
    tableView.style = Ti.UI.iPhone.TableViewStyle.GROUPED;
    win2.add(tableView);
    
    
    var tabGrp = Ti.UI.createTabGroup();
    var tab1 = Ti.UI.createTab({
        window:win,
        title:'LIST'
    })
    
    var tab2 = Ti.UI.createTab({
        window:win2,
        title:'TABLE'
    })
    
    tabGrp.tabs = [tab1,tab2];
    
    
    tabGrp.open();

Federico Casali 2013-09-18

Verified as fixed both using the Alloy code provided in the description and the code provided by Vishal. Transparent backgroundColor is respected. Titanium SDK 3.1.3.v20130917141554 Alloy 1.2.2-cr Appcelerator Studio 3.1.3.201309132456 CLI 3.1.2.GA Node 0.10.13 Closing.
Mark Mokryn 2013-09-18

Indeed "transparent" works, and the fix seems to solve the separator issue. Thanks! However, iOS7 behaves differently from older iOS and Android in that the items by default now have a white background and not transparent. This should be documented, if not fixed. And BTW - I have not succeeded in setting the item backgroundColor in a custom template in Alloy, but that's another issue.... :-)

Mark Mokryn 2013-09-18

Actually there is a bug with alloy, custom templates, and transparent backgroundColor for the list items. See the code below:

    <Alloy>
    	<Window class="container">
    		<ListView id="lv">
    			<ListSection id="ls">
    					<ListItem title="row 1" color="white" backgroundColor="transparent"/>
    					<ListItem title="row 2" color="white" backgroundColor="blue"/>
    				</ListSection>
    		</ListView>
    		<ListView id="lv2" defaultItemTemplate="template1">
    			<Templates>
    				<ItemTemplate name="template1" height="100" backgroundColor="transparent">
    					<Label bindId="label" id="label1"/>
    				</ItemTemplate>
    			</Templates>
    			<ListSection>
    				<ListItem label:text="this is some text"/>
    			</ListSection>			
    		</ListView>		
    	</Window>
    </Alloy>
    
    And index.tss:
    ".container": {
    	backgroundColor:"black"
    }
    "ListView":{
    	backgroundColor: 'transparent'
    }
    "#lv": {
    	top: '10dp',
    	height: '100dp'
    }
    "#lv2": {
    	top: '110dp',
    	height: '300dp'
    }

template1 will stay white. If you change "transparent" to "blue" it's ok, but transparent doesn't work. Tested with alloy 1.2.2-cr

Ingo Muschenetz 2013-09-18

[~bhatfield], can you please document the behavior difference. [~mokesmokes] if you can't get the Alloy aspect to work for you, can you please file a ticket and let us know so we can follow up there?
Mark Mokryn 2013-09-18

JSON Source