App開發(fā)最重要的莫過于界面的搭建，沒有界面，數(shù)據(jù)也沒有地方填充，即使你會如何設(shè)置一個控件，但是你如果不知道怎么安放這個控件也是沒有用的，所以我們還得先學(xué)會布界面布局。今天講的就是界面布局。
一、StackLayout（棧布局）###
對于了解iOS9新特性的人來說，這個很好理解，相當(dāng)于iOS里面的UIStackView，你可以把它理解成一個矩形容器，強調(diào)一下是容器，不是視圖，就相當(dāng)于是個紙箱子，紙箱子里面放了一堆控件，然后各個紙箱子之間水平擺放。畫個圖理解一下
Snip20160812_38.png
畫的有點丑，除了藍色其他的都是StackLayout，如果界面復(fù)雜點就是StackLayout里套StackLayout。StackLayout的特性就是垂直或者水平排放，就拿紅色的StackLayout來說，里面的圓角矩形和一個小長條不能用StackLayout，但是我們可以把兩個小長條放在一個StackLayout里面垂直排布，然后和外面的圓角矩形放在一個StackLayout里面水平排布，還是看圖吧。
Snip20160812_39.png
這樣應(yīng)該好理解了。重點是多寫代碼，寫多了自然對它就有感覺了。說句題外話，有人說我打字慢，認為是我代碼敲得少了，可是我敲了幾個項目，打字速度還是慢，因為我已經(jīng)習(xí)慣“二指禪”了。
解釋了那么多，直接上官方代碼
先看XML版#####
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="LayoutSamples.StackLayoutDemo"
Title="StackLayout Demo">
<ContentPage.Content>
<StackLayout Spacing="10" x:Name="layout">
<Button Text="StackLayout" VerticalOptions="Start"
HorizontalOptions="FillAndExpand" />
<BoxView Color="Yellow" VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" />
<BoxView Color="Green" VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" />
<BoxView HeightRequest="75" Color="Blue" VerticalOptions="End"
HorizontalOptions="FillAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
我們只看StackLayout里面的東西，就是1個button、3個BoxView，我們可以發(fā)現(xiàn)出現(xiàn)最多的是VerticalOptions和HorizontalOptions。接下來我們就說說它倆，他們分別是垂直約束條件和水平約束條件，
重點是它有哪些：
- Start：放置在layout起始位置
- Center：放置在layout中間位置
- End：放置在layout最后位置
- Fill：放置在layout中使其沒有間距
- StartAndExpand：放置在layout起始位置，并盡可能占據(jù)layout所能給的最大空間
- CenterAndExpand：放置在layout中間位置，并盡可能占據(jù)layout所能給的最大空間
- EndAndExpand：放置在layout最后位置，并盡可能占據(jù)layout所能給的最大空間
- FillAndExpand：放置在layout中使其沒有間距，并盡可能占據(jù)layout所能給的最大空間
再看C#版#####
public class StackLayoutCode : ContentPage
{
public StackLayoutCode ()
{
var layout = new StackLayout ();
var button = new Button {
VerticalOptions = LayoutOptions.Start,
HorizontalOptions = LayoutOptions.FillAndExpand };
var oneBox = new BoxView {
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand };
var twoBox = new BoxView {
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand };
var threeBox = new BoxView {
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand };
layout.Children.Add(button);
layout.Children.Add(oneBox);
layout.Children.Add(twoBox);
layout.Children.Add(threeBox);
Content = layout;
}
}
個人認為StackLayout比較重要而且常用，需要重點掌握。
二、AbsoluteLayout（絕對布局）###
這個相對比較容易，就是坐標系約束，不過他又是不完全的坐標系約束。我們先看看代碼。
XML版#####
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="LayoutSamples.AbsoluteLayoutExploration"
Title="Absolute Layout Exploration">
<ContentPage.Content>
<AbsoluteLayout>
<Label Text="I'm centered on iPhone 4 but no other device"
AbsoluteLayout.LayoutBounds="115,150,100,100" LineBreakMode="WordWrap" />
<Label Text="I'm bottom center on every device."
AbsoluteLayout.LayoutBounds=".5,1,.5,.1" AbsoluteLayout.LayoutFlags="All"
LineBreakMode="WordWrap" />
<BoxView Color="Olive" AbsoluteLayout.LayoutBounds="1,.5, 25, 100"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<BoxView Color="Red" AbsoluteLayout.LayoutBounds="0,.5,25,100"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,100,25"
AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
不用說了，AbsoluteLayout.LayoutBounds就是坐標系分別為（ x, y, width, height），和iOS的坐標系約束沒什么區(qū)別，不過下面的就不同了：AbsoluteLayout.LayoutFlags，它有這些枚舉值
- ** None：**默認值，所有值均是絕對值
- ** All：**所有值均是等比例
- ** WidthProportional：**寬度是等比例的，其他值是絕對值
- ** HeightProportional：**高度是等比例的，其他值是絕對值
- ** XProportional：**X值是等比例的，其他值是絕對值
- ** YProportional：**Y值是等比例的，其他值是絕對值
- ** PositionProportional：**X、Y值是等比例的，其他值是絕對值
- ** SizeProportional：**高度、寬度是等比例的，其他值是絕對值
這樣一來理解的應(yīng)該差不多了。
C#版
public class AbsoluteLayoutExplorationCode : ContentPage
{
public AbsoluteLayoutExplorationCode ()
{
Title = "Absolute Layout Exploration - Code";
var layout = new AbsoluteLayout();
var centerLabel = new Label {
Text = "I'm centered on iPhone 4 but no other device.",
LineBreakMode = LineBreakMode.WordWrap};
AbsoluteLayout.SetLayoutBounds (centerLabel, new Rectangle (115, 159, 100, 100));
// No need to set layout flags, absolute positioning is the default
var bottomLabel = new Label { Text = "I'm bottom center on every device.", LineBreakMode = LineBreakMode.WordWrap };
AbsoluteLayout.SetLayoutBounds (bottomLabel, new Rectangle (.5, 1, .5, .1));
AbsoluteLayout.SetLayoutFlags (bottomLabel, AbsoluteLayoutFlags.All);
var rightBox = new BoxView{ Color = Color.Olive };
AbsoluteLayout.SetLayoutBounds (rightBox, new Rectangle (1, .5, 25, 100));
AbsoluteLayout.SetLayoutFlags (rightBox, AbsoluteLayoutFlags.PositionProportional);
var leftBox = new BoxView{ Color = Color.Red };
AbsoluteLayout.SetLayoutBounds (leftBox, new Rectangle (0, .5, 25, 100));
AbsoluteLayout.SetLayoutFlags (leftBox, AbsoluteLayoutFlags.PositionProportional);
var topBox = new BoxView{ Color = Color.Blue };
AbsoluteLayout.SetLayoutBounds (topBox, new Rectangle (.5, 0, 100, 25));
AbsoluteLayout.SetLayoutFlags (topBox, AbsoluteLayoutFlags.PositionProportional);
layout.Children.Add (bottomLabel);
layout.Children.Add (centerLabel);
layout.Children.Add (rightBox);
layout.Children.Add (leftBox);
layout.Children.Add (topBox);
Content = layout;
}
}
結(jié)語###
本想一口氣全寫完的，后面還有三個，太多了，后面三個下期再與大家分享吧。下期將分享RelativeLayout（相對布局）、Grid（網(wǎng)格布局）、Scrollview（滾動布局）。本文中如有錯誤之處還望大神指正。
