第二十六章:自定義佈局(一)

定製是任何圖形編程環境的關鍵方面。系統的設計是否具有靈活性?你能創建新類型的用戶界面元素嗎?這些新元素與系統的整合程度如何?
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>

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章