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. 赤のビューにコントロールを配置すると、各方向に 10 ポイント/ピクセルの MARGIN が設定されます。
  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 に答える