Xamarin.Forms 有很多種 Layouts,其中我先對 RelativeLayout 來進行了解,原因在於 RelativeLayout 標榜的是讓我們可以依照不用的螢幕大小來佈局 UI 控制項,這一點抓住了我的眼睛,我們來看看它要怎麼使用。
Constraint(約束)
加入 <RelativeLayout>
標籤之後我們可以在 RelativeLayout 之中加入我們想要的 UI 控制項,接著我們就必須要了解一個名詞 Constraint(約束)
,它跟 X、Y、Width、Height 組合之後就會有 XConstraint
、YConstraint
、WidthConstraint
、HeightConstraint
,這些東西是用來描述我們的 UI 控制項應該要相對於誰來指定 X、Y、Width、Height。
ConstraintExpression
xxxConstraint 的值通常會用 ConstraintExpression
的格式來撰寫,而 ConstraintExpression 格式包含了 5 個屬性:
- Type:選擇要關聯的類型,可以是 Parent,也可以是另一個 UI 控制項。
- ElementName:如果 Type 選擇關聯到另一個 UI 控制項,至少要指定該 UI 控制項的名字。
- Property:我們要關聯到目標的屬性
- Factor:可以把它看成是一個乘數值,值的範圍是 0 ~ 1。
- 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 控制項。