[TIMOB-11254] iOS: When resizing a view, a centered child label does not go along with the animation
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | Medium |
Status | Closed |
Resolution | Not Our Bug |
Resolution Date | 2013-07-19T23:03:46.000+0000 |
Affected Version/s | Release 2.1.2 |
Fix Version/s | Release 5.1.0 |
Components | iOS |
Labels | parity |
Reporter | Amuktha Akkinepally |
Assignee | Vishal Duggal |
Created | 2012-10-03T22:42:03.000+0000 |
Updated | 2015-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;
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).
To work around this for this particular example, you can do something as shown below
Going to mark this as Not Our Bug