home wiki.fukuchiharuki.me
Menu

../

キーワード

  • Titanium Mobile
  • Alloy

目標

View を上から縦に並べます。

vertical.png

方法

  • Window.xml
    <Alloy>
    	<Window id="window">
    		<View id="view1">
    			<Label>View 1</Label>
    		</View>
    		<View id="view2">
    			<Label>View 2</Label>
    		</View>
    		<View id="view3">
    			<Label>View 3</Label>
    		</View>
    	</Window>
    </Alloy>
  • Window.tss
    '#window': {
    	layout: 'vertical',
    	backgroundColor: '#90EE90',
    },
    '#view1': {
    	height: Ti.UI.SIZE,
    	top: 10,
    	bottom: 10,
    	backgroundColor: 'red',
    },
    '#view2': {
    	height: Ti.UI.SIZE,
    	left: 10,
    	right: 10,
    	backgroundColor: 'red',
    },
    '#view3': {
    	height: Ti.UI.SIZE,
    	backgroundColor: 'red',
    }

解説

縦に並べたい要素のに「layout: 'vertical'」を指定します。HTML で「position: 'relative'」を指定するのとは少し違いますね。

tss 属性

layout
子要素の並べ方を指定します(horizontal/vertical)
top, bottom, left, right
CSS でいうところの margin-* です
backgroundColor
CSS でいうところの background-color です

参考