第二十六章:自定义布局(一)

定制是任何图形编程环境的关键方面。系统的设计是否具有灵活性?你能创建新类型的用户界面元素吗?这些新元素与系统的整合程度如何?
Xamarin.Forms有几个便于定制的功能。您已经看过依赖服务(首先在第9章“特定于平台的API调用”中讨论过),它允许您的应用程序从公共可移植类库中执行特定于平台的代码。
在下一章中,您将了解如何以新的View衍生形式创建专用的用户界面元素。您可以通过编写在各个平台中实现该元素的自定义渲染器来创建这些新元素。
本章重点关注那些通常位于页面和各个用户界面对象之间的可视树中的强大类。这些类称为布局,因为它们派生自Layout 。 Xamarin.Forms定义了四个这样的类 - StackLayout,AbsoluteLayout,RelativeLayout和Grid-每个类以不同的方式排列它的子节点。正如您在本书中看到的那样,这些Layout 衍生产品对于定义页面的可视化组织至关重要。
从Layout 派生的类在Xamarin.Forms中有点不寻常,因为它们不使用特定于平台的代码。它们完全在Xamarin.Forms中实现。
本章介绍如何从Layout 派生类以编写自己的自定义布局。当您需要以不受标准布局类处理的方式组织页面时,这是一项非常有用的技能。例如,假设您希望通过使用具有重叠卡的卡片文件隐喻来呈现数据,或者使用包裹在列和可滚动行中的项目,或者使用手指滑动从一侧到另一侧平移来呈现数据。本章将向您展示如何编写此类。
编写自定义布局还为您提供了有关Xamarin.Forms中的布局系统如何工作的最佳见解。即使您将自己限制在标准布局类中,这些知识也可以帮助您设计自己的页面。

布局概述

在Xamarin.Forms中,没有处理布局的集中式系统。相反,这个过程非常分散。布局由元素本身处理,或在它们派生的类中处理。例如,每个视觉元素都负责确定自己的首选大小。这被称为请求大小,因为可能没有足够的空间来容纳整个元素,或者元素可能有足够的空间。
布局最多的元素包含一个子节点或多个子节点。这些是页面衍生,布局衍生(ContentView,Frame和ScrollView)和布局<视图>衍生。这些要素负责确定其子女相对于自己的位置和大小。儿童的位置和大小通常基于孩子要求的大小,因此布局通常涉及父母和孩子之间的交换关系。孩子们有要求,但是父母会制定法律。
我们来看几个简单的例子。
父母和孩子
考虑以下标记:

<ContentPage __ >
    <Frame OutlineColor="Accent" >
        <Label Text="Sample text" />
    </Frame>
</ContentPage>

它是ContentPage中Frame中的Label。 与大多数View派生类似,Frame具有LayoutOptions.Fill的默认HorizontalOptions和VerticalOptions属性设置,这意味着Frame填充页面,但页面上可能的填充设置除外。 框架的大小取决于页面的大小,而不是标签显示的文本大小。
现在在Frame上设置HorizontalOptions和VerticalOptions属性:

<ContentPage __ >
    <Frame OutlineColor="Accent"
           VerticalOptions="Center"
           HorizontalOptions="Center">
        <Label Text="Sample text" />
    </Frame>
</ContentPage>

Frame现在拥抱Label的渲染文本,这意味着Frame的大小基于Label的大小而不是页面的大小。
但并非完全! 如果您向Label添加越来越多的文本,框架将会增长,但它不会比页面大。 相反,文本将被截断。 由于文本超出了页面上可以容纳的范围,标签会受到Frame的最大大小的限制,这受到ContentPage大小的限制。
但是现在把Frame放在ScrollView中:

<ContentPage … >
    <ScrollView>
        <Frame OutlineColor="Accent">
            <Label Text="Very long text ... " />
        </Frame>
    </ScrollView>
</ContentPage>

现在ScrollView是页面的大小,但Frame可以比ScrollView大。 ScrollView允许用户将Frame的底部滚动到视图中。
如果框架在StackLayout中,框架也可以延伸到页面底部:

<ContentPage __ >
    <StackLayout>
        <Frame OutlineColor="Accent">
            <Label Text="Very long text ... " />
        </Frame>
    </StackLayout>
</ContentPage>

最终,父母决定其子女的大小应该是什么,并对其子女施加这样的规模,但父母通常会根据孩子的要求大小确定这个大小。

猜你喜欢

转载自yq.aliyun.com/articles/702087
今日推荐