Xamarin.Forms学习历程(3)——Layout之二

江小编

7 年前

Xamarin.Forms学习历程

Xamarin.Forms学习历程(3)——Layout之二，我们继续接上一期所说的。

三、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学习历程结语##

Xamarin.Forms五种界面布局我全都说完了，希望在我的描述下你能够领会些东西，总而言之，布局这一块还是要重点掌握StackLayout。欢迎各位大神指正。