- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
此问题仅针对代号一。
用例
一些应用程序,如 Instagram,具有 x 轴可滚动框,如本视频所示:
https://www.informatica-libera.net/videoLavoro/Video-2019-02-07-11-16-59_0569.mp4
实现起来似乎很容易(将 BoxLayout.x()
设置为可在 x 轴上滚动),但实现起来并不容易。有一个隐藏的复杂性:每个框的宽度是屏幕宽度的百分比,因为用户应该看到第一个框和第二个框的一小部分,以了解滚动是可能的。也许这在 Instagram 应用中还不够明显,但在其他应用中更明显。
我做了什么
我不知道如何嵌套 Codename One 布局以满足 x 滚动 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);
}
}
}
主题.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;
}
此测试用例的屏幕截图:
我的问题
我需要一个适合这个用例的代码,改进我现有的代码(或者如果我的代码错误太多,则编写一个新代码)。谢谢
最佳答案
编辑,这仍然需要根据您的需要进行一些调整,但这是我更改的要点:
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% 的值。
关于codenameone - Codename 一种具有百分比宽度和自适应高度的自定义布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54573047/
我有下面的图表,它填充了显示器的宽度和高度。高度始终只比屏幕大一点,因此会出现滚动条以显示底部 20 像素左右。 有没有办法让 Kendo UI 显示 100%,而不是 105% 的高度? 在线示例:
这个问题在这里已经有了答案: Why doesn't height: 100% work to expand divs to the screen height? (12 个答案) 关闭 9 年前
此页面 ( http://purcraft.com/madeinla/) 有问题,我正在尝试使用 iframe 元素显示此页面的内容:( http://purcraft.com/madeinla/ho
我在一个父 div 中有 2 个子 div。 Child1 是标题,Child2 是正文。我希望将 Child 2 的高度设置为 Parent - Child1 的高度。 Child2 有内容,所以它
我正在尝试用图像填充窗口。我正在使用 CSS 来尝试解决这个问题,但我想知道是否有一种方法可以最大化图像的宽度/高度,直到所有空白区域都被填满,但又不会破坏质量。 .rel-img-co
这个问题在这里已经有了答案: How to make a div 100% height of the browser window (41 个回答) 关闭 8 年前。
这可能是一个新手问题,但是是否可以将 Sprite 图标添加到带有文本的标签中? 例如: labeltext .icon { width: 30px height: 30px;
我有 3 个 div,分别是 header、content 和 footer。页眉和页脚具有固定的高度,并且它们被设计为 float 在顶部和底部。我想要使用 jquery 自动计算中间的 con
我有一个外部 div,其指定的宽度/高度(以毫米为单位)。 (mm只是赋值,不用于渲染)。 里面有另一个 div,其实际宽度/高度(以 px 为单位)。 两个 div 可以具有不同的比例。 我想要做的
我正在为一个非常简单的画廊 webapp 进行布局排序,但是当我使用 HTML5 文档类型声明时,我的一些 div(100%)的高度会立即缩小,我不能似乎使用 CSS 将它们丰满起来。 我的 HTML
我正在为一个非常简单的画廊 webapp 进行布局排序,但是当我使用 HTML5 文档类型声明时,我的一些 div(100%)的高度会立即缩小,我不能似乎使用 CSS 将它们丰满起来。 我的 HTML
我想更改 UISearchBar。文本字段的高度和宽度。我的问题是如何更改 iphone 中 UISearchBar 中的 UiSearchbar 高度、宽度、颜色 和 Uitextfield 高度?
我想要两个宽度和高度均为 100% 的 div。我知道子 div 不会工作,因为父 div 没有特定的高度,但有没有办法解决这个问题? HTML: CSS: body
我有几个带有“priceText”类的 div,我试图实现如果 div.priceText 高度小于 100px,则隐藏 this div 中的图像。 我无法让它工作。我已成功隐藏所有 .priceT
我正在尝试从 Image 列中列出的图像中获取实际图像尺寸,并将其显示在 Image Size 列中。 我遇到的问题是,我只能获取第一张图片的大小,该图片会添加到 Image Size 列的每个单元格
我正在使用一个插件,它要求我在加载图像后获取图像的宽度和高度,而不管图像的尺寸是如何确定的。
我有一个示例 pdf(已附),它包括一个文本对象和一个高度几乎相同的矩形对象。然后我使用 itextrup 检查了 pdf 的内容,如下所示: 1 1 1 RG 1 1 1 rg 0.12 0 0 0
我是 WPF 新手。我试图解决的一个问题是如何在运行时获得正确的高度。 在我的应用程序中,我将用户控件动态添加到代码隐藏中的 Stackpanel。 Usercontrol 包含一些 Texblock
在自定义 WPF 控件中,我想将控件的宽度设置为高度的函数。例如:Width = Height/3 * x; 实现此目的的最佳方法是什么,以便控件正确且流畅地调整大小(和初始大小)? 最佳答案 您可以
好吧,我本以为这是一个简单的问题,但显然它让我感到困惑。 当我尝试设置 RibbonComboBox 的高度时,它不会移动它的实际大小,而是移动它周围的框。 这是我的 XAML:
我是一名优秀的程序员,十分优秀!