C#使用Xamarin开发可移植移动应用(2.Xamarin.Forms布局,本篇很长,注意)附源码
前言
源码地址:https://github.com/l2999019/DemoApp
可以Star一下,随意 - -
一点感想
很意外的,第一篇博文被博客园的编辑大哥置顶了.感谢.
评论也很多,褒贬不一,我还是那句话.技术是从无到有的过程,就像一个刚出生的人 不是说他有个强大的爸爸 所以就可以一出生就上天.
.NET如此,JAVA亦如此.言尽于此,对于喷子 好自为之..
好了,废话不多说,我们开始本章的内容.
今天的学习内容?
昨天学了内容页,当然就少不了内容页里面的布局,所以..
今天我们主要学习Xamarin.Forms中提供的各类布局手段,如图:
Xamarin.Forms提供了5种布局,我这里只截取了4种,第五种是ScrollView,个人觉得..这个的操作作用大于布局作用..所以本章就不讲了.
本篇很长...内容很多,且自己认为比较重要..大家耐心看
各种布局,Demo效果如下:
正文
0.使用Xamarin.Forms Previewer预览界面效果
Xamarin.Forms Previewer是微软提供的可以不运行程序,直接预览界面效果的工具..
因为本章主要讲布局,所以用这个会比较方便,不用每次都运行调试.
嗯,这个工具.大家凑合用 - -,因为它本身比较麻烦且会有莫名BUG,不过用顺畅了 还不错.
VS2017直接按照下图方式打开即可,VS2015 - - 我暂时没辙...
效果如下:
好了,大功告成,
嗯..使用中有任何的错误 或者红色的错误提示,请重新生成程序集,或者在几个视图中跳转一下..一般都会好..(tips:这就是我说的小麻烦)
1.StackLayout(线性布局)
StackLayout以线性的方式进行水平或垂直的视图布局。
我们直接创建一个ContentPage.
然后添加如下Xaml代码:
<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="Start" /></StackLayout></ContentPage.Content>
效果如图:
1.1布局方向
方向嘛..就是横向,和竖向.通过在StackLayout 中设置Orientation属性.
就两个选择,Horizontal(水平方向),Vertical(垂直方向)默认为Vertical
代码如下:
<StackLayout Spacing="10" x:Name="layout" Orientation="Horizontal"><--这里是内容--></StackLayout>
1.2定位
大家可以看到,我在StackLayout 中的控件里面加了2个属性:
VerticalOptions(垂直位置)
HorizontalOptions(水平位置)
这2个属性,要求传递LayoutOptions(布局选项)的枚举,我们可以通过这里面的选择,来确定我们控件的位置.
Center – 将控件固定在视图的中心位置
End – 将控件固定在布局中的底部位置(横向布局则为最右边)
Fill – 将控件根据布局方向填充空余位置.
Start – 将控件固定在布局中的顶部位置(横向布局则为最左边)
1.3填充
在上面的定位属性后面,都可以加一个后缀AndExpand,嗯..举个例子 就是这样FillAndExpand
会产生什么效果呢?
它会根据屏幕的大小,和你布局中其他的内容,如果有空白位置就会由设置了AndExpand的自动填充.
如果多个属性都有AndExpand
则会平分空白的位置.
1.4边距
边距的设置很简单,设置StackLayout 的Spacing属性即可.
Spacing默认值为6
2.AbsoluteLayout(绝对定位)
这个..写过HTML的朋友们都知道,绝对定位嘛..就是根据X Y轴的坐标 直接给出控件的位置.
嗯先上列子的xaml代码吧,如下:
<AbsoluteLayout> <Label Text="这里是数值定位"AbsoluteLayout.LayoutBounds="1,50,50,100" LineBreakMode="WordWrap" /><Label Text="这里是按百分比例定位"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>
效果如下:
下面我们就来详细的讲解一下绝对定位布局相关的属性.
我们如果在AbsoluteLayout中添加控件,会发现,所有的控件,都会多出一个命名空间,下面有2个属性,如下:
讲解这2个属性之前,我们需要了解AbsoluteLayout中的2个概念,一个叫做比例值,一个叫绝对值.
其实从字面就可以看出来,比例值就是类似HTML的10%,20%之类的..绝对值就是类似HTML的5px,10px之类的
当然,我们的Xamarin有所不同. 比例值需要设置为.1(注意前面有个".", .1的意思就是10% ) 绝对值就很简单了 10, 100 ..直接给数字就行
2.1 LayoutBounds
从上面的例子我们可以看到LayoutBounds是有4个值的.类似下面:
<Label Text="这里是数值定位"AbsoluteLayout.LayoutBounds="1,50,50,100" LineBreakMode="WordWrap" />
从左至右,依次代表的意思是:
X轴的位置,Y轴的位置,控件的宽度,控件的高度.
有了上面这些属性,我们就可以很轻松的操控一个控件所在的位置和大小了.
2.2 LayoutFlags
上面我们说过,是分比例值与绝对值的.那怎么设置这个呢,就是通过LayoutFlags这个属性.它有7个枚举值.如下:
默认 - 将所有值解析为绝对值。如果未指定LayoutFlags,则为默认值。
All- 将所有值解析为比例。
WidthProportional - 仅将
Width值作为比例值，将所有其他值解析为绝对值。HeightProportional - 仅将height值作为比例值，将所有其他值解析为绝对值。
XProportional - 仅将X轴作为比例值，将所有其他值解析为绝对值。
YProportional- 仅将Y轴作为比例值，将所有其他值解析为绝对值。
PositionProportional - 将
X轴和Y轴作为比例解析，而控件大小值被作为绝对值解析。SizeProportional - 将控件大小值作为比例解析，而
X轴和Y轴被作为绝对值解析。
3.RelativeLayout(相对定位)
嗯..相对定位,顾名思义..就是相对于某个控件来进行定位..也可以是整个布局
示例代码如下:
<RelativeLayout><BoxView Color="Red" x:Name="redBox"RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=.15,Constant=0}"RelativeLayout.WidthConstraint="{ConstraintExpressionType=RelativeToParent,Property=Width,Factor=1,Constant=0}"RelativeLayout.HeightConstraint="{ConstraintExpressionType=RelativeToParent,Property=Height,Factor=.8,Constant=0}" /><BoxView Color="Blue"RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,ElementName=redBox,Property=Y,Factor=1,Constant=20}"RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,ElementName=redBox,Property=X,Factor=1,Constant=20}"RelativeLayout.WidthConstraint="{ConstraintExpressionType=RelativeToParent,Property=Width,Factor=.5,Constant=0}"RelativeLayout.HeightConstraint="{ConstraintExpressionType=RelativeToParent,Property=Height,Factor=.5,Constant=0}" /></RelativeLayout>
效果如下:
相对定位的东西比较复杂,仔细阅读吧.
3.1 Constraint(约束)
相对定位有个叫做约束的概念,所以我们可以看到.在RelativeLayout的里面,所有的控件 都会出现下面几种属性
XConstraint ,YConstraint, WidthConstraint,HeightConstraint
其实看前面,大家就应该知道是X Y 宽 高.
里面的写法 类似于JSON,如下:
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=redBox,Property=Y,Factor=1,Constant=20}"
大口号前面定义ConstraintExpression,代表它为约束的表达式.
里面有5个属性,解释如下:
Type – 类型,有2个选择RelativeToParent与RelativeToView,看单词大家应该就明白了,一个是针对于父节点的相对定位,一个是针对某一个视图的相对定位
Property – 你要设置的什么属性,例如Property=Height,就是你要设置的是高度的属性.
Factor – 你要相对于某视图的比例值,比如A控件高度是100,你这里输入.5, 那么就是50.
Constant – 你要调整的属性值,因为上面只能设置比例,所以通过这个属性来微调位置,设置负数就是减去你设置的值,正数就是加
ElementName – 你要相对的控件的Name,例如:ElementName=redBox, 就是相对于 x:Name属性为redBox的控件.(例子中的红色块)
4.Grid(表格布局)
Gird表格布局,支持将视图排列成行和列。行和列可以设置为比例值或绝对值。
Gird布局不应该与传统的表格相混淆，并且他的作用并不是呈现表格数据。
它不像HTML中的Table，Gird纯粹是为了布局内容。
例子代码如下:
<Grid><Grid.RowDefinitions><RowDefinition Height="4*" /><RowDefinition Height="*" /><RowDefinition Height="200" /><RowDefinition Height="2*" /></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="2*" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><BoxView BackgroundColor="Red" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="0" Grid.Column="0" /><Label Text="Top Right" Grid.Row="0" Grid.Column="1" /><Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" BackgroundColor="Cyan" Grid.ColumnSpan="2" /><!--<Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" />--><BoxView BackgroundColor="Blue" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="2" Grid.Column="0" /><BoxView BackgroundColor="Green" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="2" Grid.Column="1" Grid.RowSpan="2" /><BoxView BackgroundColor="AliceBlue" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="3" Grid.Column="0" /></Grid>
效果如下:
4.1 Grid.RowDefinitions
它是设置Grid行数的容器,应该放在Grid标签里面,例子如下:
<Grid><Grid.RowDefinitions><RowDefinition Height="4*" /><RowDefinition Height="*" /><RowDefinition Height="200" /><RowDefinition Height="2*" /></Grid.RowDefinitions></Grid>
这样就设置了一个为4行的Grid,可以通过Height属性来设置它的高."*"号为百分比设置 2*表示为20%. 直接设置绝对值也可以,如例子中的Height="200"
4.2 Grid.ColumnDefinitions
它是设置Grid列数的容器,应该放在Grid标签里面,例子如下:
<Grid><Grid.ColumnDefinitions><ColumnDefinition Width="2*" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions></Grid>
这样就设置了一个为2列的Grid,可以通过Width属性来设置它的高."*"号为百分比设置 2*表示为20%. 直接设置绝对值也可以,如Width="200"
4.3 设置Grid中的内容.
很简单,直接在Grid中添加控件,并写好对应的行列就行了.如下
<Label Text="Top Right" Grid.Row="0" Grid.Column="1" />
那么,这个label控件就会显示在Grid中的第一行 第二列(注意:这里的行列都是从0开始)
4.4 如何跨行,跨列
跨行,跨列也很简单,如下:
<Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" BackgroundColor="Cyan" Grid.ColumnSpan="2" />
<BoxView BackgroundColor="Green" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="2" Grid.Column="1" Grid.RowSpan="2" />
直接设置Grid.ColumnSpan与Grid.RowSpan 即可,HTML中的Table已经用过很多次了..我就不多解释了.
4.5 如何设置行间距与列间距
嗯..同样简单,直接设置Grid标签的ColumnSpacing与RowSpacing即可.如下:
<Grid ColumnSpacing="5" RowSpacing="10"></Grid>
上面的列子就是行间距为10,列间距为5.
写在最后
好了,到此,本篇的布局就结束了...
不管你们怎么说..是骂我坑也好..是说Xamarin不行也好..本系列都会坚持写完.
相关文章：
C#使用Xamarin开发可移植移动应用(1.入门与Xamarin.Forms页面),附源码
.NET Standard@Xamarin.Forms
原文地址：http://www.cnblogs.com/GuZhenYin/p/7338709.html
.NET社区新闻，深度好文，微信中搜索dotNET跨平台或扫描二维码关注
C#使用Xamarin开发可移植移动应用(2.Xamarin.Forms布局,本篇很长,注意)附源码相关推荐
- C#使用Xamarin开发可移植移动应用(3.Xamarin.Views控件)附源码
.NET core2.0 发布了,刺激,大致看了一下,很不错,打算后期学习.(不出意外,应该也会写个小系列). 虽然官方推荐用共享类库创建新的类库..然而我这个Demo还是使用的可移植.. 嗯..解释 ...
- 实战：一天开发一款内置游戏直播的国产版Discord应用【附源码】
游戏直播是Discord产品的核心功能之一,本教程教大家如何1天内开发一款内置游戏直播的国产版Discord应用,用户不仅可以通过IM聊天,也可以进行语聊,看游戏直播,甚至自己进行游戏直播,无任何实时 ...
- Python开发万能钥匙小程序，成功获取邻居家Wifi密码（附源码）！
平时回家看用手机看视频.打游戏的时候,如果没有wifi是不是特别心疼自己的流量?当然了如果你有无限流量那就当我没说了哈,没有wifi但是我可以用万能钥匙破解别人的wifi呀,万能钥匙是什么?如果你的手 ...
- 全栈开发实战（一）——简易博客社区后端搭建教程（附源码）
全栈开发实战(一)--简易博客社区后端搭建 项目展示视频 项目Github地址 (一)项目准备 在项目开始前,首先确保你已安装好Go语言并配置好Go语言编辑器,同时安装好MySQL或其他数据库,其次, ...
- Android开发UI新技能，你get这个新技能了吗？(附源码详解)
val state = +state { "Text Field to input" } TextField( value = state.value, onValueChange ...
- Android 开发人脸识别之自动识别验证码功能讲解及实现（超详细 附源码）
需要源码和图片集请点赞关注收藏后评论区留下QQ或者私信~~~ 一.自动识别验证码 验证码图片中最简单的是数字验证码,一张再普通不过的验证码拿到之后要进行以下步骤的处理 1:首先对图片适当裁剪,先去掉外 ...
- Android App开发手机阅读中PDF文件渲染器的讲解及使用（附源码 简单易懂）
需要源码和图片集请点赞关注收藏后评论区留言~~~ 一.PDF文件渲染器 Android集成了PDF的渲染操作,从很大程度上方便了开发者,这个PDF文件渲染器便是PdfRenderer.渲染器允许从存储 ...
- C#使用Xamarin开发可移植移动应用进阶篇(10.综合演练,来一份增删改查CRUD)
说点什么.. 呃 也有半个月没更新了. 本来这篇的Demo早就写完了,文章也构思好了.迟迟没发布..是因为实在太忙.. 项目要上线..各种 你们懂的.. 正赶上自己十一人生大事..结婚..所以..忙 ...
- C#使用Xamarin开发可移植移动应用进阶篇(9.混淆代码,防止反编译)
嗯,既然是客户端应用,自然而然就需要一些防止源码泄漏的手段.通过C#编写的APP,完全是可以直接解压APK,然后得到里面的DLL然后进行反编译的.. 如下图: 嗯..这样就会造成代码泄漏.. 下面就介 ...
最新文章
- 常见网络加速技术浅谈（二）
- Java程序员从笨鸟到菜鸟之（七十）细谈Spring（三）IOC和spring基本配置详解
- redis和kafka比较
- linux下使用python操作mysql
- GitHub 贡献第一的微软开源软件列表
- 深度学习在文本领域的应用
- [转载]Linux批量替换不同文件中的相同字符串
- 软件设计师16-数据结构02（排序/查找）
- Spark cluster 安装
- Redis学习记录之Java中的初步使用
- 给出一个 32 位的有符号整数，你需要将这个整数中每位上的数字进行反转。
- EntityFrameworkCore DBFirst
- jeesit1.27使用（1）-字典使用
- 【转载】前端项目开发流程及技术选型
- linux删除文件历史如何查看,如何恢复误删除的Linux文件
- 【深度学习之美】一入侯门“深”似海，深度学习深几许（入门系列之一）
- jquery中ajax中的参数,jquery中的ajax参数
- ad批量走线_AD中 蛇形走法、多条网络同时布线、交互布线、logo、差分走线、3D...
- 闪光网彭亮《我死，我想留下什么》
- 一般英文(java)