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

简介: 定制是任何图形编程环境的关键方面。系统的设计是否具有灵活性?你能创建新类型的用户界面元素吗?这些新元素与系统的整合程度如何?Xamarin.Forms有几个便于定制的功能。您已经看过依赖服务(首先在第9章“特定于平台的API调用”中讨论过),它允许您的应用程序从公共可移植类库中执行特定于平台的代码。

定制是任何图形编程环境的关键方面。系统的设计是否具有灵活性?你能创建新类型的用户界面元素吗?这些新元素与系统的整合程度如何?
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>

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

目录
相关文章
|
6月前
|
定位技术 iOS开发
自动布局xib页面的机型匹配精典问题及解决方案
自动布局xib页面的机型匹配精典问题及解决方案
42 0
|
iOS开发
iOS动画开发之三——UIView的转场切换
iOS动画开发之三——UIView的转场切换
378 0
|
JavaScript Android开发
第二十六章:自定义布局(十)
不允许无约束的尺寸!有时您希望在屏幕上看到所有内容,可能是一系列大小统一的行和列。您可以使用带有星号定义的所有行和列定义的Grid执行类似的操作,以使它们具有相同的大小。唯一的问题是您可能还希望行数和列数基于子节点数,并针对屏幕空间的最佳使用进行了优化。
835 0
|
存储 缓存 JavaScript
第二十六章:自定义布局(九)
编码的一些规则从上面的讨论中,您可以为自己的Layout 衍生物制定几个规则:规则1:如果布局类定义了诸如间距或方向等属性,则这些属性应由可绑定属性支持。 在大多数情况下,这些可绑定属性的属性更改处理程序应调用InvalidateLayout。
2070 0
|
JavaScript Android开发
第二十六章:自定义布局(八)
失效假设您已在页面上组装了一些布局和视图,并且由于某种原因,代码隐藏文件(或者可能是触发器或行为)会更改Button的文本,或者可能只是字体大小或属性。 该更改可能会影响按钮的大小,这可能会对页面其余部分的布局更改产生连锁反应。
3421 0
|
JavaScript Android开发
第二十六章:自定义布局(七)
垂直和水平定位简化在VerticalStack中,LayoutChildren覆盖的末尾是一个switch语句,它有助于根据子级的HorizontalOptions属性设置水平定位每个子级。 这是整个方法: public class VerticalStack : Layout<View> { ...
872 0
|
JavaScript Android开发
第二十六章:自定义布局(十二)
更多附加的可绑定属性附加的可绑定属性也可以在XAML中设置并使用Style设置。 为了了解它是如何工作的,让我们检查一个名为CartesianLayout的类,它模仿一个二维的,四象限的笛卡尔坐标系。
540 0
|
JavaScript Android开发
第二十六章:自定义布局(六)
从Layout派生 我们现在拥有足够的知识来创建我们自己的布局类。布局中涉及的大多数公共和受保护方法都是由非泛型布局类定义的。 Layout 类派生自Layout,并将泛型类型约束为View及其派生类。
765 0
|
JavaScript Android开发
第二十六章:自定义布局(十一)
重叠的子项Layout 类可以在其子项上调用Layout方法,以便子项重叠吗?是的,但这可能会在你的脑海中提出另一个问题:什么决定孩子们的呈现顺序?哪些孩子看似坐在前台,可能部分或完全掩盖了背景中显示的其他孩子?在某些图形环境中,程序员可以访问名为Z-index的值。
643 0