第十四章：绝对布局（三）

比例尺寸和定位

如您所见，ChessboardDynamic程序根据AbsoluteLayout本身的大小重新定位BoxView子项并调整其大小。 换句话说，每个孩子的大小和位置与容器的大小成比例。 有趣的是，AbsoluteLayout通常就是这种情况，如果AbsoluteLayout自动适应这种情况可能会很好。
它确实！
AbsoluteLayout定义了第二个附加的可绑定属性，名为LayoutFlagsProperty，还有两个静态方法，名为SetLayoutFlags和GetLayoutFlags。 设置此附加的可绑定属性允许您指定与AbsoluteLayout的大小成比例的子位置坐标或大小（或两者）。 在布置孩子时，AbsoluteLayout会对这些孩子进行扩展
适当的坐标和大小。
您可以选择此功能如何与AbsoluteLayoutFlags枚举的一个或多个成员一起使用：

• None (equal to 0)
• XProportional (1)
• YProportional (2)
• PositionProportional (3)
• WidthProportional (4)
• HeightProportional (8)
• SizeProportional (12)
• All (xFFFFFFFF)

您可以使用两个静态方法在AbsoluteLayout的子项上设置比例位置和大小：

AbsoluteLayout.SetLayoutBounds(view, rect);
AbsoluteLayout.SetLayoutFlags(view, AbsoluteLayoutFlags.All);

或者，您可以在接受AbsoluteLayoutFlags枚举成员的Children集合上使用Add方法的一个版本：

absoluteLayout.Children.Add(view, rect, AbsoluteLayoutFlags.All);

例如，如果使用SizeProportional标志并将子项的宽度设置为0.25，将高度设置为0.10，则子项将是AbsoluteLayout宽度的四分之一和高度的十分之一。很容易。
PositionProportional标志是类似的，但它考虑到孩子的大小：位置（0,0）将孩子放在左上角，位置（1,1）将孩子放在较低的位置 - 右上角和（0.5,0.5）的位置使孩子在AbsoluteLayout中居中。考虑到孩子的大小对于某些任务来说是很好的 - 例如将孩子置于AbsoluteLayout中心或者将其显示在右边或底边 - 但对其他任务来说有点尴尬。
这是ChessboardProportional。定位和大小调整的大部分工作已经移回构造函数。 SizeChanged处理程序现在仅通过将AbsoluteLayout的WidthRequest和HeightRequest属性设置为ContentView的宽度和高度的最小值来维持整体宽高比。删除SizeChanged处理，棋盘扩展到页面大小而不是填充。

public class ChessboardProportionalPage : ContentPage
{
    AbsoluteLayout absoluteLayout;
    public ChessboardProportionalPage()
    {
        absoluteLayout = new AbsoluteLayout
        {
            BackgroundColor = Color.FromRgb(240, 220, 130),
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center
        };
        for (int row = 0; row < 8; row++)
        {
            for (int col = 0; col < 8; col++)
            {
                // Skip every other square.
                if (((row ^ col) & 1) == 0)
                    continue;
                BoxView boxView = new BoxView
                {
                    Color = Color.FromRgb(0, 64, 0)
                };
                Rectangle rect = new Rectangle(col / 7.0, // x
                                               row / 7.0, // y
                                               1 / 8.0, // width
                                               1 / 8.0); // height
                absoluteLayout.Children.Add(boxView, rect, AbsoluteLayoutFlags.All);
            }
        }
        ContentView contentView = new ContentView
        {
            Content = absoluteLayout
        };
        contentView.SizeChanged += OnContentViewSizeChanged;
        this.Padding = new Thickness(5, Device.OnPlatform(25, 5, 5), 5, 5);
         this.Content = contentView;
    }
    void OnContentViewSizeChanged(object sender, EventArgs args)
    {
        ContentView contentView = (ContentView)sender;
        double boardSize = Math.Min(contentView.Width, contentView.Height);
        absoluteLayout.WidthRequest = boardSize;
        absoluteLayout.HeightRequest = boardSize;
    }
}

屏幕看起来与ChessboardDynamic程序相同。
每个BoxView都使用以下代码添加到AbsoluteLayout。 所有分母都是浮点值，因此除法的结果将转换为double：

Rectangle rect = new Rectangle(col / 7.0, // x
                               row / 7.0, // y
                               1 / 8.0, // width
                               1 / 8.0); // height
absoluteLayout.Children.Add(boxView, rect, AbsoluteLayoutFlags.All);

宽度和高度始终等于AbsoluteLayout的宽度和高度的八分之一。 这很清楚。 但是对于相对x和y坐标，row和col变量除以7（而不是8）。 for循环中的row和col变量的范围是0到7.行和col值0对应于left或top，但row和col值7必须映射到x和y坐标1以将子项定位到 右边或底边。
如果您认为可能需要一些可靠的规则来获得比例坐标，请继续阅读。