易语言 - Amino 自动布局模块

受这篇帖子和 Unity 的启发，我借鉴了一下 Unity 的布局系统，开发了一个自动布局模块。
多图预警！！！

锚点

锚点由四个点组成，分别为左上、右上、左下、右下四个点，这四个锚点又分别对应控件的四个角。
这四个点可以重合，也就是说，“锚点”可以是点、线、矩形。

锚点的坐标为相对坐标，范围为 0-1，(0, 0) 表示左上角，而 (1, 1) 则表示右下角，如图。
你可以理解把锚点的坐标理解为比例，或百分比，锚点的真实坐标是将锚点的比例坐标乘以窗口宽高得到的。

锚点布局的原理的就是控件的四个角到对应的四个锚点的距离保持不变。
这么说很抽象，往下看。

准备工作

下载并引用模块，然后按下图写好最基本的初始化代码。

点型

中间

首先考虑最简单的形式。我们把锚点设置为 (0.5, 0.5)，也就是正中央。
（PS: X的四边分别表示四个锚点，下同）

在 __启动窗口_创建完毕 里添加：

layout.加入控件 (按钮1.取窗口句柄 (), 锚点_点状 (0.5, 0.5))

效果：

很明显，按钮到窗口的中间（也就是锚点的位置）的距离保持不变。

其他位置

试试 (1, 1)？
右下到按钮的距离不变

试试 (0, 0)？

一开始按钮没动，是因为锚点设置在左上角，拉右下角，锚点根本不动，当然按钮也不会动。

问：怎样将按钮固定在正中央呢？就像上面的黑色外形框一样
答案：锚点设置为 (0.5, 0.5)，并且把按钮移到窗口中央。

在点型下，只有位置发生变化，适合不需要改变大小的控件，如按钮等。
一般来说，想要控件固定在哪边，锚点就固定在哪边。
比如窗口最下方有一排控制按钮，这时锚点就可以放在左下、中下或者右下。

线型

试试把点型改为线型，放在最上面，也就是

修改刚刚的代码为：

layout.加入控件 (按钮1.取窗口句柄 (), 锚点_矩形 (0, 0, 1, 0))

这里注意一下，锚点_矩形() 传入的分别是矩形左上角的X/Y坐标、右下角的X/Y坐标
矩形左上角为 (0, 0)（窗口的左上角），右下角为 (1, 0)（窗口的右上角），矩形的高度为 0，自然成了线。

运行试试：

你会惊讶地发现，按钮居然拉伸了！
仔细观察，可以发现按钮左上角到窗口左上角距离不变，右上角到右上角距离不变。
事实上是按钮的四个角到窗口的四个角都不变，不然的话按钮的高度会变。

如果把线放到中间呢？
修改锚点为 (0, 0.5, 1, 0.5)，把两个点的坐标都往下移 0.5。
此时按钮的左上、左下到窗口左中距离不变，按钮的右上、右下到窗口的右中距离不变。

把线竖着放怎么样？
修改锚点为 (0, 0.5, 1, 0.5)

不出所料，按钮竖着变

横着放的情况下，按钮的宽度变，高度始终不变，适合进度条、地址框、单行标签等高度固定的控件。
竖着放的情况下，按钮的高度变，宽度始终不变，适合列表框、竖直滚动条等控件。

矩形型

首先试试“四角型”
修改锚点为 (0, 0, 1, 1)
矩形左上角为 (0, 0)（窗口的左上角），右下角为 (1, 1)（窗口的右下角），另外两个点的坐标是自动推断的，不需要填写。

运行：
可以看到，按钮的宽高都在变化。按钮的四个角到窗口的四个角的距离都不变。

同样的，半矩形的情况你也也可试试（(0, 0, 1, 0.5) 上半矩形，(0, 0, 0.5, 1) 左半矩形）

矩形型适合宽高都要拉伸的控件，如列表框、超文本浏览框、图片框等。