Xamarin.Forms 布局讲解（一）

布局的引入

首先要注意创建项目时确保“Use XAML for user interface files”勾选，使用XAML文件实现布局，默认选中。

先忽略Shared Code 选项，保持默认。App Name输入layout，创建项目。
生成的解决方案结构如下：

目前关注layout项目即可，layoutPage.xaml就是我们程序的布局文件。查看文件内容会发现一个ContentPage根结点。运行项目查看效果后，修改文件内容（xaml知识点不做介绍）：

运行项目看到如下效果：

只显示了最后一个Label。看到官方电子书中介绍：

“The ContentPage class defines a Content property of type View that you can set to an object—but only one object. Displaying multiple views requires setting Content to an instance of a class that can have multiple children of type View. Such a class is Layout, which defines a Children property of type IList.”

大致意思就是ContentPage有一个Content属性设置显示的内容，但是只能设置一个对象，要显示多个视图必须Content设置为继承了Layout（抽象类）的对象实例。

系统为我们提供了四个继承Layout的类：
• AbsoluteLayout
• Grid
• RelativeLayout
• StackLayout

这四个类都以集合的形式管理Children。

---

StackLayout介绍

先修改我们的布局文件，使用StackLayout进行布局：

注意第一个和最后一个Label的VerticalOptions的属性设置,Expand（只对StackLayout布局起作用）表示扩展填充StartAndExpand表示放置在布局开始且自动填充布局的空余位置，可以尝试设置不同值查看效果。先忽略第一个Label与IOS状态栏重叠的问题，Android效果应该是正常的，这里先只给出IOS的效果。

StackLayout是一种堆栈式布局，类似Android中的LinearLayout。StackLayout只提供了两个属性：
• Orientation :StackOrientation枚举类型，表示StackLayout以哪种方式布局， Vertical (垂直方向布局) 和 Horizontal（水平方向布局）,默认值是Vertical.
• Spacing :double类型，表示每个子视图之间的间隙, 默认值 6.0.

调整布局代码，设置StackLayout的Spacing属性为一个较大的值并增加Label数量，为Label提供不同的BackgroundColor。

运行效果：

布局超出屏幕无法显示，我们可以借助ScrollView实现滚动效果，将StackLayout节点放入ScrollView节点即可：

ScrollView继承了Layout类，因此它是一个布局类且只可以包含一个子视图。

关于前面提到的IOS中ContentPage与IOS状态栏重叠的问题解决可以通过属性节点和OnPlatform解决，后面再做详细介绍。

尝试运行Android项目，报错

关注前两个报错，提示下载android_m2repository_r22.zip文件保存到指定目录，第二个提示指定的zip文件不是一个有效的文件。

解决办法：下载android_m2repository_r22.zip文件，复制到错误信息中提到的目录，并替换第二个错误中提到的文件。Build->Clean All ，清理项目后重新运行即可。

最后贴出IOS和Android运行的效果图：