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

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

一、StackLayout(栈布局)###

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

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

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

Xamarin.Forms学习历程(三)——Layout之一 2
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(滚动布局)。本文中如有错误之处还望大神指正。

User Review
0 (0 votes)

猜你喜欢

本站最新优惠

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

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

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

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

(0)
上一篇 2018-01-26 09:36
下一篇 2018-01-26 09:48

热门推荐

发表回复

登录后才能评论
国外老牌便宜域名服务商Namecheap注册com域名大优惠,抢到就赚到,优惠码:NEWCOM698
$6.98/年
直达官网