nuno / TiCollectionView

UICollectionView / GridView for Appcelerator Titanium
MIT License
111 stars 43 forks source link

Waterfall? #4

Open kosso opened 9 years ago

kosso commented 9 years ago

Nice work.

How hard would it be to add a pinterest-like 'Waterfall' Layout ability using this?

https://github.com/chiahsien/CHTCollectionViewWaterfallLayout

mpociot commented 9 years ago

Should be pretty easy to implement, once the main module is stable!

kosso commented 9 years ago

+1

justadaniel commented 9 years ago

+1

mpociot commented 9 years ago

I think this might be a good Android counterpart https://github.com/etsy/AndroidStaggeredGrid

mpociot commented 9 years ago

iOS is now implemented in version 1.1.0

viezel commented 9 years ago

:+1: very nice!

kosso commented 9 years ago

Cool! thanks!

yozef commented 9 years ago

Just tested it out in simulator! played nicely :)

Works also with animations when adding an item:

// Insert Item in List View with Animation
var addItemBtn = Ti.UI.createButton({title:'Add Item', bottom: 5, width: 250, backgroundColor:'white', height: 50});
addItemBtn.addEventListener('click', function(e){
    fruitSection.insertItemsAt(
                                0, // At Index
                               [{  
                                   properties: {height:400,width:400, backgroundColor:'gray'}, // Properties of Main View
                                   // Bind properties to bindId in Template
                                   info: {text: 'Something', color:'white'}, 
                                   es_info: {text: 'Manzana'}, 
                                   pic: {image: 'http://www.noao.edu/image_gallery/images/d2/ngc2237_400.jpg'}
                                }], {animated:true, animationStyle: Titanium.UI.iPhone.RowAnimationStyle.LEFT});
});
win.add(addItemBtn);

and add the following to childTemplates:

childTemplates: [
        {                        
            type: 'Ti.UI.ImageView', // Use an image view for the image
            bindId: 'pic',           // Maps to a custom pic property of the item data
            properties: {            // Sets the image view  properties
                width: Ti.UI.FILL, height: Ti.UI.FILL,
            }
        }, ...

add about 100 items, and ... it Runs Smoothly :+1:

mpociot commented 9 years ago

Thanks for testing this @yozef !

AppWerft commented 9 years ago

+1

deckameron commented 9 years ago

Hi @yozef,

I tried your solution on Android but it did not work! The item gets inserted on the listView but it shows just a white square instead. Did you experience this behaviour on your tests?

My best,

yozef commented 9 years ago

@deckameron I just tried it on iOS

deckameron commented 9 years ago

@yozef Thanks! :)

mpociot commented 9 years ago

Hey @deckameron ,

the waterfall layout is not available for Android. I'm working on it ;)

IonRod commented 9 years ago

@mpociot Hi! What about waterfall layout on Android? Maybe I could help you to implement it if you'l tell me what to do?

nuno commented 8 years ago

@mpociot you never actually had the change to implement on Android, Im correct?

nuno commented 7 years ago

It never was the change to implement on Android, sorry :( I accept PR :)