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

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是不是很像,把公式套进去就好。

Xamarin.Forms学习历程
Xamarin.Forms学习历程

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。欢迎各位大神指正。

User Review
0 (0 votes)
本站最新优惠

Namesilo优惠:新用户省 $1 域名注册-优惠码:45D%UYTcxYuCloZ 国外最便宜域名!点击了解更多

特别优惠:免费赠送 $100 Vultr主机-限时优惠!英文站必备海外服务器!点击了解更多

VPS优惠:搬瓦工优惠码:BWH3OGRI2BMW 最高省5.83%打开外面世界的一款主机点击了解更多

本文转载自Snoopy008,原文链接:https://www.jianshu.com/p/253d24fda307,经授权后发布,本文观点不代表江湖人士立场,转载请联系原作者。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

1 × 5 =