Question

很容易创建按钮或按钮组,

    Root root = iface.createRoot(AxisLayout.vertical(), ROOT, modeLayer).
            setStyles(make(VALIGN.top, HALIGN.right)).
            setBounds(0, 0, width, height).
            add(backButton);

However, I couldn t figure out how to create two button in different group, i.e. one button on TOP-LEFT and on button on TOP-RIGHT...

I tried created two root, one button will be disabled/un-clickable. if I crate one root, they will grouped together :(

============ Thanks samskivert for the detail answer, but I m not able produce the correct result. For the 1st suggestion in orginal answer, full code as below:

    Font SMALL = PlayN.graphics().createFont("Helvetica", Font.Style.PLAIN, 24);
    final Stylesheet ROOT = SimpleStyles.newSheetBuilder().
            add(Element.class, make(FONT.is(SMALL))).
            add(Button.class, make(BACKGROUND.is(Background.solid(100)))).create();

    Group group = new Group(AxisLayout.vertical()).add(
            new Group(AxisLayout.horizontal(), Style.HALIGN.left).add(
                    new Button("Upper left")),
            AxisLayout.stretch(new Shim(1, 1)),
            new Group(AxisLayout.horizontal(), Style.HALIGN.right).add(
                    new Button("Lower right")));

    iface.createRoot(AxisLayout.vertical(), ROOT, modeLayer)
            .setBounds(0, 0, 960, 640)
            .add(group);

it produce this screen (ie, it s all centered, instead of upper-left/lower-down...) enter image description here

For the 2nd one, full code as below: Font SMALL = PlayN.graphics().createFont("Helvetica", Font.Style.PLAIN, 24);

    final Stylesheet ROOT = SimpleStyles.newSheetBuilder().
            add(Element.class, make(FONT.is(SMALL))).
            add(Button.class, make(BACKGROUND.is(Background.solid(100)))).create();

    Group group = new Group(new BorderLayout()).add(
      new Group(AxisLayout.horizontal(), Style.HALIGN.left).
        setConstraint(BorderLayout.NORTH).add(
              new Button("Upper left")),
      new Group(AxisLayout.vertical(), Style.HALIGN.right).
        setConstraint(BorderLayout.SOUTH).add(
              new Button("Lower right")));

    iface.createRoot(AxisLayout.vertical(), ROOT, modeLayer)
            .setBounds(0, 0, 960, 640)
            .add(group);

it produce this screenshot (ie, it s centered and overlap...) enter image description here

再次感谢。

Answer 1

EDIT: 哎呀,现在我看到你想要左上角和右上角,而不是左下角和右下角。你想要的配置更简单。只需在按钮之间插入一个伸展的shim:

iface.createRoot(AxisLayout.vertical().offStretch(), ROOT, modeLayer).
  setBounds(0, 0, width, height).
  add(new Group(AxisLayout.horizontal()).add(
    new Button("Upper-left"),
    AxisLayout.stretch(new Shim(1, 1)),
    new Button("Upper-right")));

亚历杭德罗回答:

AxisLayout 将所有元素置于一条( 水平或垂直) 线中。它们都必须彼此相邻, 中间有可配置的空白。如果您想要完成与 AxisLayout 的预期布局, 您需要使用这样的嵌套组 :

+---------------------------------------+
|+-------------------------------------+|
|| [Button]    left-aligned AxisLayout ||
|+-------------------------------------+|
|                                       |
|        [stretched shim widget]        |  <-- vertical AxisLayout
|                                       |
|+-------------------------------------+|
|| right-aligned AxisLayout   [Button] ||
|+-------------------------------------+|
+---------------------------------------+

在代码中,这看起来像:

Group group = new Group(AxisLayout.vertical()).add(
  new Group(AxisLayout.horizontal(), Style.HALIGN.left).add(
    new Button("Upper left")),
  AxisLayout.stretch(new Shim(1, 1)),
  new Group(AxisLayout.horizontal(), Style.HALIGN.right).add(
    new Button("Lower right")));

您也可以使用边境车站来避免中间的沙姆:

Group group = new Group(new BorderLayout()).add(
  new Group(AxisLayout().horizontal(), Style.HALIGN.left).
    setConstraint(BorderLayout.NORTH).add(
      new Button("Upper left")),
  new Group(AxisLayout.vertical(), Style.HALIGN.right).
    setConstraint(BorderLayout.SOUTH).add(
      new Button("Lower right")));

友情链接