• 热门专题

Xamarin+Prism开发详解五:页面布局基础知识

作者:云中客??发布日期:2016-12-26 20:23:34
Tag标签:基础知识??布局??页面??
  • 说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的。

    布局常见标签:

    StackLayout? AbsoluteLayout RelativeLayout? Grid? ScrillViewer

    主要拿个人最喜欢的StackLayout和Grid做说明。

    1、StackLayout

    通过它可以设置内部子元素的纵向或者横向布局,默认为纵向。

    显示结果

    Simulator Screen Shot 19 Dec 2016, 1.27.36 AM

    1.1、通过设置Orientation的属性可以切换纵向Vertical(默认)与横向Horizontal显示。

    设置Horizontal(横向)看看效果:

    显示结果

    Simulator Screen Shot 19 Dec 2016, 1.31.32 AM

    1.2、通过Spacing可以设置子元素间的间隔空白大小。

    Spacing
    ='30'>

    显示结果

    Simulator Screen Shot 19 Dec 2016, 1.34.17 AM

    1.3、通过HorizontalOptions和VerticalOptions可以设置子元素在Stacklayout里面的布局位置。

    HorizontalOptions和VerticalOptions可以指定如下值:

    Start: 开始位置布局元素 Center: 居中布局元素 End: 结束位置布局元素 Fill: 扩展元素占用整个布局宽带 (默认设置) StartAndExpand: 开始位置布局元素并填充空白 CenterAndExpand: 居中布局元素并填充空白 EndAndExpand: 结束位置布局元素并填充空白 FillAndExpand: 填充所有空白

    首先看看Start,End,Center,Fill的效果:

    Spacing
    ='30'>

    显示结果

    Simulator Screen Shot 19 Dec 2016, 11.56.49 Z喎?http://www.it165.net/pro/pkqt/QTQ==" border="0" height="505" src="http://www.it165.net/uploadfile/files/2016/1226/201612261940481296.png" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Simulator Screen Shot 19 Dec 2016, 11.56.49 Z喎?http://www.it165.net/pro/pkqt/" target="_blank" class="keylink">QTQ==" width="284" />

    接下来看看AndExpand相关的设置。

    首先设置StartAndExpand

    显示结果

    Simulator Screen Shot 20 Dec 2016, 12.05.24 AM

    EndAndExpand情况

    显示结果

    Simulator Screen Shot 24 Dec 2016, 3.51.11 PM

    FillAndExpand情况

    显示结果

    Simulator Screen Shot 24 Dec 2016, 3.52.29 PM

    多个AndExpand设置的时候,空白大小是均等分配。比如下面两个控件分别设置为FillAndExpand与StarAndExpand,上半部分全是红色填充,后半部分开始位置为蓝色。

    显示结果

    Simulator Screen Shot 24 Dec 2016, 3.58.27 PM

    通过多个StackLayout配合也可以实现复杂的布局

    Simulator Screen Shot 24 Dec 2016, 4.37.09 PM

    代码

    iOS
    ='0, 20, 0, 0'/>
    VerticalOptions
    ='Start'>
    VerticalOptions
    ='FillAndExpand'>
    HorizontalOptions
    ='EndAndExpand'>
    VerticalOptions
    ='Start'>
    VerticalOptions
    ='FillAndExpand'>
    HorizontalOptions
    ='EndAndExpand'>

    2、Grid

    Grid相当于表格布局,这在网页布局用的最多。通过RowDefinitions属性的RowDefinition定义一行,通过ColumnDefinitions属性的ColumnDefinition定义一列。默认情况下是平均分配各个单元格大小。各个控件通过设置Grid.Row和Grid.Colum可以指定显示在哪个单元格。

    比如下面三行三列的例子:

    显示结果

    Simulator Screen Shot 24 Dec 2016, 4.59.52 PM

    2.1、大小设置

    RowDefinition可以设置行高度Height,ColumnDefinition可以设置列宽度Width。设置的值可以为数字(固定大小),也可以为1*,2*之类带*的(按比例分配大小),也可以设置为Auto(自动调整大小)。比如下面的例子:

    iOS
    ='0, 20, 0, 0'/>
    Grid.Column
    ='1' />
    Grid.Column
    ='2' />
    Grid.Column
    ='0' />
    Grid.Column
    ='1' />
    Grid.Column
    ='2' />
    Grid.Column
    ='0' />
    Grid.Column
    ='1' />
    Grid.Column
    ='2' />

    显示结果

    Simulator Screen Shot 24 Dec 2016, 5.59.49 PM

    2.2、复数行,复数列设置

    Grid.RowSpan设置复数行,Grid.ColumnSpan设置复数列。

    iOS
    ='0, 20, 0, 0'/>

    显示效果

    Simulator Screen Shot 24 Dec 2016, 6.07.17 PM

    同样可以简单实现上面StackLayout的布局。

    显示效果

    Simulator Screen Shot 24 Dec 2016, 6.28.21 PM

    3、余白设置

    余白通过使用Padding和Margin进行设置。Padding是设置控件外侧余白,Margin是设置控件内侧余白。

    3.1、设置方法

    四个方向一个值设置 左右和上下两个值设置 四个方向不同值设置

    (比如:

    【20】:四个方向都自为20;

    【20,10】左右为20,上下为10;

    【10,15,20,25】左部余白为10,上部余白15,右余白为20,下部余白25。)

    页面距离边框20,Grid左右距离页面20,上下距离页面10。

    Simulator Screen Shot 24 Dec 2016, 7.20.02 PM

    总结

    使用xamarin.forms开发应用,只要掌握使用StackLayout与Grid布局,基本上可以实现各种想要的布局。当然要想UI很漂亮,图片设计是必须的。

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规