2

我正在尝试定位我的视图并让它们自动调整大小。

对于这个例子，我有 3 个视图，一个红色、一个蓝色和一个绿色，它们都布置在一个具有 VERTICAL 布局的窗口中，它们的宽度都是“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. 我将在红色视图中放置一个控件，它的每个方向的 MARGIN 为 10 点/像素。
  2. 当我调整内部控件的大小时，RED 视图会自动调整自身大小以适应内部控件，但会保持每个方向的 10 点边距。
  3. BLUE 和 GREEN 视图将自动减小它们的大小以占据屏幕的其余部分。

例子：

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，并且要自动放置。

任何想法如何实现这种自动行为？

4

1 回答 1

0

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

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

推荐： 使用事件监听器。例如 1. 当你改变大小时触发一个自定义事件 例如

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

  1. 听这个事件调用你的计算方法来调整你的每个视图的大小。例如

    Ti.App.addEventListener("myViewSizeChanged",function(e){ //这里可以获取e的值 //e.newSize //e.redView });

两个参数都会告诉你哪个控件的新大小......你可以相应地调整其余的视图大小

于 2012-11-28T08:22:42.330 回答