控件layout的改进建议

Studio
#1

有一种需求，现在的UI编辑器无法满足，例如：
在线性横向的布局下，有4个子控件A,B,C,D。 其中A,D宽度固定，B,C的宽度随着父控件的宽度而改变。B，C的宽度是无法设定为百分比的，因为百分比值也不固定。

我现在的做法类似wxPython的BoxSizer，可以为每一个子控件指定一个值proportion(>=0)，用以决定该控件的大小(仅仅在线性布局的方向上）。
proportion=0表示该控件大小固定，proportion>0 表示该控件占用父控件的“活动空间“的比例。”活动空间“指除去固定大小的控件(proportion==0)以外的所有空间。

例如，父控件宽度 100，
A: width=10, proportion=0
B: width=20, proportion=1
C: width=20,proportion=2
D: width=30,proportion=0

最终结果是：
A=10, D=30，因为它们都是固定宽度
活动空间= 100-(A+D) = 60
总proportion = 1+2 = 3
B = 60 * 1 / 3 = 20
C = 60 * 2 / 3 = 40

上例中，B,C的宽度没有起到作用。

更进一步，可以将B,C的宽度作为其”最小宽度“，以免控件被压缩得太小而影响效果。（这个需求不太强烈，且稍微复杂一些，并且最小宽度，proportion和父控件宽度可能无法同时满足）

目前，因为编辑器不支持该功能，所以我只能用tag来表示proportion。
希望能加入类似的功能，应该有很多同学需要。

#2

您好，非常感谢您的建议，目前关于您提出的ABCD的布局可以利用相对布局和百分比实现。

下图中是一个示例：【请参考http://www.cocoachina.com/bbs/read.php?tid=192657#900727】

#3

可能是我没有说清楚。整个Layout本身的宽度是不固定的。
比如Layout宽度是100的情况下，ABCD宽度分别为10, 20, 40, 30。 B,C分别占父Node宽度的20%, 40%
如果Layout宽度是120，ABCD宽度分别为10, 26.7,53.3, 30。 B,C分别占父Node宽度的22%和44%

子Node在父Node中的比例是不固定的。

#4

这样的话仅仅需要设置两个层（图中用于放置button的层）的大小为百分比即可。

关于布局系统我们还在继续优化中，但是可能不会去考虑特殊的需求，我们更多要完成的是通用的功能，通过对通用功能的组合可以完成任何分辨率上的特殊需求。

谢谢您的建议，在后期的优化设计讨论中会再讨论您提出的这个建议。感谢您对CocoStudio的支持。

#5

两个层怎么做呢？ 不是很明白，能否详细说一下？ 谢谢。

#6

因为你的ABCD有四部分组成，但是用的模式又不相同，你希望两边的为固定的，中间为百分比。所以可以将问题分拆为两个层，这样A,B向左停靠，C、D靠右停靠。

刚才想了下使用相对布局即可直接完成所有的设置。因为子控件的布局是可以相对于同级子控件的，大小是相对于父级的。这样可以通过设置button相对于同级子控件即可解决。

感谢您对cocostudio的支持。

#7

你可能误会我的意思了。

B，C两个子Node的大小，和父Node的大小，不是固定的百分比关系。

在你给出的项目中，如果增加Panel_24 的宽度，4个按钮所占无法占满Panel_24的范围。如果减少Panel_24的宽度，按钮会超出Panel_24的范围。
而期望的结果是，无论Panel_24的宽度如何变化，4个按钮始终填满整Panel_24。

#8

您好，根据您的描述我已大致了解您的需求，请问您是否在其他编辑器中体验过该功能，如果有是否可以给我一个提示呢？感谢您对CocoStudio的支持。

#9

XRCed，是wxWidgets/wxPython的一个UI编辑器。

安装
Python: http://legacy.python.org/ftp//python/2.7.6/python-2.7.6.msi
wxPython: http://downloads.sourceforge.net/wxpython/wxPython3.0-win32-3.0.0.0-py27.exe
wxPython Docs & Demo: http://downloads.sourceforge.net/wxpython/wxPython3.0-win32-docs-demos-3.0.0.0.exe

然后运行 wxPython Docs & Demos的 scripts/xrced.pyw即可。

可以打开附件的sample.xrc，里面有上面的例子。

#10

补充一张图

#11

好的，感谢您的建议以及对CocoStudio的支持。

#12

编辑器截图

#13

不客气。更应该感谢你们提供工具给大家使用。

#14

希望CocoStudio能给您带来更多便利。

#15

我总结了一下在使用UI编辑器过程中，在设计上期望得到改进的地方，主要有以下几点：

  1. 子控件的尺寸，可以随着父控件的Layout而动态调整。
    就是这个帖子前面提到的功能。

  2. 子控件的尺寸，可以影响到父控件的尺寸。
    例如要编辑一个常用的对话框。对话框的高度，应该和其中的文本长度有关。如果对话框高度是固定的，那么文字少的时候会有很多空白，比较难看。而文字多的时候则会显示不完全。

  3. 一个画布可以引用其他画布。
    这个功能很重要。因为游戏中的一个UI部件，经常会在多个界面中重复使用。我们现在的处理方法是，如果A界面需要用到B控件，那把B单独做成一个画布。
    而A里面放一个白色图片占位置，游戏中load A,B后，用B替换A中图片的位置。如果这个能在编辑器里做就更方便了。

其实1,2都是Layout相关的功能，应该算作一个。 我用上面提到的wxPython做过好几个软件的UI，基本上BoxSizer（也就是类似水平/垂直线性布局的东西）就能够满足绝大多数需求了。