Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how set the LAYOUT_WATERFALL or other Options #25

Open
boardmain opened this issue Feb 27, 2015 · 5 comments
Open

how set the LAYOUT_WATERFALL or other Options #25

boardmain opened this issue Feb 27, 2015 · 5 comments

Comments

@boardmain
Copy link

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

@boardmain boardmain changed the title how set the LAYOUT_WATERFALL how set the LAYOUT_WATERFALL or other Options Feb 27, 2015
@ehijzen
Copy link

ehijzen commented Mar 27, 2015

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

@mpociot
Copy link
Collaborator

mpociot commented May 12, 2015

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
Copy link

amigoni commented Jun 2, 2016

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
Copy link

genocsb commented Apr 16, 2018

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

@torlanco
Copy link

torlanco commented Nov 6, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants