codenameone - 如果有许多图像在某些设备中几乎无法使用，则滚动问题

Question

整个屏幕充满了图像，就像 facebook 主屏幕一样。如果图像数量较少，则可以正常工作。但是一旦更多的图像，例如 50 张图像。该应用程序在 Android 设备中滚动时卡住了很长时间。似乎图像中有振动。在三星(j7 prime)中，这种概率较低但很明显，并且在其他三星设备中似乎很不舒服，并且给用户带来了不安。然而，在我测试过的其他一些设备中，例如在金立手机 (S6s) 中，该应用程序几乎无法播放。滚动非常困难，几乎无法滚动。

我的演示代码

    mainContainer = new Container (new BoxLayout (BoxLayout.y ()));

    for (String imgUrl : allImages){
      Image singleImg =  URLImage.createToStorage(placeholder, "small_" + imgObject + k, imgObject.toString(), URLImage.RESIZE_SCALE);
      Button b = new Button (singleImg);
      mainContainer.add (b);
    }

更新 1:我已将占位符大小更改为屏幕大小并添加了 2 个具有相同图像的 btns，因此没有很大。图像。然后，当我再次构建厨房水槽应用程序时，会出现与上述相同的问题。

if (placeholder == null) {
    Image placeholderTmp = Image.createImage(Display.getInstance().getDisplayWidth(), Display.getInstance().getDisplayWidth(), 0);
    if (Display.getInstance().isGaussianBlurSupported()) {
        placeholderTmp = Display.getInstance().gaussianBlurImage(placeholderTmp, 10);
    } else {
        placeholderTmp = placeholderTmp.modifyAlpha((byte) 100);
    }
    placeholder = EncodedImage.createFromImage(placeholderTmp, true);
}
InfiniteContainer ic = new InfiniteContainer(10) {
    List items;
    List allItems = new ArrayList();
    String nextURL = WEBSERVICE_URL;

    @Override
    public Component[] fetchComponents(int index, int amount) {
        if (index == 0) {
            nextURL = WEBSERVICE_URL;
        }
        if (nextURL == null) {
            return null;
        }

        ConnectionRequest req = new ConnectionRequest(nextURL) {
            @Override
            protected void readResponse(InputStream input) throws IOException {
                items = null;
                JSONParser parser = new JSONParser();
                Map response = parser.parseJSON(new InputStreamReader(input, "UTF-8"));
                items = (List) response.get("items");
                nextURL = (String) response.get("nextPage");
            }

            @Override
            protected void handleException(Exception err) {
                Log.e(err);
                Display.getInstance().callSerially(() -> {
                    ToastBar.showErrorMessage("An error occured while connecting to the server: " + err);
                });
            }

            @Override
            protected void handleErrorResponseCode(int code, String message) {
                Display.getInstance().callSerially(() -> {
                    ToastBar.showErrorMessage("Error code from the server: " + code + "\n" + message);
                });
            }

        };
        req.setPost(false);
        NetworkManager.getInstance().addToQueueAndWait(req);

        if (items == null) {
            return null;
        }

        allItems.addAll(items);

        Component[] result = new Component[items.size()];
        for (int i = 0; i < 3; i++) {

            for (int iter = 0; iter < result.length; iter++) {
                Map<String, Object> m = (Map<String, Object>) items.get(iter);
                String title = (String) m.get("title");
                String details = (String) m.get("details");
                String url = (String) m.get("url");
                String thumb = (String) m.get("thumb");
                URLImage thumbImage = URLImage.createToStorage(placeholder, url.substring(url.lastIndexOf("/") + 1), thumb, URLImage.RESIZE_SCALE_TO_FILL);
                ScaleImageButton btn = new ScaleImageButton(thumbImage);
                ScaleImageButton btn1 = new ScaleImageButton(thumbImage);
                ScaleImageButton btn2 = new ScaleImageButton(thumbImage);
                btn.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
                btn.getAllStyles().setMarginBottom(8);
                btn1.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
                btn1.getAllStyles().setMarginBottom(8);
                btn2.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
                btn2.getAllStyles().setMarginBottom(8);
                result[iter] = BoxLayout.encloseY(btn,btn1,btn2);
            }
        }
        Layout l = getLayout();
        if (l instanceof GridLayout) {
            int cmps = getComponentCount() - 1 + result.length;
            int extra = 0;
            if (cmps % 3 != 0) {
                extra = 1;
            }
            setLayout(new GridLayout(cmps / 3 + extra, 3));
        }
        return result;
    }
}

在这里，我在 mainContainer 中添加了按钮，并没有发现任何可以改进性能相关解决方案的地方。还有什么我需要寻找的吗？谢谢

Answer 1

我建议查看厨房水槽中的狗演示和开发人员指南中的性能部分。

另请查看我们延迟加载信息的厨房水槽中的联系人演示。

每个 URLImage 都会执行下载/延迟加载，这两者都可能使 UI 卡顿，您需要对其进行排队并进行处理。