神刀安全网

Xamarin.Forms 布局讲解(一)

布局的引入

首先要注意创建项目时确保“Use XAML for user interface files”勾选,使用XAML文件实现布局,默认选中。

Xamarin.Forms 布局讲解(一)

先忽略Shared Code 选项,保持默认。App Name输入layout,创建项目。
生成的解决方案结构如下:

Xamarin.Forms 布局讲解(一)

目前关注layout项目即可,layoutPage.xaml就是我们程序的布局文件。查看文件内容会发现一个ContentPage根结点。运行项目查看效果后,修改文件内容(xaml知识点不做介绍):

<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  xmlns:local="clr-namespace:layout"  x:Class="layout.layoutPage">     <Label Text="Welcome to Xamarin Forms!" VerticalOptions="Start" HorizontalOptions="Center" />     <Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />     <Label Text="Welcome to Xamarin Forms!" VerticalOptions="End" HorizontalOptions="Center" /> </ContentPage>

运行项目看到如下效果:

Xamarin.Forms 布局讲解(一)

只显示了最后一个Label。看到官方电子书中介绍:

“The ContentPage class defines a Content property of type View that you can set to an object—but only one object. Displaying multiple views requires setting Content to an instance of a class that can have multiple children of type View. Such a class is Layout<T>, which defines a Children property of type IList<T>.”

大致意思就是ContentPage有一个Content属性设置显示的内容,但是只能设置一个对象,要显示多个视图必须Content设置为继承了Layout<T>(抽象类)的对象实例。

系统为我们提供了四个继承Layout<View>的类:
• AbsoluteLayout
• Grid
• RelativeLayout
• StackLayout

这四个类都以集合的形式管理Children。


StackLayout介绍

先修改我们的布局文件,使用StackLayout进行布局:

<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  xmlns:local="clr-namespace:layout"  x:Class="layout.layoutPage">     <StackLayout>         <Label Text="Welcome to Xamarin Forms!" VerticalOptions="StartAndExpand" HorizontalOptions="Center" />         <Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />         <Label Text="Welcome to Xamarin Forms!" VerticalOptions="EndAndExpand" HorizontalOptions="Center" />     </StackLayout> </ContentPage>

注意第一个和最后一个Label的VerticalOptions的属性设置,Expand表示扩展填充StartAndExpand表示放置在布局开始且自动填充布局的空余位置,可以尝试设置不同值查看效果。先忽略第一个Label与IOS状态栏重叠的问题,Android效果应该是正常的,这里先只给出IOS的效果。

Xamarin.Forms 布局讲解(一)

StackLayout是一种堆栈式布局,类似Android中的LinearLayout。StackLayout只提供了两个属性:
• Orientation :StackOrientation枚举类型,表示StackLayout以哪种方式布局, Vertical (垂直方向布局) 和 Horizontal(水平方向布局),默认值是Vertical.
• Spacing :double类型,表示每个子视图之间的间隙, 默认值 6.0.

调整布局代码,设置StackLayout的Spacing属性为一个较大的值并增加Label数量,为Label提供不同的BackgroundColor。

<StackLayout Spacing="40">         <Label Text="Welcome to Xamarin Forms!" BackgroundColor="Aqua" HorizontalOptions="Center" />         <Label Text="Welcome to Xamarin Forms!" BackgroundColor="Blue" HorizontalOptions="Center" />         <Label Text="Welcome to Xamarin Forms!" BackgroundColor="Fuchsia" HorizontalOptions="Center" />         <Label Text="Welcome to Xamarin Forms!" BackgroundColor="Gray" HorizontalOptions="Center" />         <Label Text="Welcome to Xamarin Forms!" BackgroundColor="Green" HorizontalOptions="Center" />         <Label Text="Welcome to Xamarin Forms!" BackgroundColor="Lime" HorizontalOptions="Center" />         <Label Text="Welcome to Xamarin Forms!" BackgroundColor="Maroon" HorizontalOptions="Center" />         <Label Text="Welcome to Xamarin Forms!" BackgroundColor="Navy" HorizontalOptions="Center" />         <Label Text="Welcome to Xamarin Forms!" BackgroundColor="Olive" HorizontalOptions="Center" />         <Label Text="Welcome to Xamarin Forms!" BackgroundColor="Purple" HorizontalOptions="Center" />         <Label Text="Welcome to Xamarin Forms!" BackgroundColor="Red" HorizontalOptions="Center" />         <Label Text="Welcome to Xamarin Forms!" BackgroundColor="Silver" HorizontalOptions="Center" />         <Label Text="Welcome to Xamarin Forms!" BackgroundColor="Teal" HorizontalOptions="Center" />         <Label Text="Welcome to Xamarin Forms!" BackgroundColor="Yellow" HorizontalOptions="Center" />     </StackLayout>

运行效果:

Xamarin.Forms 布局讲解(一)

布局超出屏幕无法显示,我们可以借助ScrollView实现滚动效果,将StackLayout节点放入ScrollView节点即可:

Xamarin.Forms 布局讲解(一)

ScrollView继承了Layout类,因此它是一个布局类且只可以包含一个子视图。

Xamarin.Forms 布局讲解(一)

关于前面提到的IOS中ContentPage与IOS状态栏重叠的问题解决可以通过属性节点和OnPlatform解决,后面再做详细介绍。

<ContentPage.Padding>              <OnPlatform x:TypeArguments="Thickness"          iOS="0, 20,  0, 0" /> </ContentPage.Padding>

尝试运行Android项目,报错

Xamarin.Forms 布局讲解(一)

关注前两个报错,提示下载android_m2repository_r22.zip文件保存到指定目录,第二个提示指定的zip文件不是一个有效的文件。

解决办法:下载android_m2repository_r22.zip文件,复制到错误信息中提到的目录,并替换第二个错误中提到的文件。Build->Clean All ,清理项目后重新运行即可。

最后贴出IOS和Android运行的效果图:

Xamarin.Forms 布局讲解(一)

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Xamarin.Forms 布局讲解(一)

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址