App开发最重要的莫过于界面的搭建，没有界面，数据也没有地方填充，即使你会如何设置一个控件，但是你如果不知道怎么安放这个控件也是没有用的，所以我们还得先学会布界面布局。今天讲的就是界面布局。
一、StackLayout（栈布局）###
对于了解iOS9新特性的人来说，这个很好理解，相当于iOS里面的UIStackView，你可以把它理解成一个矩形容器，强调一下是容器，不是视图，就相当于是个纸箱子，纸箱子里面放了一堆控件，然后各个纸箱子之间水平摆放。画个图理解一下
Snip20160812_38.png
画的有点丑，除了蓝色其他的都是StackLayout，如果界面复杂点就是StackLayout里套StackLayout。StackLayout的特性就是垂直或者水平排放，就拿红色的StackLayout来说，里面的圆角矩形和一个小长条不能用StackLayout，但是我们可以把两个小长条放在一个StackLayout里面垂直排布，然后和外面的圆角矩形放在一个StackLayout里面水平排布，还是看图吧。
Snip20160812_39.png
这样应该好理解了。重点是多写代码，写多了自然对它就有感觉了。说句题外话，有人说我打字慢，认为是我代码敲得少了，可是我敲了几个项目，打字速度还是慢，因为我已经习惯“二指禅”了。
解释了那么多，直接上官方代码
先看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，我们可以发现出现最多的是VerticalOptions和HorizontalOptions。接下来我们就说说它俩，他们分别是垂直约束条件和水平约束条件，
重点是它有哪些：
- Start：放置在layout起始位置
- Center：放置在layout中间位置
- End：放置在layout最后位置
- Fill：放置在layout中使其没有间距
- StartAndExpand：放置在layout起始位置，并尽可能占据layout所能给的最大空间
- CenterAndExpand：放置在layout中间位置，并尽可能占据layout所能给的最大空间
- EndAndExpand：放置在layout最后位置，并尽可能占据layout所能给的最大空间
- FillAndExpand：放置在layout中使其没有间距，并尽可能占据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的坐标系约束没什么区别，不过下面的就不同了：AbsoluteLayout.LayoutFlags，它有这些枚举值
- ** None：**默认值，所有值均是绝对值
- ** All：**所有值均是等比例
- ** WidthProportional：**宽度是等比例的，其他值是绝对值
- ** HeightProportional：**高度是等比例的，其他值是绝对值
- ** XProportional：**X值是等比例的，其他值是绝对值
- ** YProportional：**Y值是等比例的，其他值是绝对值
- ** PositionProportional：**X、Y值是等比例的，其他值是绝对值
- ** SizeProportional：**高度、宽度是等比例的，其他值是绝对值
这样一来理解的应该差不多了。
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;
}
}
结语###
本想一口气全写完的，后面还有三个，太多了，后面三个下期再与大家分享吧。下期将分享RelativeLayout（相对布局）、Grid（网格布局）、Scrollview（滚动布局）。本文中如有错误之处还望大神指正。
