2012-11-06 48 views
2

我試圖定位我的意見,並讓他們自動調整大小。鈦中的自動佈局

在這個例子中,我有3次,紅色,藍色和綠色之一,他們都制定了在窗口垂直佈局,它們都具有「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. 當我調整內部控件的大小時,RED視圖會自動調整其大小以適應內部控件,但會保持每個方向的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,並且它們應該被自動放置。

任何想法如何實現這種自動行爲?

+0

1是blackView內redView? 2.當你將blackView的大小增加50時,redView的大小也應該增加50? –

回答

0

有幾種方法可以做到這一點。

簡單的方法: 如果增加內部視圖的大小就得增加外視圖和所有其他相關視圖的大小應當相應降低。

推薦: 使用事件偵聽器吧。 e.g 1.火,當你改變大小e.g

Ti.App.fireEvent("myViewSizeChanged",{newSize:"50",control:redview}); 
  1. 聽此事件打電話給你的計算方法調整您的每個視圖自定義事件。 e.g

    Ti.App.addEventListener( 「myViewSizeChanged」 功能(E){// 在這裏你可以得到Ë 的//e.newSize 值//e.redView });

未參數會告訴你新尺寸的控制......你可以相應地調整視圖大小的休息