第二十六章：自定义布局（十三）

Layout和LayoutTo
VisualElement定义了一组转换属性。这些是AnchorX，AnchorY，Rotation，RotationX，RotationY，Scale，TranslationX和TranslationY，它们根本不影响布局。换句话说，设置这些属性不会生成对InvalidateMeasure或InvalidateLayout的调用。从GetSizeRequest返回的元素大小不受这些属性的影响。布局调用大小和位置元素，就好像这些属性不存在一样。
这意味着您可以为这些属性设置动画，而不会生成一堆布局循环。在ViewExtensions中定义为扩展方法的TranslateTo，ScaleTo，RotateTo，RotateXTo和RotateYTo动画方法完全独立于布局。
但是，ViewExtensions还定义了一个名为LayoutTo的方法，该方法对Layout方法进行动画调用。这会导致更改元素相对于其父元素的布局大小或位置，并设置元素的Bounds，X，Y，Width和Height属性的新值。
因此，使用LayoutTo需要采取一些预防措施。
例如，假设一个元素是StackLayout的子元素。当StackLayout获取LayoutChildren调用时，它将调用该元素上的Layout来调整大小并将其定位在相对于自身的特定位置。假设您的程序然后在该元素上调用LayoutTo以赋予它新的大小和位置。 StackLayout不知道这一点，所以如果StackLayout经历另一个布局周期，它会将元素移回它认为应该的位置。如果您仍然需要将元素放在StackLayout认为应该的位置之外的其他位置，您可能希望将处理程序附加到StackLayout的LayoutChanged事件并调用Layout或再次对该元素运行LayoutTo动画。
另一个问题是在具有许多子项的布局上运行LayoutTo动画。当然，这是允许的，但请记住，布局将获得对其Layout方法的大量调用，因此在动画正在进行时也会调用LayoutChildren方法。对于每个对LayoutChildren覆盖的调用，布局类将尝试布置其所有子代（当然，其中一些子代可能是带子代的其他布局），并且动画可能会变得非常不稳定。
但是您可以使用LayoutTo动画和Layout方法之间的关系来实现一些有趣的效果。元素必须将其Layout方法调用为在屏幕上可见，但调用LayoutTo必须满足该要求。
这是一个派生自CartesianLayout的类，名为AnimatedCartesianLayout。它定义了两个可绑定属性（不附加可绑定属性）来控制动画，而不是调用Layout并设置Rotation属性，它调用LayoutTo和（可选）RotateTo：

namespace Xamarin.FormsBook.Toolkit
{
    public class AnimatedCartesianLayout : CartesianLayout
    {
        public static readonly BindableProperty AnimationDurationProperty =
            BindableProperty.Create(
                "AnimatedDuration",
                typeof(int),
                typeof(AnimatedCartesianLayout),
                1000);
        public int AnimationDuration
        {
            set { SetValue(AnimationDurationProperty, value); }
            get { return (int)GetValue(AnimationDurationProperty); }
        }
        public static readonly BindableProperty AnimateRotationProperty =
            BindableProperty.Create(
                "AnimateRotation",
                typeof(bool),
                typeof(AnimatedCartesianLayout),
                true);
        public bool AnimateRotation
        {
            set { SetValue(AnimateRotationProperty, value); }
            get { return (bool)GetValue(AnimateRotationProperty); }
        }
        protected override void LayoutChildren(double x, double y, double width, double height)
        {
            foreach (View child in Children)
            {
                if (!child.IsVisible)
                    continue;
                double angle;
                Rectangle bounds = GetChildBounds(child, x, y, width, height, out angle);
                // Lay out the child.
                if (child.Bounds.Equals(new Rectangle(0, 0, -1, -1)))
                {
                    child.Layout(new Rectangle(x + width / 2, y + height / 2, 0, 0));
                }
                child.LayoutTo(bounds, (uint)AnimationDuration);
                // Rotate the child.
                if (AnimateRotation)
                {
                    child.RotateTo(angle, (uint)AnimationDuration);
                }
                else
                {
                    child.Rotation = angle;
                }
            }
        }
    }
}

唯一棘手的部分涉及一个尚未收到第一个布局调用的孩子。 这样的子项的Bounds属性是矩形（0,0，-1，-1），LayoutTo动画将使用该值作为动画的起始点。 在这种情况下，LayoutChildren方法首先调用Layout以将子项定位在中心并为其指定大小（0,0）。
AnimatedUnitCube程序的XAML文件几乎与UnitCube程序相同，但AnimatedCartesianLayout的动画持续时间为3秒：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit=
                 "clr-namespace:Xamarin.FormsBook.Toolkit;assembly=Xamarin.FormsBook.Toolkit"
             x:Class="AnimatedUnitCube.AnimatedUnitCubePage">
 
    <toolkit:AnimatedCartesianLayout BackgroundColor="Yellow"
             AnimationDuration="3000"
             HorizontalOptions="Center"
             VerticalOptions="Center">
        <toolkit:AnimatedCartesianLayout.Resources>
            <ResourceDictionary>
                <Style x:Key="baseStyle" TargetType="BoxView">
                    <Setter Property="Color" Value="Blue" />
                    <Setter Property="toolkit:CartesianLayout.Thickness" Value="3" />
                </Style>
                <Style x:Key="hiddenStyle" TargetType="BoxView"
                       BasedOn="{StaticResource baseStyle}">
                    <Setter Property="Opacity" Value="0.25" />
                </Style>
                <!-- Implicit style. -->
                <Style TargetType="BoxView"
                       BasedOn="{StaticResource baseStyle}" />
 
            </ResourceDictionary>
        </toolkit:AnimatedCartesianLayout.Resources>
        __
 
    </toolkit:AnimatedCartesianLayout>
</ContentPage>

以下屏幕截图显示了从左到右几乎到多维数据集完成点的进度：

根据它们的定义方式，某些水平线根本不会旋转，而其他水平线（例如底部的水平线）必须旋转180度。
如您所知，近年来用户界面变得更加生动和动态，因此使用LayoutTo而不是Layout来探索各种可能的技术可以成为冒险程序员追求的全新领域。