第十四章:绝对布局(二)

简介:

附加可绑定属性

如果我们希望这个棋盘在屏幕的范围内尽可能大,我们需要在页面的SizeChanged处理程序中将BoxView元素添加到AbsoluteLayout,否则SizeChanged处理程序需要找到一些方法来改变 已经在Children集合中的BoxView元素的位置和大小。
这两个选项都是可能的,但第二个选项是首选,因为我们可以在程序的构造函数中只填充一次AbsoluteLayout的Children集合,然后稍后调整大小和位置。
在第一次遇到时,允许您设置已经在AbsoluteLayout中的子项的位置和大小的语法可能看起来有点奇怪。 如果view是View类型的对象而rect是一个Rectangle值,这里的语句给出了一个rect的位置和大小:

AbsoluteLayout.SetLayoutBounds(view, rect);

这不是您正在进行SetLayoutBounds调用的AbsoluteLayout实例。不。这是AbsoluteLayout类的静态方法。您可以在将视图子项添加到AbsoluteLayout子集合之前或之后调用AbsoluteLayout.SetLayoutBounds。实际上,因为它是一个静态方法,所以你可以在AbsoluteLayout实例化之前调用该方法!此SetLayoutBounds方法中根本不涉及AbsoluteLayout的特定实例。
让我们看一些使用这个神秘的AbsoluteLayout.SetLayoutBounds方法的代码,然后检查它是如何工作的。
ChessboardDynamic程序页面构造函数使用简单的Add方法,无需定位或调整大小,以便在一个for循环中将32个BoxView元素添加到AbsoluteLayout。为了在棋盘周围提供一点边距,AbsoluteLayout是ContentView的子节点,并在页面上设置了填充。此ContentView有一个SizeChanged处理程序,用于根据容器的大小定位和调整AbsoluteLayout子项的大小:

public class ChessboardDynamicPage : ContentPage
{
    AbsoluteLayout absoluteLayout;
    public ChessboardDynamicPage()
    {
        absoluteLayout = new AbsoluteLayout
        {
            BackgroundColor = Color.FromRgb(240, 220, 130),
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center
        };
        for (int i = 0; i < 32; i++)
        {
            BoxView boxView = new BoxView
            {
                Color = Color.FromRgb(0, 64, 0)
            };
            absoluteLayout.Children.Add(boxView);
        }
        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 squareSize = Math.Min(contentView.Width, contentView.Height) / 8;
        int index = 0;
        for (int row = 0; row < 8; row++)
        {
            for (int col = 0; col < 8; col++)
            {
                // Skip every other square.
                if (((row ^ col) & 1) == 0)
                    continue;
                View view = absoluteLayout.Children[index];
                Rectangle rect = new Rectangle(col * squareSize, 
                                               row * squareSize, 
                                               squareSize, squareSize);
                AbsoluteLayout.SetLayoutBounds(view, rect);
                index++;
            }
        }
    }
}

SizeChanged处理程序包含与ChessboardFixed中的构造函数相同的逻辑,除了BoxView元素已经存在于AbsoluteLayout的Children集合中。 所有必要的是在容器大小改变时(例如,在电话方向改变期间)定位和调整每个BoxView的大小。 for循环以每个BoxView的静态AbsoluteLayout.SetLayoutBounds方法调用结束,并计算Rectangle值。
现在棋盘的大小适合屏幕稍微有点:
2018_08_29_114020
显然,神秘的AbsoluteLayout.SetLayoutBounds方法可行,但如何? 它有什么作用? 如何在不引用特定AbsoluteLayout对象的情况下设法完成它的工作?
您刚刚看到的AbsoluteLayout.SetLayoutBounds调用如下所示:

AbsoluteLayout.SetLayoutBounds(view, rect);

该方法调用完全等同于子视图上的以下调用:

view.SetValue(AbsoluteLayout.LayoutBoundsProperty, rect);

这是对子视图的SetValue调用。这两个方法调用完全等价,因为第二个是AbsoluteLayout在内部定义SetLayoutBounds静态方法的方式。 AbsoluteLayout.SetLayoutBounds只是一种快捷方法,类似的静态AbsoluteLayout.GetLayoutBounds方法是GetValue调用的快捷方式。
您会记得SetValue和GetValue是由BindableObject定义的,用于实现可绑定属性。仅从名称判断,AbsoluteLayout.LayoutBoundsProperty当然看起来是一个BindableProperty对象,就是这样。但是,它是一种非常特殊的可绑定属性,称为附加可绑定属性。
只能在定义属性的类的实例或派生类的实例上设置正常的可绑定属性。附加的可绑定属性可以破坏该规则:附加的可绑定属性由一个类定义 - 在本例中为AbsoluteLayout - 但设置在另一个对象上,在本例中为AbsoluteLayout的子对象。该物业有时被称为附属于儿童,因此得名。
AbsoluteLayout的子节点不知道传递给其SetValue方法的附加可绑定属性的目的,并且子节点在其自己的内部逻辑中不使用该值。子进程的SetValue方法只是将Rectangle值保存在子进程中由BindableObject维护的字典中,实际上将此值附加到可能在某些子进程中使用的子进程中。
由父级指向 - AbsoluteLayout对象。
当AbsoluteLayout布置其子节点时,它可以通过调用子节点上的AbsoluteLayout.GetLayoutBounds静态方法来查询每个子节点上此属性的值,该子节点又使用AbsoluteLayout.LayoutBoundsProperty附加的可绑定属性调用子节点上的GetValue。对GetValue的调用从存储在子项中的字典中获取Rectangle值。
您可能想知道:为什么需要这样一个迂回过程来为AbsoluteLayout的孩子设置定位和大小调整信息? View是否更容易定义应用程序可以设置的简单X,Y,Width和Height属性?
也许,但这些属性仅适用于AbsoluteLayout。使用Grid时,应用程序需要在Grid的子项上指定Row和Column值,并且在使用您自己设计的布局类时,可能还需要其他一些属性。附加的可绑定属性可以处理所有这些情况以及更多。
附加的可绑定属性是一种通用机制,它允许将一个类定义的属性存储在另一个类的实例中。您可以使用名为CreateAttached和CreateAttachedReadOnly的BindableObject的静态创建方法来定义自己的附加可绑定属性。 (您将在第27章“自定义渲染器”中看到一个示例。)
附加属性主要用于布局类。正如您将看到的,Grid定义了附加的可绑定属性以指定每个子节点的行和列,而RelativeLayout也定义了附加的可绑定属性。
之前您已经看到了AbsoluteLayout的Children集合定义的其他Add方法。这些实际上是使用这些附加的可绑定属性实现的。调用absoluteLayout.Children.Add(view,rect);
像这样实现:

AbsoluteLayout.SetLayoutBounds(view, rect);
absoluteLayout.Children.Add(view);

仅使用Point参数的Add调用仅设置子项的位置,并让子项自身大小:

absoluteLayout.Children.Add(view, new Point(x, y));

这是使用相同的静态AbsoluteLayout.SetLayoutBounds调用实现的,但对视图的宽度和高度使用特殊常量:

AbsoluteLayout.SetLayoutBounds(view, 
         new Rectangle(x, y, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize)); 
absoluteLayout.Children.Add(view);

您可以在自己的代码中使用AbsoluteLayout.AutoSize常量。

目录
相关文章
|
3月前
|
前端开发 开发者 UED
Web前端布局的救赎:掌握清除浮动的艺术,告别布局混乱!
【8月更文挑战第23天】在Web前端开发中,浮动(float)是一种常用的CSS布局技术,但会导致父元素高度塌陷。清除浮动至关重要,常用方法包括:使用额外的清除元素、伪元素、`overflow`属性、`flexbox`布局、`grid`布局以及`clearfix`方法。每种方法各有优缺点,适用于不同场景。随着新技术的发展,开发者应持续学习,选择合适的方法以确保布局稳定性和提升用户体验。
40 0
|
3月前
|
前端开发 UED
设计新潮流:CSS动画毛玻璃按钮,展开效果引人入胜!
设计新潮流:CSS动画毛玻璃按钮,展开效果引人入胜!
|
前端开发
前端学习案例1-圣杯布局1
前端学习案例1-圣杯布局1
78 0
前端学习案例1-圣杯布局1
文字处理技术:试图通过多次布局解决布局问题的思路是否可以避免?
文字处理技术:试图通过多次布局解决布局问题的思路是否可以避免?
110 0
|
算法
文字处理技术:布局的核心是行布局,难点是换行算法
文字处理技术:布局的核心是行布局,难点是换行算法
431 0
文字处理技术:页面布局时,有两个方向
文字处理技术:页面布局时,有两个方向
134 0
文字处理技术:正式开始新布局工作
文字处理技术:正式开始新布局工作
118 0
|
前端开发 JavaScript 算法
Flexbox布局中不为人知的细节
长文预警,关于Flexbox看这个就够了。
Flexbox布局中不为人知的细节
|
JavaScript Android开发