钛的自动排样

Question

我试图定位我的观点，并让他们自动调整大小。

在这个例子中，我有三个视图，一个红色、一个蓝色和一个绿色视图，它们都布置在一个垂直布局的窗口中，它们的宽度都是"100%"：

var mainView = Ti.UI.createView({
    backgroundColor : "white",
    width : "100%",
    height : "100%",
    layout : "vertical"
});

var redView = Ti.UI.createView({
    backgroundColor : "red",
    width : "100%",
    height : "40%",
});
mainView.add(redView);

var blueView = Ti.UI.createView({
    backgroundColor : "blue",
    width : "100%",
    height : "30%",
});
mainView.add(blueView);

var greenView = Ti.UI.createView({
    backgroundColor : "green",
    width : "100%",
    height : "30%"
});
mainView.add(greenView);

看起来不错。现在，我想将控件添加到红色视图中，并希望发生以下几件事情：

1. 我将在红色视图中放置一个控件，它将在每个方向上有10个点/像素的边距。
2. 当我调整内部控件的大小时，红色视图将自动调整自身大小以适应内部控件，但将保持从每个方向的10点空白。
3. 蓝色视图和绿色视图将自动缩小大小，以占用屏幕的其余部分。

示例：

var blackView = Ti.UI.createView({
    backgroundColor : "black",
    top : 10,
    bottom : 10,
    left : 10,
    right : 10
});

...
...

blackView.height = blackView.height + 50;

当我将blackView的身高增加50倍时，应该会发生以下情况：

1) redView高度应增加50倍。2) blueView和greenView的高度应降低25倍，并自动放置。

有什么想法可以实现这种自动行为吗？

Answer 1

有几种方法可以做到这一点。

简单方法:当您增加内部视图的大小时，必须增加外部视图的大小，所有其他相关视图都应该相应地减小。

推荐：为其使用事件侦听器。当您更改大小时，触发自定义事件。

Ti.App.fireEvent("myViewSizeChanged",{newSize:"50",control:redview});

1. 侦听此事件，调用您的计算方法来调整每个视图的大小。e.g Ti.App.addEventListener("myViewSizeChanged"，函数(E){ //这里可以得到e/e.newSize //e.redView }的值)；

两个对角线都会告诉你新的大小.并且可以相应地调整其余视图的大小。