Codename One自定义布局：百分比宽度和自适应高度

Question

本问题仅涉及Codename One。

应用场景

多个应用程序（如Instagram）都有x轴可滚动的框，就像在这个视频中所示：

https://www.informatica-libera.net/videoLavoro/Video-2019-02-07-11-16-59_0569.mp4

看起来很容易实现（使用设置为x轴可滚动的BoxLayout.x()），但实际上并不容易。存在一个隐藏的复杂性：每个框的宽度是屏幕宽度的百分比，因为用户应该看到第一个框和第二个框的一小部分以了解可以滚动。也许在Instagram应用中不够清晰，但在其他应用程序中更加明显。

我的工作

我无法想象如何嵌套Codename One布局以满足要求，即一个x-scrollable BoxLayout.x，其中每个Component应占据60%的屏幕宽度。但是，我用自定义Layout得到了非常相似的东西，但有一个大问题：我没有找到一种自动计算框的高度以适应其内容的方法。目前我有一个百分比宽度和固定高度。请参见在模拟器中拍摄的此视频：

https://www.informatica-libera.net/videoLavoro/Video-2019-02-07-11-38-10_0570.mp4

我的方法的另一个问题是，我的代码不适用于SpanLabel（我将文本拆分为标记，并为每个标记创建了一个Label）。

我的代码

以下代码是可以轻松复制和运行的测试用例。请注意，实际问题是根据用户数据生成的，因此我无法提前知道问题的长度。此外，平板电脑的屏幕宽度与智能手机的屏幕宽度不同（因此这两种情况下的高度应该不同）。目前我设置了固定高度为20mm。

TestBoxes.java

import static com.codename1.ui.CN.*;
import com.codename1.ui.Form;
import com.codename1.ui.Dialog;
import com.codename1.ui.Label;
import com.codename1.ui.plaf.UIManager;
import com.codename1.ui.util.Resources;
import com.codename1.io.Log;
import com.codename1.ui.Button;
import com.codename1.ui.Component;
import com.codename1.ui.Container;
import com.codename1.ui.Display;
import com.codename1.ui.Toolbar;
import com.codename1.ui.geom.Dimension;
import com.codename1.ui.layouts.BoxLayout;
import com.codename1.ui.layouts.FlowLayout;
import com.codename1.ui.layouts.Layout;
import com.codename1.util.StringUtil;
import java.util.LinkedHashMap;
import java.util.List;

/**
 * This file was generated by <a href="https://www.codenameone.com/">Codename
 * One</a> for the purpose of building native mobile applications using Java.
 */
public class TestBoxes {

    private Form current;
    private Resources theme;

    public void init(Object context) {
        // use two network threads instead of one
        updateNetworkThreadCount(2);

        theme = UIManager.initFirstTheme("/theme");

        // Enable Toolbar on all Forms by default
        Toolbar.setGlobalToolbar(true);

        // Pro only feature
        Log.bindCrashProtection(true);

        addNetworkErrorListener(err -> {
            // prevent the event from propagating
            err.consume();
            if (err.getError() != null) {
                Log.e(err.getError());
            }
            Log.sendLogAsync();
            Dialog.show("Connection Error", "There was a networking error in the connection to " + err.getConnectionRequest().getUrl(), "OK", null);
        });
    }

    public void start() {
        if (current != null) {
            current.show();
            return;
        }
        Form hi = new Form("Test Boxes", BoxLayout.y());
        hi.add(getCompleteProfileCnt());
        hi.show();
    }

    public void stop() {
        current = getCurrentForm();
        if (current instanceof Dialog) {
            ((Dialog) current).dispose();
            current = getCurrentForm();
        }
    }

    public void destroy() {
    }

    public Container getCompleteProfileCnt() {
        LinkedHashMap<String, Form> questions = new LinkedHashMap<>(6);
        int count = getRemainingQuestions(questions);
        Label completeProfileLabel = new Label("Complete your profile");

        Container boxQuestions = new Container(new BoxLayout(BoxLayout.X_AXIS_NO_GROW));
        boxQuestions.setScrollableX(true);

        for (String question : questions.keySet()) {
            Button button = new Button("Complete");
            if (questions.get(question) != null) {
                button.addActionListener(l -> {
                    questions.get(question).show();
                });
            } else {
                button.addActionListener(l -> {
                    Log.p("To be implemented...");
                });
            }
            Container boxSingleQuestion = new Container(new FixedBoxLayout(60, 20), "ProfileUtilities-BoxSingleQuestion");
            Container questionCnt = FlowLayout.encloseCenter(getArrayLabels(question, "Label"));
            Container singleQuestionCnt = BoxLayout.encloseYBottomLast(questionCnt, FlowLayout.encloseCenter(button));
            questionCnt.setUIID("ProfileUtilities-QuestionCnt");
            singleQuestionCnt.setUIID("ProfileUtilities-SingleQuestionCnt");
            boxSingleQuestion.add(singleQuestionCnt);
            boxQuestions.add(boxSingleQuestion);
        }

        Container resultCnt = new Container(BoxLayout.y());
        resultCnt.add(completeProfileLabel);
        resultCnt.add(boxQuestions);
        return resultCnt;

    }

    /**
     * Inserts in the given "questions" Map the remaining questions to complete
     * the profile of the current logged user, and returns the number of all
     * questions (that can be >= to the remaining questions);
     *
     * @param questions, note that the Map will be cleared before adding the
     * remaining questions
     *
     * @return
     */
    private int getRemainingQuestions(LinkedHashMap<String, Form> questions) {
        // THIS METHOD IS AN EXAMPLE, the questions are generated according to the user data
        int countTotalQuestions = 3;
        if (questions == null) {
            throw new IllegalArgumentException("ProfileUtilities.getRemainingQuestions invalid \"questions\" param, because it's null");
        }
        questions.clear();

        questions.put("Question 1 - Suppose that this a long text, try to make it longer", null);
        questions.put("Question 2 - Suppose a short text", null);
        questions.put("Question 3 - Suppose a short text plus an icon", null);

        return countTotalQuestions;
    }

    public static List<String> tokenize(String text, String separator) {
        if (separator == null) {
            separator = "\n";
        }
        return StringUtil.tokenize(text, separator);
    }

    /**
     * Converts a string to an array of Labels, that can be placed in a
     * FlowLayout: conceptually similar to RichTextView, it serves for special
     * use cases (like custom layouts) where a SpanLabel doesn't work well.
     *
     * @param text
     * @param UIID for font style, note that margin and padding will be ignored
     * @return
     */
    public static Label[] getArrayLabels(String text, String UIID) {
        List words = tokenize(UIManager.getInstance().localize(text, text), " ");
        Label[] labels = new Label[words.size()];
        for (int i = 0; i < words.size(); i++) {
            labels[i] = new Label(words.get(i) + " ", UIID);
            labels[i].getAllStyles().setMargin(0, 0, 0, 0);
            labels[i].getAllStyles().setPadding(0, 0, 0, 0);
        }
        return labels;
    }

    class FixedBoxLayout extends Layout {

        private int preferredWidth;
        private final int preferredHeight;
        private boolean isListenerAdded = false;
        private int percentageWidth;

        public FixedBoxLayout(int percentageWidth, float heightMM) {
            preferredWidth = Display.getInstance().getDisplayWidth() * percentageWidth / 100;
            preferredHeight = Display.getInstance().convertToPixels(heightMM);
            this.percentageWidth = percentageWidth;
        }

        @Override
        public void layoutContainer(Container parent) {
            Component cmp = parent.getComponentAt(0);
            cmp.setWidth(preferredWidth);
            cmp.setPreferredW(preferredWidth);
            cmp.setHeight(preferredHeight);
            cmp.setPreferredH(preferredHeight);
            if (cmp instanceof Container) {
                for (Component inner : ((Container) cmp).getChildrenAsList(true)) {
                    inner.setWidth(preferredWidth);
                    inner.setPreferredW(preferredWidth);
                }
            }
            if (!isListenerAdded) {
                isListenerAdded = true;
                parent.getComponentForm().addSizeChangedListener(l -> {
                    preferredWidth = Display.getInstance().getDisplayWidth() * percentageWidth / 100;
                    parent.revalidate();
                });
            }
        }

        @Override
        public Dimension getPreferredSize(Container parent) {
            return new Dimension(preferredWidth, preferredHeight);
        }

    }
}

theme.css

#Constants {
    includeNativeBool: true; 
}

/* Default text and color */
Default, Label, TextArea, TextField {
    font-family: "native:MainRegular";
    font-size: 3mm;
    color: black;
}
Button {
    font-family: "native:MainRegular";
    font-size: 3mm;
    color: white;
    background-color: black;
    border: 0.2mm black cn1-pill-border;
    padding: 0.5mm 1mm 0.5mm 1mm; /* top, right, bottom, left */
    margin: 1mm;
}

Button.pressed, Button.selected {
    color: black;
    background-color: white;
}

Button.disabled {
    color: white;
    background-color: gray;
}

ProfileUtilities-completeProfileLabel {
    font-family: "native:MainBold";
    font-size: 3.5mm;
    color: black;
    margin: 1mm;
    padding: 0;
    margin-bottom: 0;
}

ProfileUtilities-completeProfileBox {
    margin: 0;
    margin-top: 1mm;
    margin-bottom: 1mm;
    border: 1pt #3399ff solid;
    border-radius: 2mm;
}

ProfileUtilities-CompletedQuestions {
    font-family: "native:MainRegular";
    font-size: 3mm;
    color: darkgoldenrod;
    margin: 1mm;
    margin-top: 0;
    padding: 0;
}

ProfileUtilities-SingleQuestionLabel {
    font-family: "native:MainBold";
    font-size: 3mm;
    color: darkslateblue;
    text-align: center;
    padding: 2mm;
}

ProfileUtilities-BoxSingleQuestion {
    border: 1pt darkmagenta solid;
    border-radius: 2mm;
    /* This is the margin between boxes */
    margin: 1mm;
}

ProfileUtilities-SingleQuestionCnt {
    /* This is the padding inside each box */
    padding: 0;
    padding-top: 1mm;
    padding-bottom: 1mm;
}

ProfileUtilities-QuestionCnt {
    /* This is the padding of each question text */
    padding: 2mm;
}

这个测试用例的截图：

我的问题：

我需要一个适用于这种情况的代码，改进我现有的代码（如果我的代码太错误，则编写新代码）。谢谢！

- Francesco Galgani

---

也许我没有足够强调高度：所有的盒子都应该有相同的高度，这个高度应该根据盒子内容计算出每个盒子的最大首选高度而确定。 - Francesco Galgani

Answer 1

编辑，这仍然需要根据您的需求进行一些调整，但这是我更改的要点：

最初的回答

        Container boxSingleQuestion = new Container(BoxLayout.y(), "ProfileUtilities-BoxSingleQuestion");
        Container questionCnt = new Container(new FlowLayout(CENTER)) {
            @Override
            protected Dimension calcPreferredSize() {
                Dimension d = super.calcPreferredSize(); 
                d.setWidth(Math.min(getDisplayWidth(), getDisplayHeight()) / 10 * 6);
                d.setHeight(d.getHeight() / 10 * 18);
                return d;
            }                
        };
        questionCnt.addAll(getArrayLabels(question, "Label"));
        Container singleQuestionCnt = BorderLayout.center(questionCnt).
                add(SOUTH, FlowLayout.encloseCenter(button));
        questionCnt.setUIID("ProfileUtilities-QuestionCnt");
        singleQuestionCnt.setUIID("ProfileUtilities-SingleQuestionCnt");
        boxSingleQuestion.add(singleQuestionCnt);
        boxQuestions.add(boxSingleQuestion);

我删除了YLast布局的特殊布局和用法，这种布局是为全屏设计的，可能不适用于你的情况。通常我所做的是减小首选宽度，然后增加一个固定值的首选高度。通过使用BorderLayout，底部的按钮将始终可见。

最初的回答如下：

您正在从布局中更改组件的首选高度/宽度。这是错误的，您不应该这样做。布局应该只设置宽度/高度。如果您设置了宽度，您可以使用首选高度来获得正确的高度。要确保所有组件具有相同的高度，请循环遍历组件：

int height = 0;
for(Component c : parent) {
    height = Math.max(height, c.getPreferredH());
}

这应该会为你提供高度，假设你修复了代码以不改变首选宽度或高度（宽度也会影响高度！）。

一个稍微简单的方法是使用BoxLayout.X，并且只需为组件覆盖calcPreferredSize()函数并返回屏幕尺寸的60%即可。

- Shai Almog

---

亲爱的Shai，你的答案肯定是正确的，但对我没有帮助。我花了很多时间尝试解决这个问题，但我无法使我的测试用例工作。你能否尝试修复我的代码并将新的正确代码粘贴到一个新的答案或Github gist中？我不懒惰，我已经做了很多尝试，我也尝试了你覆盖calcPreferredSize()的建议，但没有成功。也许有些事情我不知道或者我不理解。谢谢你的帮助。 - Francesco Galgani

我会在周末看一下它。 - Shai Almog

我看了一下，又添加了一个答案。 - Shai Almog

我刚刚完成了对你的修复进行微调，我发现 d.setHeight(d.getHeight() / 10 * 18); 是不必要的，实际上如果我使用 Component.setSameSize 来确保所有的 BorderLayout 容器都具有完全相同的大小，高度将会自动调整。这正是我想要的 :) - Francesco Galgani