Placeholder scaling issue with URLImage in landscape mode

问题

I scaled the placeholder to the screen size as below. But if it is first viewed in portrait mode, it just takes the screen and doesn't cover whole screen in landscape mode. If it is 1st viewed in landscape mode, then it appears bigger than the screen size in portrait mode.

How do I fix this problem. I checked in PropertyCross demo and the same issue exists there too.

private EncodedImage largePlaceholder;

protected void initVars(Resources res) {
    Image tmp = Image.createImage(Display.getInstance().getDisplayWidth(), Display.getInstance().getDisplayWidth() / 6 * 3, 0);
    largePlaceholder = EncodedImage.createFromImage(tmp, false);
}

findMainImg(f).setIcon(URLImage.createToStorage(largePlaceholder, getMainImg + "_0_ y", getMainImg, URLImage.RESIZE_SCALE_TO_FILL));

Updated:

int sizethumb = 0;
int sizethumb1 = 0;
if (responsesImg.size() > 0) {

    sizethumb = largePlaceholder.getWidth();
    sizethumb1 = largePlaceholder.getHeight();
    findMainImg().setPreferredSize(new Dimension(sizethumb, sizethumb1));

    findMainImg(f).getAllStyles().setBgImage(URLImage.createToStorage(largePlaceholder, newsImgFilename + "_0_ y", responsesImg.get(0).get("image_url"), URLImage.RESIZE_SCALE));

    mainImageImgViewer = findMainImg(f).getAllStyles().getBgImage();
    System.out.println("beck0 " + mainImageImgViewer); //it gives null

回答1:

I suggest setting it as the bg image of the style and setting the background behavior to SCALE_TO_FILL or SCALE_TO_FIT.

回答2:

You are using the screen size to generate your placeholder image and the width of the screen in Landscape is bigger than Portrait.

If you want to make the image responsive, you will have to add orientation change listener which will download another image with a different size for landscape if you're coming from portrait and vice-versa.

private EncodedImage largePlaceholderPortrait;
private EncodedImage largePlaceholderLandscape;
private boolean isPortrait = Display.getInstance().isPortrait();

protected void initVars(Resources res) {
    Image tmp = Image.createImage(Display.getInstance().getDisplayWidth(), Display.getInstance().getDisplayWidth() / 6 * 3, 0);
    Image tmp2 = Image.createImage(Display.getInstance().getDisplayHeight(), Display.getInstance().getDisplayHeight() / 6 * 3, 0);
    largePlaceholderPortrait = EncodedImage.createFromImage(isPortrait ? tmp : tmp2, false);
    largePlaceholderLandscape = EncodedImage.createFromImage(isPortrait ? tmp2 : tmp, false);
}

findMainImg(f).setIcon(URLImage.createToStorage(largePlaceholderPortrait,  isPortrait ? getMainImg + "_0_y_portrait" : getMainImg + "_0_y_landscape", getMainImg, URLImage.RESIZE_SCALE_TO_FILL));


f.addOrientationListener(new ActionListener() {
    @Override
    public void actionPerformed(ActionEvent evt) {
        findMainImg(f).setIcon(URLImage.createToStorage(largePlaceholderPortrait,  isPortrait ? getMainImg + "_0_y_portrait" : getMainImg + "_0_y_landscape", getMainImg, URLImage.RESIZE_SCALE_TO_FILL));
    }
});

//Java 8
f.addOrientationListener((evt) -> {
    findMainImg(f).setIcon(URLImage.createToStorage(largePlaceholderPortrait,  isPortrait ? getMainImg + "_0_y_portrait" : getMainImg + "_0_y_landscape", getMainImg, URLImage.RESIZE_SCALE_TO_FILL));
});

来源：https://stackoverflow.com/questions/35216515/placeholder-scaling-issue-with-urlimage-in-landscape-mode

标签

java

codenameone