PSD到应用程序重新访问(材料PSD)

Question

我正在尝试在我的应用程序上创建一个登录屏幕，看起来像这里的城市指南登录屏幕(2)：

City Guide Login Screen

我在我的表单中使用了以下代码，这些代码来自Materiall Design Demo和PSD上的博客App Revisited blog：

        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(s)设置了上边距和下边距，以便允许垂直方向上的合理空间。

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

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

我试着使用按钮UIID "removePadding“填充和页边距，但一点也不走运。

下面是我的屏幕在边框布局中添加文本字段和图标时的样子：

​

​

下面是当我从框布局中去掉文本字段，只留下按钮时，我的屏幕是什么样子：

​

​

此外，这两个文本字段在未选中的UIID上都有下划线图像。但是当电子邮件字段被取消选择时，它不会得到下划线的外观，当它被取消选择时，只有密码字段有下划线。这看起来像个bug!！

Answer 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的宽度)确定文本字段的宽度。