codenameone - 在代号的容器中的两个图像之间添加空格
问题描述
我正在尝试在容器中添加 6 个图像,但是两个图像之间的差距很大,如下图所示。我试过这段代码。
class TestPallet extends Container {
TestIcon firstIcon;
TestIcon secondIcn;
TestIcon thirdIcn;
TestIcon fourIcn;
Container panel;
public TestPallet() {
super();
panel= new Container();
panel.getStyle().setBgColor(0x323232);
panel.getStyle().setBgTransparency(255);
panel.setLayout(new BoxLayout(BoxLayout.X_AXIS));
panel.getStyle().setBorder(Border.createLineBorder(2, 0xffffff));
panel.getStyle().setPadding(10, 10,10,10);
panel.getStyle().setMargin(50, 10, 10, 10);
panel.setSelectedStyle(panel.getStyle());
Container row1 = new Container();
row1.setLayout(new BoxLayout(BoxLayout.X_AXIS));
int margin = Display.getInstance().convertToPixels(1, true);
firstIcon = new ShapeIcon(1, this);
panel.addComponent(firstIcon);
secondIcn = new ShapeIcon(2, this);
panel.addComponent(secondIcn);
thirdIcn = new ShapeIcon(3, this);
panel.addComponent(thirdIcn);
fourIcn = new ShapeIcon(4, this);
panel.addComponent(fourIcn);
addComponent(panel);
}
}
class TestIcon extends Container{
boolean selected=false;
ShapePallet pallet;
int t;
public TestIcon(int s, ShapePallet sp) {
super();
pallet=sp;
t=s;
getStyle().setBgTransparency(0);
getStyle().setBgColor(0xdcdcdc);
this.setSelectedStyle(this.getStyle());
setFocusable(true);
}
@Override
public void paint(Graphics g) {
int size = Display.getInstance().convertToPixels(2, false);
Image im= null;
if(t==1) {
size *= 2;
im = DisplayManager.getWmUiBuilder().getResources().getImage("image1.png").scaled(size, size);
}
else if(t== 2) {
size *= 2;
im = DisplayManager.getWmUiBuilder().getResources().getImage("image2.png").scaled(size, size );
}
else if(t== 3) {
size *= 2;
im = DisplayManager.getWmUiBuilder().getResources().getImage("image3.png").scaled(size, size);
}
else if(t== 4) {
size *= 2;
im = DisplayManager.getWmUiBuilder().getResources().getImage("image4.png").scaled(size, size);
}
g.drawImage(im,getX() + ((getWidth() - im.getWidth())) / 2, getY() + ((getHeight() - im.getHeight()) / 2));
}
}
从图片可以看出,两张图片之间的空间太大了,这是从iPad上看的,在Iphone上我只能看到两张图片。在这种情况下,也缺少一个图像。那么,如何缩小两幅图像之间的差距呢?对此的任何答案都会有所帮助。谢谢
解决方案
我建议使用样式。
您还需要设置填充/边距单位,理想情况下使用毫米并将数字设置为较低的值。例如setPaddingUnit
/setMarginUnit
到Style.UNIT_TYPE_PIXELS
或Style.UNIT_TYPE_DIPS
。
更好的方法是使用网格布局,它可以均匀地分隔其中的组件。
推荐阅读
- python - Numpy - 切片 - 步骤检查
- react-native - 使用 Formik 反应原生日期选择器
- java - 在 Super 类中找不到主要方法
- python - 根据 Pandas 中不同列的 group by 更新特定列值
- javascript - 我如何创建下一页和上一页
- javascript - Dom 元素不适用于 1 个变量,也不适用于“let”变量
- php - 如何在laravel中检查数据数组到where条件?
- node.js - module.exports 与环境变量
- javascript - 我可以从应用程序将 cors 扩展到路由器吗?
- html - 带有箭头图标的角度自定义排序