I need to add vertical scrollable views in a scrollable view. To do this I have a main scrollableView. The views of the main scrollableView, are composed of other scrollableView, rotated 90° with a 2Dmatrix. The problem is that the content of the rotated scrollableView is cut. Have you any suggestions? I would like to see the contents of views in full screen. This is a sample code:
**index.xml
<Alloy> <Window class="container"> <ScrollableView id="horizontalSV"> <ScrollableView id="verticalSV1"> <View backgroundColor="red"> <Label>View 1a</Label> </View> <View backgroundColor="green"> <Label>View 1b</Label> </View> </ScrollableView> <ScrollableView id="verticalSV2"> <View backgroundColor="blue"> <Label>View 2a</Label> </View> </ScrollableView> <ScrollableView id="verticalSV3"> <View backgroundColor="purple"> <Label>View 3a</Label> </View> <View backgroundColor="yellow"> <Label>View 3b</Label> </View> </ScrollableView> </ScrollableView> </Window> </Alloy>
index.js
var t = Ti.UI.create2DMatrix().rotate(90); var t270 = Ti.UI.create2DMatrix().rotate(270); setTimeout(function(){ $.verticalSV1.transform = t; $.verticalSV2.transform = t; $.verticalSV3.transform = t; for(var i in $.verticalSV1.views){ $.verticalSV1.views[i].transform = t270; }; for(var i in $.verticalSV2.views){ $.verticalSV2.views[i].transform = t270; }; for(var i in $.verticalSV3.views){ $.verticalSV3.views[i].transform = t270; }; },5000); $.index.open();
index.tss
".container": { backgroundColor:"#000", fullscreen : true }, "View":{ top : "0dp", bottom : "0dp", left : "0dp", right : "0dp", height : "100%", width : "100%" } "Label": { color : "white", font : { fontSize : "40sp", fontWeight : "bold" } }, "#horizontalSV":{ top : "0dp", bottom : "0dp", left : "0dp", tight : "0dp", width : "100%", height : "100%", borderColor : "red" }