Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-11254] iOS: When resizing a view, a centered child label does not go along with the animation

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionNot Our Bug
Resolution Date2013-07-19T23:03:46.000+0000
Affected Version/sRelease 2.1.2
Fix Version/sRelease 5.1.0
ComponentsiOS
Labelsparity
ReporterAmuktha Akkinepally
AssigneeVishal Duggal
Created2012-10-03T22:42:03.000+0000
Updated2015-10-14T21:29:40.000+0000

Description

When resizing a view with an animation, a centered child label will jump to its new position immediately rather than sliding along with the redraw Animation. This happens when animating to a different height (i.e. when the label should be vertically centered in the view) and when animating to a different width in case the label is set to textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER (i.e. when the label should be horizontally centered in the view). This works perfectly fine on Android.

Steps to reproduce

1. Create a default master / detail application and use the following detail function (ui/common/DetailView). Expected Behavior: label should slide along with the animation Actual behavior: label just jumps off to the new position.
function DetailView() {
var self = Ti.UI.createView();

var wrapper = Ti.UI.createView({
    left: 10,
    top: 10,
    width: 200,
    backgroundColor: "#CCC",
    height: 50
});
var label = Ti.UI.createLabel({
    left: 10,
    right: 10,
    text: "Some text",
    textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
});
wrapper.add(label);
self.add(wrapper);

var isLarge = false;
wrapper.addEventListener("click", function(e) {
    isLarge = !isLarge;
    wrapper.animate({
        width: isLarge ? 300 : 200,
        height: isLarge ? 100 : 50,
        duration: 1000
    });
});
return self;
}
module.exports = DetailView;



Comments

  1. Vishal Duggal 2013-07-19

    ok not our bug. Look like the drawing operation of the label takes only the final rect into consideration. So although the frame of the label is animating correctly, it looks like it is jumping because the label has already drawn its text for final rect. Define the label as shown below and you can see its frame animating correctly but the text drawing incorrectly (something we do not control).
       var label = Ti.UI.createLabel({
           left: 10,
           right: 10,
           text: "Some text",
           backgroundColor:'red'
           textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER //This is the reason the text jumps
       });
       
    To work around this for this particular example, you can do something as shown below
       var labelWrapper = Ti.UI.createView({
           left: 10,
           right: 10,
           backgroundColor:'red',
           height:Ti.UI.SIZE
       });
       
       //Use a SIZED label
       var label = Ti.UI.createLabel({
           text: "Some text"
       });
       labelWrapper.add(label);
       wrapper.add(labelWrapper);
       
    Going to mark this as Not Our Bug

JSON Source