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

来源:互联网 时间:2017-01-22


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


一、StackLayout(栈布局)

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



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(滚动布局)。本文中如有错误之处还望大神指正。




相关阅读:
Top