第二十六章：自定義布局（一）

定制是任何圖形程式設計環境的關鍵方面。系統的設計是否具有靈活性？你能建立新類型的使用者界面元素嗎？這些新元素與系統的整合程度如何？

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>           

最終，父母決定其子女的大小應該是什麼，并對其子女施加這樣的規模，但父母通常會根據孩子的要求大小确定這個大小。