how set the LAYOUT_WATERFALL or other Options

boardmain commented 9 years ago

hi how to set the LAYOUT_WATERFALL or the columnCount with alloy? all options are ignored

im doing this alloy.js

Alloy.Globals.collectionView = require("de.marcelpociot.collectionview");

index.js

 var data  = [];
    for(var i = 0; i < 20; i++){
        data.push({
           info : {text:'CIAO'+i, color:'red'}
        });
    }
    var listSection = Alloy.Globals.collectionView.createCollectionSection({headerTitle: "data"});
    listSection.setItems(data);
    Ti.API.info(JSON.stringify(data));
    $.listaLotti.setSections([listSection]);
    data = null;

index.xml

<ListView id="listaLotti" defaultItemTemplate="griglia" width="Ti.UI.FILL"  layout="Alloy.Globals.collectionView.LAYOUT_WATERFALL" height="Ti.UI.FILL"  module="CollectionView" method="createCollectionView" renderDirection="Alloy.Globals.collectionView.DIRECTION_SHORTEST_FIRST">
                 <Templates>
                     <ItemTemplate name="griglia">
                        <View id="container" bindId="view" backgroundColor="blue">
                            <Label bindId="info" width="Ti.UI.SIZE" height="Ti.UI.SIZE"  />
                        </View>
                    </ItemTemplate>
                     <ItemTemplate name="lista">
                        <View id="container" backgroundColor="green" bindId="view">
                            <Label bindId="info" width="Ti.UI.SIZE" height="Ti.UI.SIZE"  />
                        </View>
                    </ItemTemplate>
                 </Templates>
            </ListView>

but the layout type and the columnCount are ignored

ehijzen commented 9 years ago

this worked for me: ListView id="listView" backgroundColor="white" defaultItemTemplate="template" module="CollectionView" method="createCollectionView" columnCount="2" layout=1

mpociot commented 9 years ago

Did you solve this? I'm not sure if it works inside the XML files, but it should work this way in the TSS files

amigoni commented 8 years ago

I'm having issues setting the properties as well. I tried everything TSS, XML.

    <NavigationWindow id="itemsRoot" platform="ios">
        <Window id="win" fullscreen="true" navBarHidden="true">
            <Require id="navBar" required="true" src="navigation.navBar" type="widget"/>
            <ListView id="itemList" columnCount="2" backgroundColor="white" defaultItemTemplate="item" module="CollectionView" method="createCollectionView">
                <Templates>
                    <ItemTemplate name="item">
                        <View id="itemContainer" bindId="itemContainer">
                            <View id="imageContainer" bindId="imageContainer">>
                                 <ImageView id="image" bindId="image"/>
                            </View> 
                            <View id="bubble" bindId="bubble">
                                <View id="bubbleBG" bindId="bubbleBG"/>
                                <View id="ratingContainer" bindId="ratingContainer">
                                    <Label id="ratingLabel" bindId="ratingLabel"/>
                                    <ImageView id="starImage "bindId="startImage"/>
                                </View> 
                                <Label id="upVoteCountLabel" bindId="upVotCountLabel"/>
                            </View> 
                            <View id="itemLabelBG" bindId="itemLabelBG"/>                  
                            <View id="itemLabelContainer" bindId="itemLabelContainer">
                                <View id="titleContainer" bindId="titleContainer">
                                    <Label id="titleLabel" bindId="titleLabel"/>
                                </View>
                                <View id="bottomTextContainer" bindId="bottomTextContainer">
                                    <Label id="distanceNumberLabel" bindId="distanceNumberLabel"/>
                                    <Label id="priceNumberLabel" bindId="priceNumberLabel"/>
                                </View>
                            </View>
                            <ImageView id="banner" bindId="banner"/>
                        </View>                     
                    </ItemTemplate>
                </Templates>
                <ListSection id="items" name="items" columnCount="2" module="de.marcelpociot.collectionview" method="createCollectionSection"/>
            </ListView>
        </Window>
    </NavigationWindow>
</Alloy>`

`
"#win": {
    "backgroundColor": Alloy.CFG.colors.backgroundLightest
},
"#navBar": {
    screenTitleText: "",
    leftButton: "menuButton",
    logo: "logo"
},
"#itemList":{
    columnCount: 2,
    minimumColumnSpacing: 10,
    minimumInteritemSpacing: 10
},
"ListView":{
    columnCount: 2,
    minimumColumnSpacing: 10,
    minimumInteritemSpacing: 10
},
"ListSection":{
    columnCount: 2,
    itemSpacing: 10,
    lineSpacing: 10
}
"#items":{
    columnCount: 2,
    minimumColumnSpacing: 10,
    minimumInteritemSpacing: 10
}
"#itemContainer": {
    backgroundColor: Alloy.CFG.colors.itemBG,
    height: 200,
    left: 5,
    right: 0,
    top: 5,
    borderRadius: 8
},
"#imageContainer": { 
    backgroundColor: Alloy.CFG.colors.backgroundLightMedium,
    touchEnabled: false,
    left: 0,
    right: 0,
    top: 0,
    bottom: 0
},
"#image" :{
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE  
}
"#bubble": {
    //backgroundColor: "red",
    height: 36,
    width: 36,
    borderRadius: 18,
    top: 5,
    right: 5
},
"#bubbleBG": {
    backgroundColor: "black",
    opacity: 0.4,
    height: 36,
    width: 36,
    borderRadius: 18
},
"#ratingContainer": { 
    width: Ti.UI.SIZE,
    height: 15,
    layout: "horizontal"
},
"#ratingLabel": {
    "text": "4.5",
    minimumFontSize: 12,
    width: Ti.UI.SIZE,
    "color": Alloy.CFG.colors.textLight,
    "font" : Alloy.CFG.fonts.semiBold12,
    textAlign: Titanium.UI.TEXT_ALIGNMENT_RIGHT
},
"#starImage": {
    "height": "10",
    "width": "10",
    left: 1,
    "image":"/images/yellow_star.png",
},
"#upVoteCountLabel": {
    "text": "+5",
    minimumFontSize: 10,
    left: 5,
    right: 5,
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
    "color": Alloy.CFG.colors.textLight,
    "font" : Alloy.CFG.fonts.semiBold12
},
"#banner": {
    image: "/images/community_need_banner.png", 
    touchEnabled: false,
    height: 60,
    width: 60,
    top: 0,
    left: 0
},
"#image": {
    defaultImage: "/images/logoAloneLight.png",
    touchEnabled: false,
    width: 200,
    height: 200
},
"#itemLabelBG": {
    //backgroundColor: "black", 
    backgroundImage: "/images/gradient_square.png",
    //opacity: 0.5,
    "bottom": "0",
    "left": "0",
    "right": "0",
    "height": 50
},
"#itemLabelContainer": {
    backgroundColor: "transparent",
    "bottom": "0",
    //"layout": "vertical",
    "left": "0",
    "right": "0",
    "height": 50
},
"#titleContainer": {
    "left": "0",
    "right": "0",
    height: Ti.UI.SIZE,
    bottom: 16
},
"#titleLabel": {
    "text": "CAT 5 CABLE",
    //"minimumFontSize": "10",
    "height": Ti.UI.SIZE,
    "left": 5,
    "right": 5,
    "color": Alloy.CFG.colors.textLight, 
    "font" : Alloy.CFG.fonts.semiBold14
},
"#bottomTextContainer": {
    //backgroundColor: "red", 
    height: 13,
    left: 5,
    right: 5,
    bottom: 3
},
"#distanceNumberLabel": {
    width: "49%",
    left: 0,
    "text": "2.5",
    "minimumFontSize": 12,
    "color": Alloy.CFG.colors.textLight,
    "font" : Alloy.CFG.fonts.semiBold12
},
"#priceNumberLabel": {
    width: "49%",
    right: 0,
    "text": "$2.50",
    "minimumFontSize": 12,
    "color": Alloy.CFG.colors.textLight,
    "font" : Alloy.CFG.fonts.semiBold12,
    textAlign: Titanium.UI.TEXT_ALIGNMENT_RIGHT
}

genocsb commented 6 years ago

hi, any new about this issue, I can't set layout LAYOUT_WATERFALL

torlanco commented 4 years ago

I am not able to set the properties either, is on the tss file or on the xml element for ListView?

nuno / TiCollectionView

how set the LAYOUT_WATERFALL or other Options #25