站点图标 江湖人士

Xamarin.Forms学习历程(三)——Layout之一

江小编
Xamarin.Forms学习历程(三)——Layout之一

App开发最重要的莫过于界面的搭建，没有界面，数据也没有地方填充，即使你会如何设置一个控件，但是你如果不知道怎么安放这个控件也是没有用的，所以我们还得先学会布界面布局。今天讲的就是界面布局。

一、StackLayout（栈布局）###

对于了解iOS9新特性的人来说，这个很好理解，相当于iOS里面的UIStackView，你可以把它理解成一个矩形容器，强调一下是容器，不是视图，就相当于是个纸箱子，纸箱子里面放了一堆控件，然后各个纸箱子之间水平摆放。画个图理解一下

Xamarin.Forms学习历程(三)——Layout之一 1
Snip20160812_38.png

画的有点丑，除了蓝色其他的都是StackLayout，如果界面复杂点就是StackLayout里套StackLayout。StackLayout的特性就是垂直或者水平排放，就拿红色的StackLayout来说，里面的圆角矩形和一个小长条不能用StackLayout，但是我们可以把两个小长条放在一个StackLayout里面垂直排布，然后和外面的圆角矩形放在一个StackLayout里面水平排布，还是看图吧。

Snip20160812_39.png

这样应该好理解了。重点是多写代码，写多了自然对它就有感觉了。说句题外话，有人说我打字慢，认为是我代码敲得少了，可是我敲了几个项目，打字速度还是慢，因为我已经习惯“二指禅”了。
解释了那么多，直接上官方代码

先看XML版#####
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
          xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
          x:Class="LayoutSamples.StackLayoutDemo"
          Title="StackLayout Demo">
  <ContentPage.Content>
    <StackLayout Spacing="10" x:Name="layout">
      <Button Text="StackLayout" VerticalOptions="Start"
        HorizontalOptions="FillAndExpand" />
      <BoxView Color="Yellow" VerticalOptions="FillAndExpand"
        HorizontalOptions="FillAndExpand" />
      <BoxView Color="Green" VerticalOptions="FillAndExpand"
        HorizontalOptions="FillAndExpand" />
      <BoxView HeightRequest="75" Color="Blue" VerticalOptions="End"
        HorizontalOptions="FillAndExpand" />
    </StackLayout>
    </ContentPage.Content>
</ContentPage>

我们只看StackLayout里面的东西，就是1个button、3个BoxView，我们可以发现出现最多的是VerticalOptions和HorizontalOptions。接下来我们就说说它俩，他们分别是垂直约束条件和水平约束条件，
重点是它有哪些：

  • Start：放置在layout起始位置
  • Center：放置在layout中间位置
  • End：放置在layout最后位置
  • Fill：放置在layout中使其没有间距
  • StartAndExpand：放置在layout起始位置，并尽可能占据layout所能给的最大空间
  • CenterAndExpand：放置在layout中间位置，并尽可能占据layout所能给的最大空间
  • EndAndExpand：放置在layout最后位置，并尽可能占据layout所能给的最大空间
  • FillAndExpand：放置在layout中使其没有间距，并尽可能占据layout所能给的最大空间
再看C#版#####
public class StackLayoutCode : ContentPage
{
  public StackLayoutCode ()
  {
    var layout = new StackLayout ();
    var button = new Button { 
            VerticalOptions = LayoutOptions.Start,
             HorizontalOptions = LayoutOptions.FillAndExpand };
    var oneBox = new BoxView { 
            VerticalOptions = LayoutOptions.FillAndExpand,  
            HorizontalOptions = LayoutOptions.FillAndExpand };
    var twoBox = new BoxView { 
            VerticalOptions = LayoutOptions.FillAndExpand,
           HorizontalOptions = LayoutOptions.FillAndExpand };
    var threeBox = new BoxView { 
           VerticalOptions = LayoutOptions.FillAndExpand,
           HorizontalOptions = LayoutOptions.FillAndExpand };

    layout.Children.Add(button);
    layout.Children.Add(oneBox);
    layout.Children.Add(twoBox);
    layout.Children.Add(threeBox);
    Content = layout;
  }
}

个人认为StackLayout比较重要而且常用，需要重点掌握。

二、AbsoluteLayout（绝对布局）###

这个相对比较容易，就是坐标系约束，不过他又是不完全的坐标系约束。我们先看看代码。

XML版#####
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="LayoutSamples.AbsoluteLayoutExploration"
Title="Absolute Layout Exploration">
    <ContentPage.Content>
        <AbsoluteLayout>
            <Label Text="I'm centered on iPhone 4 but no other device"
                AbsoluteLayout.LayoutBounds="115,150,100,100" LineBreakMode="WordWrap"  />
            <Label Text="I'm bottom center on every device."
                AbsoluteLayout.LayoutBounds=".5,1,.5,.1" AbsoluteLayout.LayoutFlags="All"
                LineBreakMode="WordWrap"  />
            <BoxView Color="Olive"  AbsoluteLayout.LayoutBounds="1,.5, 25, 100"
                AbsoluteLayout.LayoutFlags="PositionProportional" />
            <BoxView Color="Red" AbsoluteLayout.LayoutBounds="0,.5,25,100"
                AbsoluteLayout.LayoutFlags="PositionProportional" />
            <BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,100,25"
                AbsoluteLayout.LayoutFlags="PositionProportional" />
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

不用说了，AbsoluteLayout.LayoutBounds就是坐标系分别为（ x, y, width, height），和iOS的坐标系约束没什么区别，不过下面的就不同了：AbsoluteLayout.LayoutFlags，它有这些枚举值

  • ** None：**默认值，所有值均是绝对值
  • ** All：**所有值均是等比例
  • ** WidthProportional：**宽度是等比例的，其他值是绝对值
  • ** HeightProportional：**高度是等比例的，其他值是绝对值
  • ** XProportional：**X值是等比例的，其他值是绝对值
  • ** YProportional：**Y值是等比例的，其他值是绝对值
  • ** PositionProportional：**X、Y值是等比例的，其他值是绝对值
  • ** SizeProportional：**高度、宽度是等比例的，其他值是绝对值
    这样一来理解的应该差不多了。
C#版
public class AbsoluteLayoutExplorationCode : ContentPage
{
    public AbsoluteLayoutExplorationCode ()
    {
        Title = "Absolute Layout Exploration - Code";
        var layout = new AbsoluteLayout();

        var centerLabel = new Label {
        Text = "I'm centered on iPhone 4 but no other device.",
        LineBreakMode = LineBreakMode.WordWrap};

        AbsoluteLayout.SetLayoutBounds (centerLabel, new Rectangle (115, 159, 100, 100));
        // No need to set layout flags, absolute positioning is the default

        var bottomLabel = new Label { Text = "I'm bottom center on every device.", LineBreakMode = LineBreakMode.WordWrap };
        AbsoluteLayout.SetLayoutBounds (bottomLabel, new Rectangle (.5, 1, .5, .1));
        AbsoluteLayout.SetLayoutFlags (bottomLabel, AbsoluteLayoutFlags.All);

        var rightBox = new BoxView{ Color = Color.Olive };
        AbsoluteLayout.SetLayoutBounds (rightBox, new Rectangle (1, .5, 25, 100));
        AbsoluteLayout.SetLayoutFlags (rightBox, AbsoluteLayoutFlags.PositionProportional);

        var leftBox = new BoxView{ Color = Color.Red };
        AbsoluteLayout.SetLayoutBounds (leftBox, new Rectangle (0, .5, 25, 100));
        AbsoluteLayout.SetLayoutFlags (leftBox, AbsoluteLayoutFlags.PositionProportional);

        var topBox = new BoxView{ Color = Color.Blue };
        AbsoluteLayout.SetLayoutBounds (topBox, new Rectangle (.5, 0, 100, 25));
        AbsoluteLayout.SetLayoutFlags (topBox, AbsoluteLayoutFlags.PositionProportional);

        layout.Children.Add (bottomLabel);
        layout.Children.Add (centerLabel);
        layout.Children.Add (rightBox);
        layout.Children.Add (leftBox);
        layout.Children.Add (topBox);

        Content = layout;
    }
}

结语###

本想一口气全写完的，后面还有三个，太多了，后面三个下期再与大家分享吧。下期将分享RelativeLayout（相对布局）、Grid（网格布局）、Scrollview（滚动布局）。本文中如有错误之处还望大神指正。

退出移动版