Question

我喜欢Scaloid，但我很难让任何布局超越简单的垂直堆栈UI元素，包括他们的主页示例。这是scaloid网站上的示例代码：

   new SVerticalLayout {
      STextView("Sign in").textSize(24.5 sp).<<.marginBottom(25 dip).>>
      STextView("ID")
      SEditText()
      STextView("Password")
      SEditText() inputType TEXT_PASSWORD
      SButton("Sign in")
      this += new SLinearLayout {
        SButton("Help")
        SButton("Sign up")
      }
    }.padding(20 dip)

试试这个，我这样做了：

class MyActivity extends SActivity {

      onCreate {

        contentView = new SVerticalLayout {
          STextView("Sign in").textSize(24.5 sp).<<.marginBottom(25 dip).>>
          STextView("ID")
          SEditText()
          STextView("Password")
          SEditText() inputType TEXT_PASSWORD
          SButton("Sign in")
          this += new SLinearLayout {
            SButton("Help")
            SButton("Sign up")
          }
        }.padding(20 dip)
      }
}

但是，当我在手机上试用此功能（Nexus 5处于纵向）时，不会出现“注册”按钮。 “帮助”按钮跨越屏幕宽度。我的期望是SLinearLayout会产生嵌入在SVerticalLayout中的水平布局，并且我会看到两个按钮并排。

所以有三个问题：

1）scaloid示例是否正确？

2）我是否正确地将其嵌入到我的代码中？即将contentView设置为SVerticalLayout？

3）如何修改它以使“帮助”和“注册”按钮并排显示在一行上？

Answer 1

我明白了。如果你明确指定它们的约束，那么这两个按钮会显示在一行：

SButton("Help").<<(WRAP_CONTENT, MATCH_PARENT)

更正后的例子是：

 contentView = new SVerticalLayout {
    STextView("Sign in").textSize(24.5 sp).<<.marginBottom(25 dip).>>
      STextView("ID")
    SEditText()
    STextView("Password")
    SEditText() inputType TEXT_PASSWORD
    SButton("Sign in")
    this += new SLinearLayout {
      SButton("Help").<<(WRAP_CONTENT, MATCH_PARENT)
      SButton("Sign up").<<(WRAP_CONTENT, MATCH_PARENT)
    }
  }.padding(20 dip)

Answer 2

我是这个例子的作者。这是一个错误。谢谢！

默认情况下，Scaloid的每个小部件都设置为android:layout_width="match_parent" android:layout_height="wrap_content"。因为“帮助”按钮填充了父母，所以看不到“注册”。

解决方案是添加.wrap。整个代码变为：

new SVerticalLayout {
  STextView("Sign in").textSize(24.5 sp).<<.marginBottom(25 dip).>>
  STextView("ID")
  SEditText()
  STextView("Password")
  SEditText() inputType TEXT_PASSWORD
  SButton("Sign in")
  this += new SLinearLayout {
    SButton("Help")
    SButton("Sign up")
  }.wrap
}.padding(20 dip)

函数.wrap对宽度和高度应用WRAP_CONTENT：

https://github.com/pocorall/scaloid#methods-fill-and-wrap

scaloid示例布局不起作用

2 个答案: