我们继续接上一期所说的。
三、RelativeLayout（相对布局）###
说到相对布局，不得不和大家谈谈iOS的AutoLayout，两者有很多的相似之处。我们先来回忆一下iOS的AutoLayout
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:<#(nonnull id)#>
attribute:<#(NSLayoutAttribute)#>
relatedBy:<#(NSLayoutRelation)#>
toItem:<#(nullable id)#>
attribute:<#(NSLayoutAttribute)#>
multiplier:<#(CGFloat)#>
constant:<#(CGFloat)#>]];
这是iOS里的基础版，还有VFL版，我习惯用VFL版，因为它更简洁，不过更简洁的应该是Masonry。其实就是一个公式：A的属性 = （B的属性 * multiplier）- constant；这是常用的。
我们来看看RelativeLayout里面的参数
- ** Type：**是否与父视图相关还是其他视图
- ** Property**那个属性作为参照
- ** Factor**相当于iOS里AutoLayout的multiplier
- ** Constant**相当于iOS里AutoLayout的multiplier
- ** ElementName**相关的视图的名字（如果视图与父视图相关该属性不需要）。
咱们一言不合，就是上代码
XML版###
<BoxView Color="Green" WidthRequest="50" HeightRequest="50"
RelativeLayout.XConstraint =
"{ConstraintExpression Type=RelativeToParent,
Property=Width,
Factor=0.5,
Constant=-100}"
RelativeLayout.YConstraint =
"{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=0.5,
Constant=-100}" />
不用解释了吧，和iOS的AutoLayout是不是很像，把公式套进去就好。
C#版####
layout.Children.Add(box, Constraint.RelativeToParent((parent) =>
{
return (.5 * parent.Width) - 100;
}),
Constraint.RelativeToParent((parent) =>
{
return (.5 * parent.Height) - 100;
}),
Constraint.Constant(50), Constraint.Constant(50));
C#版直接上公式，就是任性，可能你看的有点晕，就是（x,y,width,height）,只是每个属性都对应了一个约束。
四、Grid（网格布局）###
这个布局和之前的布局都有所不同，我也是第一次接触。我们来看看它有什么稀奇的。说到网格，也就是Rows and Columns，主要是对这行和列宽度、高度的定义。主要有下列三种定义
- ** Auto：**自动适应网格内内容，根据网格内内容自动调整网格大小
- ** Proportional()：*预留空间
- ** Absolute：**绝对赋值
还是看看代码
XML版###
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Top Left" Grid.Row="0" Grid.Column="0" />
<Label Text="Top Right" Grid.Row="0" Grid.Column="1" />
<Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" />
<Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" />
</Grid>
可以看出这里定义的是一个2*2的网格，在网格内对应位置填充label。
C#版####
var grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star)});
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star)});
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star)});
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star)});
var topLeft = new Label { Text = "Top Left" };
var topRight = new Label { Text = "Top Right" };
var bottomLeft = new Label { Text = "Bottom Left" };
var bottomRight = new Label { Text = "Bottom Right" };
grid.Children.Add(topLeft, 0, 0);
grid.Children.Add(topRight, 0, 1);
grid.Children.Add(bottomLeft, 1, 0);
grid.Children.Add(bottomRight, 1, 1);
这个重点还是多用，用用就习惯了。
五、ScrollView（滚动布局）###
这个我不多说了，看看代码你就懂了
XML版###
<ContentPage.Content>
<ScrollView>
<StackLayout>
<BoxView BackgroundColor="Red" HeightRequest="600" WidthRequest="150" />
<Entry />
</StackLayout>
</ScrollView>
</ContentPage.Content>
C#版####
var scroll = new ScrollView();
Content = scroll;
var stack = new StackLayout();
stack.Children.Add(new BoxView { BackgroundColor = Color.Red, HeightRequest = 600, WidthRequest = 600 });
stack.Children.Add(new Entry());
结语##
Xamarin.Forms五种界面布局我全都说完了，希望在我的描述下你能够领会些东西，总而言之，布局这一块还是要重点掌握StackLayout。欢迎各位大神指正。
