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
Developer
superdirt
Posts: 541
Registered: ‎05-17-2009
My Device: Not Specified

Snapping horizontal list view to center of screen

I have a horizontal ListView and when I swipe, the cell always sticks to the right edge of the screen, showing part of the cell that is to the left but not showing any of the cell that's to the right. I would like this cell to be centered in the middle of the screen so that the cells on either side of the cell in focus partially show.

 

Any ideas on how I can accomplish this?

 

Thanks,

Scott

Please use plain text.
Developer
Zmey
Posts: 1,511
Registered: ‎12-18-2012
My Device: PlayBook, Z10, DAC

Re: Snapping horizontal list view to center of screen

AFAIK this is currently not supported. I had to fake snap-to-center mode while implementing the spinner control by cutting cell backgrounds in the middle and using LeadingEdge snap mode.

Andrey Fidrya, @zmeyc on twitter
Please use plain text.
Developer
superdirt
Posts: 541
Registered: ‎05-17-2009
My Device: Not Specified

Re: Snapping horizontal list view to center of screen

I am not above faking it :smileyhappy:

 

I'm not sure I quite understand. Do you mean you decrease the size of the background of the cell that should be centered?

 

Thanks,

Scott

Please use plain text.
Developer
BBSJdev
Posts: 6,089
Registered: ‎07-05-2012
My Device: Playbook, Z10 LE, Dev Alpha C
My Carrier: Orange

Re: Snapping horizontal list view to center of screen

For stokLocker I wrote my own CustomControl but then I also wanted the center to overlap the left and right images.

 


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Please use plain text.
Developer
Zmey
Posts: 1,511
Registered: ‎12-18-2012
My Device: PlayBook, Z10, DAC

Re: Snapping horizontal list view to center of screen

spinnerTop.png (note the empty space at the top):

 

spinnerMiddle.png:

 

spinnerBottom.png (has some empty space at the bottom!):

When they are split like this, snapping to top produces "snap to center" effect. It's a really weird workaround, but I haven't found any simpler method. :Eek:

 

This is how the final control looks like:

 

 

 


Andrey Fidrya, @zmeyc on twitter
Please use plain text.
Developer
superdirt
Posts: 541
Registered: ‎05-17-2009
My Device: Not Specified

Re: Snapping horizontal list view to center of screen

Ahh I see! Thanks for the great visuals. That is a great idea.

 

I actually need to show the next cell over though because I'm trying to force the UI to pre-render that cell. The goal is that the cell is fully rendered when the user swipes left or right. The only way I know how to do this is to show it (at least partially) on the screen.

 

Scott

Please use plain text.
Developer
strobejb
Posts: 267
Registered: ‎10-15-2012
My Device: bb10 developer
My Carrier: Orange

Re: Snapping horizontal list view to center of screen

This is definitely possible

Use padding on the listview (on whichever side you need to) to force the 'current' item into the middle of the list.
Please use plain text.
Developer
BBSJdev
Posts: 6,089
Registered: ‎07-05-2012
My Device: Playbook, Z10 LE, Dev Alpha C
My Carrier: Orange

Re: Snapping horizontal list view to center of screen

[ Edited ]

If you do fancy writing your own then this example is a good starting point to writing a flexible carousel like horizontal scroller, obviously you can strip out the QT parts, circular imagery, the scaling aspects and overlapping if you desire...

 

https://github.com/blackberry/Cascades-Community-Samples/tree/master/stumpers/bbjamcarousel

 

Now I've written this, hacking it with padding sounds a lot easier. :smileyhappy:


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Please use plain text.
Developer
superdirt
Posts: 541
Registered: ‎05-17-2009
My Device: Not Specified

Re: Snapping horizontal list view to center of screen

Use padding on the listview (on whichever side you need to) to force the 'current' item into the middle of the list.

 Padding would increase the visual space between cells, wouldn't it? I can't have a gap between cells.

 

Scott

Please use plain text.
Developer
strobejb
Posts: 267
Registered: ‎10-15-2012
My Device: bb10 developer
My Carrier: Orange

Re: Snapping horizontal list view to center of screen

No. Simply put padding on the ListView component itself, not on the items.
Please use plain text.