bottom
property is not calculated property when it is used with
center
property.
var view1 = Ti.UI.createView({
width: 400, height: 400,
backgroundColor: 'white'
}),
view2 = Ti.UI.createView({
backgroundColor: 'blue',
center: {
x: 200,
y: 200
},
width: 100, bottom: 100
}),
view3 = Ti.UI.createView({
backgroundColor: 'red',
width: Ti.UI.FILL, height: 1, bottom: 100
});
var win = Ti.UI.createWindow({
backgroundColor: 'green'
});
view1.add(view2);
view1.add(view3);
win.add(view1);
win.open();
Actual: The blue box (
view2
) and ed line (
view3
) are not aligned
!b.png|thumbnail!
Expected: The blue box (
view2
) should be aligned with red line (
view3
).
!a.png|thumbnail!
More test cases:
var view = Ti.UI.createView({
height: 200,
width: 200,
backgroundColor: 'gray'
}),
viewChild = Ti.UI.createView({
backgroundColor: 'blue',
center: {
x: 100
},
right: 50
}),
line = Ti.UI.createView({
backgroundColor: 'red',
width: 1, height: Ti.UI.FILL,
right: 50, top: 0
});
var win = Ti.UI.createWindow();
viewChild.addEventListener('postlayout', function () {
Ti.API.info(viewChild.size.width + ' should eql(100)');
});
view.add(viewChild);
view.add(line);
win.add(view);
win.open();
var view = Ti.UI.createView({
height: 200,
width: 200,
backgroundColor: 'gray'
}),
viewChild = Ti.UI.createView({
backgroundColor: 'blue',
center: {
y: 100
},
bottom: 50
}),
line = Ti.UI.createView({
backgroundColor: 'red',
width: Ti.UI.FILL, height: 1,
bottom: 50, left: 0
});
var win = Ti.UI.createWindow();
viewChild.addEventListener('postlayout', function () {
Ti.API.info(viewChild.size.width + ' should eql(200)');
});
view.add(viewChild);
view.add(line);
win.add(view);
win.open();
https://github.com/appcelerator/titanium_mobile_windows/pull/1226
FR passed. PR merged.
Verified the fix on SDK 7.5.0.v20180927072643 . Layout works fine. Closing.