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
KlausNahr
Posts: 45
Registered: ‎07-29-2008
My Device: Z10 Red, 8900, PlayBook

Resize of ImageView with ScalingMethod.AspectFit

Hi,

 

is there any way to automatically resize an ImageView with ScalingMethod.AspectFit so that the ImageView has just the size of the image? I am changing dynamically the images and do not like the empty space on top and below the scaled images?

 

As a workaround I read the image, get the original width and height and set the preferredWidth and preferredHeight based on the image dimension and the screen width. But thats not very elegant.

Klaus Nahr
Developer
pyth
Posts: 508
Registered: ‎01-19-2011
My Device: My Trusty Red Plane

Re: Resize of ImageView with ScalingMethod.AspectFit

Hi

 

how are you loading the images? When I load images (see code below), they already are the way you described (the button moves up because my second image is smaller). But I don't set any scaling at all, probably because the outer container resizes everything itself. Can you post your code?

 

// Default empty project template
import bb.cascades 1.0

Page { 
    Container {
        
        id:container
        property variant imgSource: "asset:///images/flower200x300.png"
        
        ImageView {
            id: imageView
            imageSource: container.imgSource
        }   
        
        Button {
            onClicked: {
            	container.imgSource = "asset:///images/flower100x200.png";
            }
        }   
    }
}

 

-----------------------------------------------------------------------
I'm a bird from outer space. But I'm not flappy o.o
Developer
KlausNahr
Posts: 45
Registered: ‎07-29-2008
My Device: Z10 Red, 8900, PlayBook

Re: Resize of ImageView with ScalingMethod.AspectFit

Hi,

 

I think that happens because my image is scaled down. For example, if my image is 1280 * 200 Pixel with AspectFit its vertically centered in an area of 768 * 200 Pixel on a Z10 in Portrait mode.

 

BlackBerry ImageView.png

 

import bb.cascades 1.2

Page {
    Container {
        ScrollView {
            scrollViewProperties.scrollMode: ScrollMode.Vertical
            Container {
                Label {
                    text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
                }
                ImageView {
                    imageSource: "asset:///images/Image%201280x200.jpg"
                }
                Label {
                    text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
                }
                ImageView {
                    scalingMethod: ScalingMethod.AspectFit
                    imageSource: "asset:///images/Image%201280x200.jpg"
                }
                Label {
                    text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
                }
            }
        }
    }
}

 

Klaus Nahr
Developer
pyth
Posts: 508
Registered: ‎01-19-2011
My Device: My Trusty Red Plane

Re: Resize of ImageView with ScalingMethod.AspectFit

I didn't know the images get scaled down when they are larger than the screen (the documentation says otherwise, but meh, BB documentation...)

 

try this:

- set the inner container width to infinity

- add a LayoutUpdateHandler to all your images and let them rescale the scrollview ater they were loaded

 

- fix anything that isn't right, because I'm not sure if my code works perfectly :smileywink:

 

 

import bb.cascades 1.2

Page {
    Container {
        
        ScrollView {
            scrollViewProperties.scrollMode: ScrollMode.Both
            Container {
                
                id: innerContainer
                
                preferredWidth: Infinity
                
                Label {
                    text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
                }
                ImageView {
                    imageSource: "asset:///images/Image1280x200.png"
                    
                    onImageSourceChanged: {
                        //don't know if this really works
                        //if not, you need to set this before you change the imagesource
                        innerContainer.preferredWidth = Infinity 
                    }
                    
                    attachedObjects: [
                        LayoutUpdateHandler {
                            onLayoutFrameChanged: {
                                console.log("First: " + layoutFrame.width + " " + layoutFrame.height);
                                if (innerContainer.preferredWidth == Infinity) {
                                    if (layoutFrame.width < innerContainer.preferredWidth) {
                                        innerContainer.preferredWidth = layoutFrame.width;
                                    }
                                } else {
                                    if (layoutFrame.width > innerContainer.preferredWidth) {
                                        innerContainer.preferredWidth = layoutFrame.width;
                                    }
                                }
                            }
                        }
                    ]
                    scalingMethod: ScalingMethod.None
                }
                Label {
                    text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
                }
                ImageView {
                    scalingMethod: ScalingMethod.AspectFit
                    imageSource: "asset:///images/Image1280x200.png"
                    attachedObjects: [
                        LayoutUpdateHandler {
                            onLayoutFrameChanged: {
                                console.log("Second: " + layoutFrame.width + " " + layoutFrame.height);
                            }
                        }
                    ]
                }
                Label {
                    text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
                }
            }
        }
    }
}

 

-----------------------------------------------------------------------
I'm a bird from outer space. But I'm not flappy o.o
Developer
KlausNahr
Posts: 45
Registered: ‎07-29-2008
My Device: Z10 Red, 8900, PlayBook

Re: Resize of ImageView with ScalingMethod.AspectFit

I already tried it with the LayoutUpdateHandler. But all I got was the size of the ImageView, not the size of the actual image inside the ImageView which I would need to resize the ImageView.

Klaus Nahr
Developer
pyth
Posts: 508
Registered: ‎01-19-2011
My Device: My Trusty Red Plane

Re: Resize of ImageView with ScalingMethod.AspectFit

[ Edited ]

I know, that's why I set the outer container to preferredWidth: Infinity, to use the automatic layouter again

-----------------------------------------------------------------------
I'm a bird from outer space. But I'm not flappy o.o
Developer
KlausNahr
Posts: 45
Registered: ‎07-29-2008
My Device: Z10 Red, 8900, PlayBook

Re: Resize of ImageView with ScalingMethod.AspectFit

By fortune I found a solution:

 

 

Page {
    Container {
        horizontalAlignment: HorizontalAlignment.Fill
        
        Label {
            text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
        }
        ImageView {
            imageSource: "asset:///images/Image%201280x200.jpg"
        }
        Label {
            text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
        }
        ImageView {
            id: ivImage2
            scalingMethod: ScalingMethod.AspectFit
            horizontalAlignment: HorizontalAlignment.Fill
            imageSource: "asset:///images/Image%201280x200.jpg"
            attachedObjects: [
                LayoutUpdateHandler {
                    onLayoutFrameChanged: {
                        ivImage2.preferredWidth = layoutFrame.width;
                    }
                }
            ]
        }
        Label {
            text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
        }
    }
}

I don't know why that's working. It looks more like a bug. When I add a third smaller image strange things are happeining.

 

Page {
    Container {
        horizontalAlignment: HorizontalAlignment.Fill
        
        Label {
            text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
        }
        ImageView {
            imageSource: "asset:///images/Image%201280x200.jpg"
        }
        Label {
            text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
        }
        ImageView {
            id: ivImage2
            scalingMethod: ScalingMethod.AspectFit
            horizontalAlignment: HorizontalAlignment.Fill
            imageSource: "asset:///images/Image%201280x200.jpg"
            attachedObjects: [
                LayoutUpdateHandler {
                    onLayoutFrameChanged: {
                        ivImage2.preferredWidth = layoutFrame.width;
                    }
                }
            ]
        }
        Label {
            text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
        }
        ImageView {
            id: ivImage3
            scalingMethod: ScalingMethod.AspectFit
            horizontalAlignment: HorizontalAlignment.Fill
            imageSource: "asset:///images/Image%20400x62.jpg"
            attachedObjects: [
                LayoutUpdateHandler {
                    onLayoutFrameChanged: {
                        ivImage3.preferredWidth = layoutFrame.width;
                    }
                }
            ]
        }
        Label {
            text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
        }
    }
}

In Portrait Mode everything works nice. The smaller image is scaled up to fill the whole width.

 

BB P.png

 

But in Landscape Mode the second image is scaled down and the third image is scaled up so that both have the same size.

 

BB L.png

 

???

Klaus Nahr