Quantcast
Channel: Appcelerator Developer Center Q&A Unanswered Questions 20
Viewing all articles
Browse latest Browse all 8068

Vertical ScrollableView(s) in a ScrollableView

$
0
0

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"
}

Viewing all articles
Browse latest Browse all 8068

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>