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
Trusted Contributor
Brennan12325
Posts: 204
Registered: ‎05-15-2012
My Device: None
My Carrier: Telus

How can I center an image in a scroll view

Say I have a a scrollview that i know the height and width of (the entire screen height and width for example, 768x1280).

 

I want to "aspect fit" the image so that it takes up the entire width of the screen, so if the image is 800x600 it would scale to 768x580 (guessing on the scaling of the height, haven't calculated exactly what it would scale too).

 

Now my image is 580 tall (after scaling), so I have 700 leftover pixels. I want my image then to have 350 pixels above it and 350 pixels below it.

 

How can I make a scrollview / imageview combination behave in this way? The image is being dynamically loaded and we are setting the imageSource of the ImageView in a SLOT.

 

I've tried scrolling my scrollview after doing some math on the fly, but the ScalingMethod AspectFit on the scrollview appears to be completely overriding everything and aligning the top of the image with the top of the scrollview.

----------------------
Check out my app, Alien Flow for reddit

And of course, like my post if you found it helpful or informative!
Please use plain text.
Developer
oliver_kranz
Posts: 216
Registered: ‎09-18-2009
My Device: Z10
My Carrier: O2

Re: How can I center an image in a scroll view

Put a container into the ScrollView and set the container to the screen height. Put the ImageView in this container and center it vertically.

 

ScrollView {
    verticalAlignment: VerticalAlignment.Fill
    horizontalAlignment: HorizontalAlignment.Fill
    Container {
        horizontalAlignment: HorizontalAlignment.Fill
        verticalAlignment: VerticalAlignment.Top
        minHeight: 1280
        ImageView {
            horizontalAlignment: HorizontalAlignment.Fill
            verticalAlignment: VerticalAlignment.Center
        }
    }
}

 

Please use plain text.
Trusted Contributor
Brennan12325
Posts: 204
Registered: ‎05-15-2012
My Device: None
My Carrier: Telus

Re: How can I center an image in a scroll view

The image needs to be scrollable and support pinch to zoom. Do you know if thats also possible with this solution? I dont have a device to test the pinch to zoom gesture with, yet. It seems that the whole container should be zoomable, so I'd suspect this solution should work.
----------------------
Check out my app, Alien Flow for reddit

And of course, like my post if you found it helpful or informative!
Please use plain text.