Xamarin.Forms 第06局：布局 下

总目录

---

前言

本文继续介绍布局：
一、AbsoluteLayout
二、RelativeLayout
三、ScrollView
四、重要属性和概念

环境

1.Visual Studio 2017
2.Xamarin.Froms 4.0.0.8055-pre1
3.Android 4.4(API 19)或更高版本
4.约定：XF代表Xamarin.Forms

内容

一、AbsoluteLayout

AbsoluteLayout：通过设置坐标和大小组织视图。

实现效果

Xaml方式

1.LayoutBounds其实是一个Rectangle，其四个值分别是"x,y,width,height"：
- x：水平位置 x；
- y：垂直位置 y；
- width：视图宽度 width；
- height：视图高度 heght；

C#方式

二、RelativeLayout

RelativeLayout：通过设置相对 父容器或同级视图 的位置和大小组织视图。

实现效果

Xaml方式

分别使用XConstraint和YConstraint确定位置和大小，ConstraintExpression的四个属性：
- Type：约束是相对于父容器还是某个视图；
- Property：使用哪个属性约束的基础；
- Factor：属性值因素。起始位置为0，结束位置为1，中间为0.5。例如：上图中使用0.5，故第一个BoxView的左上角本应在中心；
- Constant：偏移量。如上xaml。例如：第一个BoxView偏移量为向左，向上分别偏移25个像素，使其中心位于屏幕中心。

C#方式

三、ScrollView

ScrollView：滚动视图。当布局内容过多时，用ScrollView包含布局，即可滚动显示。

实现效果

Xaml方式

C#方式

四、重要属性和概念

1.LayoutOptions

XF中每个视图都会有HorizontalOptions和VerticalOptions属性，他们都是LayoutOptions类型，下面介绍其属性值：
- Start：起始位置，例如：左边，上边；
- Center：居中，例如：水平居中，垂直居中；
- End：结束位置，例如：右边，下边；
- Fill：填充，例如：占据整行；
- StartAndExpand：起始位置并扩展；
- CenterAndExpand：居中位置并扩展；
- EndAndExpand：结束位置并扩展；
- FillAndExpand：填充并扩展；

注：看下面代码和效果便会理解。

实现效果

注：这里说明一下Expand相关的几个参数，下面的StackLayout内，每个Label占据空间大小相同。但只有最后的Label会占满空间。

Xaml

2.Margin和Padding

1.Margin：表示元素与相邻元素之间的距离，其4个值表示"左上右下"，例如：Margin=“8,8,8,8”；
2.Padding：表示元素与其子元素之间的距离，其4个值分表代表“左上右下”，例如：Padding=“8,8,8,8”。

后语

下篇介绍控件，待续...

---

总目录