PSD TO APP REVISITED（材料 PSD）答案

【问题标题】：PSD TO APP REVISITED (Material PSD)PSD TO APP REVISITED（材料 PSD）
【发布时间】：2017-01-11 23:59:17
【问题描述】：

我正在尝试在我的应用上制作一个看起来像城市指南登录屏幕 (2) 的登录屏幕：

我已将以下代码用于我从 Materiall Design Demo 和 PSD To App Revisited 博客上的博客中获取的表单：

        f = new Form(new BorderLayout());
    f.setUIID("loginForm");
    f.getTitleArea().setUIID("Container");
    f.getToolbar().hideToolbar();
    Label logo = new Label();
    logo.setIcon(theme.getImage("logoHolder.png"));
    Container titleContainer = Container.encloseIn(
            new BorderLayout(BorderLayout.CENTER_BEHAVIOR_CENTER),
            logo, BorderLayout.CENTER);
    titleContainer.setUIID("loginTitleContainer");

    TextField login = new TextField("", "Your email address", 40, TextField.EMAILADDR);
    TextField password = new TextField("", "Your password", 40, TextField.PASSWORD);
    login.getAllStyles().setMargin(LEFT, 0);
    password.getAllStyles().setMargin(LEFT, 0);
    Label loginIcon = new Label("", "TextField");
    Label passwordIcon = new Label("", "TextField");
    loginIcon.getAllStyles().setMargin(RIGHT, 0);
    passwordIcon.getAllStyles().setMargin(RIGHT, 0);
    FontImage.setMaterialIcon(loginIcon, FontImage.MATERIAL_MAIL_OUTLINE, 3);
    FontImage.setMaterialIcon(passwordIcon, FontImage.MATERIAL_LOCK_OUTLINE, 3);

    Button loginButton = new Button();
    loginButton.setIcon(theme.getImage("login_login.png"));
    loginButton.setUIID("removePadding");
    Button exitButton = new Button();
    exitButton.setIcon(theme.getImage("login_exit.png"));
    exitButton.setUIID("removePadding");
    Button forgotButton = new Button("Forgot password?");
    forgotButton.setUIID("forgotPass");

    Label vSpacer = new Label();
    vSpacer.setUIID("longVSpacer");
    Label vSpacer1 = new Label();
    vSpacer1.setUIID("longVSpacer");
    Label vSpacer2 = new Label();
    vSpacer2.setUIID("vSpacer");
    Label vSpacer3 = new Label();
    vSpacer3.setUIID("vSpacer");

    Container loginCon = BoxLayout.encloseY(
            vSpacer1,
            BorderLayout.center(login).
                    add(BorderLayout.WEST, loginIcon),
            BorderLayout.center(password).
                    add(BorderLayout.WEST, passwordIcon),
            vSpacer,
            loginButton,
            vSpacer2,
            exitButton,
            vSpacer3,
            forgotButton
    );

    f.add(BorderLayout.NORTH, titleContainer);
    f.add(BorderLayout.CENTER, loginCon);
    f.show();

现在对于 UIID，“removePadding”将所有填充设置为 0，左边距设置为 3。

vSpacer 设置了顶部和底部边距，以便在垂直方向留出合理的空间。

当我不将文本字段添加到框布局时，一切正常，但是一旦我将任何文本字段添加到框布局中，北容器就会从左右收缩，并且不会覆盖整个宽度。

但是当从盒子布局中删除文本字段并添加一个按钮时，例如北容器覆盖整个宽度。

我尝试使用 UIID“removePadding”按钮填充和边距，但完全没有运气。

在边框布局中添加文本字段和图标时，我的屏幕如下所示：

当我从盒子布局中删除文本字段并只留下按钮时，我的屏幕如下所示：

此外，文本字段在未选择的 UIID 上都有下划线图像。但是电子邮件字段在未选中时没有下划线外观，只有密码字段在未选中时带有下划线。这看起来像一个错误！

【问题讨论】：

截图会有所帮助...
尊敬的 Shai 感谢您的及时回复。实际上我没有在我的布局中使用变量 tf 。我在我的盒子布局中使用了登录名、登录图标、密码和密码图标、登录按钮、退出按钮和忘记按钮。此框布局 ic 在表单边框布局中居中。问题是当我在框布局中使用文本字段：登录名和密码时，居中的框布局向右移动，北标题容器从左右缩小。请帮助这对我的申请真的很重要！！！即使没有设置大小的文本字段在添加时也会导致同样的问题
使用模拟器中的组件检查器工具查看占用该空间的内容。这不是文本字段，因为它们显然没有延伸到那里。由于标题区域在 NORTH 中，它应该与与文本字段相关的区域完全分开，因此这意味着某些东西正在改变表单的整个内容。从简短的评论中我怀疑这条线f.setUIID("loginForm");
男人！！！你是最棒的！！！谢谢一百万！！！
乐于助人。顺便说一句，这些会有所帮助，而不是感谢：codenameone.com/blog/how-you-can-help-spread-codenameone.html 也接受答案并投票会很好;-)

标签： codenameone

【解决方案1】：

替换：

TextField tf = new TextField("Hello");
tf.setWidth(300);

与：

TextField tf = new TextField("Hello", "", 5, TextField.ANY);

调用setWidth 总是错误的，布局管理器将根据在运行时确定的首选大小调整 UI 大小。 300 像素在高 DPI 手机上太小，在低 DPI 设备上太大。构造函数的第二种形式接受 columns 属性的值，该值根据字符宽度（例如字母 W * 5 的宽度）确定文本字段的宽度。

【讨论】：