[TIMOB-11232] Android: TableView / HeaderView Android Parity Issue
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | Medium |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2014-08-14T00:45:35.000+0000 |
Affected Version/s | Release 2.1.2, Release 2.1.3, Release 3.0.0, Release 3.1.0 |
Fix Version/s | 2013 Sprint 21, 2013 Sprint 21 API, Release 3.2.0 |
Components | Android |
Labels | api, module_tableview, parity, qe-manualtest |
Reporter | Frank Apap |
Assignee | Sunila |
Created | 2012-05-20T12:45:37.000+0000 |
Updated | 2014-08-14T00:45:35.000+0000 |
Description
A headerview added to a tableview in android allocates space but does not show any children(or backgrounds) the way it does on iOS. Sample code below:
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
navWindow = Ti.UI.createWindow();
//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
backgroundColor:'#fff'
});
var data = [
{title:'Alan', hasChild:true, header:'A'},
{title:'Alice', hasDetail:true},
{title:'Alexander'},
{title:'Amos'},
{title:'Alonzo'},
{title:'Brad', header:'B'},
{title:'Brent'},
{title:'Billy'},
{title:'Brenda'},
{title:'Potsie'}
];
var header=Ti.UI.createView({
width:'100%',
backgroundColor:'red',
height:149
});
// Create a Label.
var aLabel = Ti.UI.createLabel({
text : 'aLabel',
color : 'black',
font : {fontSize:22},
height : 44,
width : 222,
top : 2,
left : 5,
textAlign : 'center'
});
// Add to the parent view.
header.add(aLabel);
var tableview = Titanium.UI.createTableView({
data:data,
headerView:header
});
win1.add(tableview);
win1.open();
Attachments
File | Date | Size |
---|---|---|
iOS Simulator Screen shot Mar 21, 2013 2.59.04 PM.png | 2013-03-21T09:35:59.000+0000 | 16379 |
Screenshot_2013-03-21-15-02-34.png | 2013-03-21T09:35:59.000+0000 | 23435 |
Tested and confirmed parity issue on iOS 5.1 and Android emulator 2.3.3 with TiSDK 2.1.2 GA, 2.1.3 RC 2, 3.0.0. Not sure if this is platform specific behavior however, someone else will need to clarify this.
I can also confirm that this behavior is still present in the latest 3.1.0 TiSDK build that I've been using, tested on Android emulator and my Galaxy Nexus (4.1.1). I came upon this creating a test app for Alloy. Works fine on iOS, but as this ticket states, the header/footer views allocate space but show no UI on android. For reference, the test app is here: https://github.com/appcelerator/alloy/tree/master/test/apps/ui/proxy_properties
This should work if the width is specified as 'fill' instead of '100%'. Since the width is given in percentage, framework uses the parent width to calculate the width of the headerview. Since the parent (list) layout is not completed at this time, parent width is returned as 0 and hence the headerview is created with width set to 0. See method layoutHeaderOrFooter in TiTableView.
@sunil: In the alloy example I cited above, I don't use 100% for the width. In fact, I don't specify a width, which according to the docs should use Ti.UI.FILL by default. I still see this same behavior only on android.
oops, I missed the alloy sample, I was looking at the sample here. I will take a look at the alloy sample.
Based on the layout precedence documentation "If width is defined, it takes precedence and the positioning pins are not used to determine the view's width. If width is not defined, and at least two horizontal positioning pins are defined, the width is calculated implicitly from the pins. For example, left and right or left and center.x. If all three horizontal pins are defined, the width is determined by the left and center.x pins. If width cannot be implicitly calculated it follows the view's default sizing behavior." Looks like the default width and height for headerView is 'WRAP_CONTENT'. I think it would have been nice if the default for height was 'WRAP_CONTENT' and width be 'FILL'
Great analysis. In the end, I don't care how it's handled so long as it is uniform across the supported platforms.
Issue reproduces Tested with Titanium Studio, build: 3.0.1.201212181159 Titanium SDK version: 3.1.0 (03/11/13 15:43 0c88429) Titanium SDK version: 3.0.2 (02/07/13 16:46 a4def81) Device: Samsung galaxy s duos Android version: 4.0.4 iOS iPhone Simulator: iOS SDK version: 6.0 jithinpv
Another parity issue would be that HeaderViews on TableViewSections need to be set on creation, as opposed to iOS where they can be changed afterwards.
[~qonstrukt] they can be set after creation, but not changed or removed: TC-2748
So, what's the status on this? BTW, on iOS on the other hand, regardless of what you set the header or footerView's
width
to, it will always FILL.Set the width to be MATCH_PARENT for header and footer to be consistent with iPhone. https://github.com/appcelerator/titanium_mobile/pull/4762
CR + FR
Tested and confirmed fix on: Device : HTC desire V , Android version : 4.0.3 SDK: 3.2.0.v20131021142445 CLI version : 3.2.0 OS : MAC OSX 10.8.4 Alloy : 1.2.2 Appcelerator Studio, build: 3.2.0.201310181700 XCode : 5