Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Contributor
Posts: 19
Registered: ‎05-09-2013
My Device: Z10
My Carrier: None

horizontal listview - replicate the behaviour of the built-in photo app (image gallery).

[ Edited ]

Hi,

 

After selecting an image in the photo app a new page is opened with images displayed in a horizontal listview. It is possible to flick left and right to go to the previous and next item. On top of that items can be dragged and released and depending on how far they were they either snap back to it's original position or the next/previous item is animated in.

 

I've seen a couple of applications in the BB marketplace implementing the same behaviour.

 

From what I can tell a ListView has a snapMode option, but it's not the same thing. I've made some attempts with responding to touch events and switching between items via ListView's methods such as scrollToItem, but it was no way near as flawless as it works in the photo app (as well as in the other apps found on BB world). Does anyone know how can this be implemented correctly?

 

Thanks

Contributor
Posts: 19
Registered: ‎05-09-2013
My Device: Z10
My Carrier: None

Re: horizontal listview - replicate the behaviour of the built-in photo app (image gallery).

I totally missed that there's another option, FlickMode. So a sample horizontal ListView which has the properties I mentioned would look like this:

 

 

import bb.cascades 1.0

Page {
    Container {
        layout: DockLayout {
        }
        ListView { 

            flickMode: FlickMode.SingleItem
            snapMode: SnapMode.LeadingEdge
            
            layout: StackListLayout {
                orientation: LayoutOrientation.LeftToRight
            }
            dataModel: XmlDataModel {
                source: "data.xml"
            } 
            
            listItemComponents: [
                ListItemComponent {
                    type: "header"
                    Container {
                     preferredWidth: 768
                     Label {
                         text: ListItemData.name
                         horizontalAlignment: HorizontalAlignment.Center
                     } 
                    }
                }
            ]
        }
    }
}

Highlighted
Developer
Posts: 587
Registered: ‎04-01-2009
My Device: Z10, PlayBook
My Carrier: NA

Re: horizontal listview - replicate the behaviour of the built-in photo app (image gallery).

Some questions:

 

1. Does this support pinch zooming? (or could it?)

 

2. Does this support auto-orienting photos taken with the camera so that they point up correctly?