[料理佳餚] Xamarin.Forms 的 RelativeLayout

Xamarin.Forms 有很多種 Layouts,其中我先對 RelativeLayout 來進行了解,原因在於 RelativeLayout 標榜的是讓我們可以依照不用的螢幕大小來佈局 UI 控制項,這一點抓住了我的眼睛,我們來看看它要怎麼使用。

Constraint(約束)

加入 <RelativeLayout> 標籤之後我們可以在 RelativeLayout 之中加入我們想要的 UI 控制項,接著我們就必須要了解一個名詞 Constraint(約束),它跟 X、Y、Width、Height 組合之後就會有 XConstraintYConstraintWidthConstraintHeightConstraint,這些東西是用來描述我們的 UI 控制項應該要相對於誰來指定 X、Y、Width、Height。

ConstraintExpression

xxxConstraint 的值通常會用 ConstraintExpression 的格式來撰寫,而 ConstraintExpression 格式包含了 5 個屬性:

  1. Type:選擇要關聯的類型,可以是 Parent,也可以是另一個 UI 控制項。
  2. ElementName:如果 Type 選擇關聯到另一個 UI 控制項,至少要指定該 UI 控制項的名字。
  3. Property:我們要關聯到目標的屬性
  4. Factor:可以把它看成是一個乘數值,值的範圍是 0 ~ 1。
  5. Constant:額外需要增加的常數值

講了這麼多我們來個範例,我有一個 Label 它的寬是 Parent 寬的 80% 加 10px,寫法就會是這樣。

描述出來就是 Lable 的 Width 等於 Parent 的 Width × 0.8 + 10

多來幾個範例

Label 的 Height 是固定值 200,Width 是 Parent 的 Width - 200,X 跟 Y 是 Parent 的 X 跟 Y + 100。

Label 的 Width 跟 Height 是 Label1 的 Width 及 Height,X 是 Label1 的 X,Y 則是距離 Label1 10px。

Layout 還能搭配其他 Layout 來產生變化多端的 UI 佈局,在我們自己動手刻 UI 之前不妨先思考能不能採用 Layout 組合去排版我們的 UI 控制項。

參考資料

相關資源

C# 指南
ASP.NET 教學
ASP.NET MVC 指引
Azure SQL Database 教學
SQL Server 教學
Xamarin.Forms 教學