I'm deploying for Android 4.x and using Titanium SDK 3.2.0.GA.
I have a TableView filled with three sections, the content of the first section and last section is the same always while the second section is filled with different rows depending on the contents obtained from our web service.
Each row represents a wallpost, said wallpost can be a simple comment and contain any of the following: an image or user mentions.
To each row, a View that looks like this is added:
<!-- Stream_Item.xml--> <Alloy> <View id="ContainerView" class="container"> <View id="GlobalWorkspace"> <View id="Workspace"> <View id="WorkspacePersonalInfo"> <View id="WorkspaceProfileImage"> <ImageView id="WorkspaceProfileImageView" image="/images/emptyPicture.png"></ImageView> </View> <View id="WorkspaceNameAndDateHolder"> <View id="WorkspaceNameTargetHolder"> <Label id="WorkspaceNameLastName"></Label> <ImageView id="TargetImageView"></ImageView> <Label id="WorkspaceTarget"></Label> </View> <Label id="WorkspaceDate"></Label> </View> </View> <View id="WorkspaceContent"></View> </View> </View> <View id="WorkspaceDecorator"></View> </View> </Alloy>This is the tss:
// Stream_Item.tss ".container" : { backgroundColor :'#FF0000', width:Ti.UI.FILL, height:Ti.UI.SIZE, bottom:'15dp' }, "#GlobalWorkspace": { width:Ti.UI.FILL, height:Ti.UI.SIZE, top:0, left:0 }, "#Workspace": { width:Ti.UI.FILL, height:Ti.UI.SIZE, // height : '100dp', left:0, top:0, backgroundColor:"#FFFFFF", layout:"vertical" }, "#WorkspaceDecorator": { width:Ti.UI.FILL, height:'1dp', bottom:0, left:0, backgroundColor:"#e0e0e0" }, "#WorkspacePersonalInfo": { layout:"horizontal", backgroundColor:"transparent", width:Ti.UI.FILL, height:'50dp', top:0, left:0 }, "#WorkspaceProfileImage": { width:'44dp', height:'44dp', backgroundColor:"#363636", left:'5dp', top:'5dp', borderRadius:3 }, "#WorkspaceProfileImageView":{ width:'70dp', height:'70dp', image : '/images/emptyPicture.png' }, "#WorkspaceNameAndDateHolder": { width:Ti.UI.SIZE, height:Ti.UI.SIZE, layout:"vertical", left:'5dp' }, "#WorkspaceNameTargetHolder": { width:Ti.UI.SIZE, height:Ti.UI.SIZE, layout:"horizontal", left:'0dp' }, "#WorkspaceNameLastName": { color:"#292929", font:{ fontSize:'13dp', fontWeight:"bold" }, left:0, textAlign:"left" }, "#WorkspaceTarget": { color:"#292929", font:{ fontSize:'13dp', fontWeight:"bold" }, left:0, textAlign:"left" }, "#TargetImageView": { width : '15dp', height : '15dp' }, "#WorkspaceDate": { color:"#898989", font:{ fontSize:'12dp' }, top:'2dp', left:0, textAlign:"left" }, "#WorkspaceContent": { width:Ti.UI.FILL, height:Ti.UI.SIZE, backgroundColor:"transparent", layout:"vertical" }If an image is present in the wallpost response then an View containing an ImageView is added to the row in the WorkspaceContent view.
This is the xml for the image:
<!-- Stream_Item_Image.xml --> <Alloy> <View class="container"> <View id="imageHolder"> <ImageView id="Stream_Item_Image_Content" image="/images/emptyCover.png"></ImageView> <View id="ImageViewOpenButton"> <Label id="ImageViewOpenButtonLabel"></Label> </View> </View> </View> </Alloy>This is the tss:
// Stream_Item_Image.tss ".container" : { width:Ti.UI.FILL, height:Ti.UI.SIZE, left:'5dp', right:'5dp', top:'5dp', bottom:'5dp' }, "#imageHolder": { width:Ti.UI.FILL, height:'100dp', left:0, top:0, }, "#Stream_Item_Image_Content": { height:'300dp' }, "#ImageViewOpenButton": { width:Ti.UI.FILL, height:'44dp', left:0, top:'156dp', backgroundColor:"#363636" }, "#ImageViewOpenButtonLabel": { color:"#FFFFFF", font:{ fontSize:'12dp', fontWeight:"bold" }, text : L('open_content_string') }This is the controller code for this:
//**** //Stream_Item_Image.js var args = arguments[0] || {}; var callbacks = args.callbacks; var cacheImage = require('cacheImage'); try { cacheImage('cachedImages_StreamImages', args.attachment, $.Stream_Item_Image_Content, null); } catch(error) { Ti.API.info(error); } var imageExpanded = false; $.imageHolder.addEventListener("singletap", function(e) { if (imageExpanded == true) { imageExpanded = false; $.imageHolder.animate({ height : '100dp', duration : 300 }); } else { imageExpanded = true; $.imageHolder.animate({ height : '200dp', duration : 300 }); } $.Stream_Item_Image.applyProperties({ height : Ti.UI.SIZE }); callbacks.resetHeight(); }); $.ImageViewOpenButton.addEventListener("touchstart", function(e) { $.ImageViewOpenButton.animate({ backgroundColor : "#82bf34", duration : 150 }); }); $.ImageViewOpenButton.addEventListener("singletap", function(e) { $.ImageViewOpenButton.animate({ backgroundColor : "#262626", duration : 150 }, function(e) { if (args.attachment.indexOf('.jpg') > -1 || args.attachment.indexOf('.jpeg') > -1 || args.attachment.indexOf('.png') > -1 || args.attachment.indexOf('.gif') > -1 || args.attachment.indexOf('.bmp') > -1) { var photoObject = [{ id : 0, thumbUrl : args.attachment, fullImageUrl : args.attachment, description : args.comment, created_at : args.created_at, updated_at : args.updated_at }]; Alloy.createController("PhotoViewer", { album : null, index : 0, photoObject : photoObject }); } else { Alloy.createController("WebDocumentViewer"); } }); });When this Stream_Item_Image is tapped, its height changes from 100dpis to 200dpis, since the views containing this image have their height as Ti.UI.SIZE they should resize according to the new height.
Sadly ever since I upgraded to 3.2.0.GA this stopped working. The Stream_Item that contains the Stream_Item_Image doesn't readjust to the new height, as you can see in Stream_Item.tss, WorkspaceContent height is set to Ti.UI.SIZE so it should resize to make room for the new height.
Is this a new bug or what is the problem going on here?