前言

源碼地址:https://github.com/l2999019/DemoApp

可以Star一下,隨意 - -

一點(diǎn)感想

很意外的,第一篇博文被博客園的編輯大哥置頂了.感謝.

評(píng)論也很多,褒貶不一,我還是那句話.技術(shù)是從無到有的過程,就像一個(gè)剛出生的人?不是說他有個(gè)強(qiáng)大的爸爸 所以就可以一出生就上天.

.NET如此,JAVA亦如此.言盡于此,對(duì)于噴子 好自為之..

好了,廢話不多說,我們開始本章的內(nèi)容.

今天的學(xué)習(xí)內(nèi)容?

昨天學(xué)了內(nèi)容頁(yè),當(dāng)然就少不了內(nèi)容頁(yè)里面的布局,所以..

今天我們主要學(xué)習(xí)Xamarin.Forms中提供的各類布局手段,如圖:

?

Xamarin.Forms提供了5種布局,我這里只截取了4種,第五種是ScrollView,個(gè)人覺得..這個(gè)的操作作用大于布局作用..所以本章就不講了.

本篇很長(zhǎng)...內(nèi)容很多,且自己認(rèn)為比較重要..大家耐心看

各種布局,Demo效果如下:

?

正文

0.使用Xamarin.Forms Previewer預(yù)覽界面效果

Xamarin.Forms Previewer是微軟提供的可以不運(yùn)行程序,直接預(yù)覽界面效果的工具..

因?yàn)楸菊轮饕v布局,所以用這個(gè)會(huì)比較方便,不用每次都運(yùn)行調(diào)試.

嗯,這個(gè)工具.大家湊合用 - -,因?yàn)樗旧肀容^麻煩且會(huì)有莫名BUG,不過用順暢了 還不錯(cuò).

VS2017直接按照下圖方式打開即可,VS2015 - - 我暫時(shí)沒轍...

?

效果如下:

?好了,大功告成,

嗯..使用中有任何的錯(cuò)誤 或者紅色的錯(cuò)誤提示,請(qǐng)重新生成程序集,或者在幾個(gè)視圖中跳轉(zhuǎn)一下..一般都會(huì)好..(tips:這就是我說的小麻煩)

?

1.StackLayout(線性布局)

StackLayout以線性的方式進(jìn)行水平或垂直的視圖布局。

我們直接創(chuàng)建一個(gè)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 中設(shè)置Orientation屬性.

就兩個(gè)選擇,Horizontal(水平方向),Vertical(垂直方向)默認(rèn)為Vertical

代碼如下:

<StackLayout Spacing="10" x:Name="layout" Orientation="Horizontal"><--這里是內(nèi)容--></StackLayout>

1.2定位

大家可以看到,我在StackLayout 中的控件里面加了2個(gè)屬性:

VerticalOptions(垂直位置)

HorizontalOptions(水平位置)

這2個(gè)屬性,要求傳遞LayoutOptions(布局選項(xiàng))的枚舉,我們可以通過這里面的選擇,來確定我們控件的位置.

• Center?– 將控件固定在視圖的中心位置

• End?– 將控件固定在布局中的底部位置(橫向布局則為最右邊)

• Fill?– 將控件根據(jù)布局方向填充空余位置.

• Start?– 將控件固定在布局中的頂部位置(橫向布局則為最左邊)

1.3填充

在上面的定位屬性后面,都可以加一個(gè)后綴AndExpand,嗯..舉個(gè)例子 就是這樣FillAndExpand

會(huì)產(chǎn)生什么效果呢?

它會(huì)根據(jù)屏幕的大小,和你布局中其他的內(nèi)容,如果有空白位置就會(huì)由設(shè)置了AndExpand的自動(dòng)填充.

如果多個(gè)屬性都有AndExpand

則會(huì)平分空白的位置.

1.4邊距

邊距的設(shè)置很簡(jiǎn)單,設(shè)置StackLayout 的Spacing屬性即可.

Spacing默認(rèn)值為6

?

2.AbsoluteLayout(絕對(duì)定位)

這個(gè)..寫過HTML的朋友們都知道,絕對(duì)定位嘛..就是根據(jù)X Y軸的坐標(biāo) 直接給出控件的位置.

嗯先上列子的xaml代碼吧,如下:

<AbsoluteLayout> <Label Text="這里是數(shù)值定位"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>

效果如下:

下面我們就來詳細(xì)的講解一下絕對(duì)定位布局相關(guān)的屬性.

我們?nèi)绻贏bsoluteLayout中添加控件,會(huì)發(fā)現(xiàn),所有的控件,都會(huì)多出一個(gè)命名空間,下面有2個(gè)屬性,如下:

講解這2個(gè)屬性之前,我們需要了解AbsoluteLayout中的2個(gè)概念,一個(gè)叫做比例值,一個(gè)叫絕對(duì)值.

其實(shí)從字面就可以看出來,比例值就是類似HTML的10%,20%之類的..絕對(duì)值就是類似HTML的5px,10px之類的

當(dāng)然,我們的Xamarin有所不同. ??比例值需要設(shè)置為.1(注意前面有個(gè)".", .1的意思就是10% ) 絕對(duì)值就很簡(jiǎn)單了 10, 100 ..直接給數(shù)字就行

2.1 LayoutBounds

從上面的例子我們可以看到LayoutBounds是有4個(gè)值的.類似下面:

<Label Text="這里是數(shù)值定位"AbsoluteLayout.LayoutBounds="1,50,50,100" LineBreakMode="WordWrap" />

從左至右,依次代表的意思是:

X軸的位置,Y軸的位置,控件的寬度,控件的高度.

有了上面這些屬性,我們就可以很輕松的操控一個(gè)控件所在的位置和大小了.

?

2.2 LayoutFlags

上面我們說過,是分比例值與絕對(duì)值的.那怎么設(shè)置這個(gè)呢,就是通過LayoutFlags這個(gè)屬性.它有7個(gè)枚舉值.如下:

• 默認(rèn)?- 將所有值解析為絕對(duì)值。如果未指定LayoutFlags,則為默認(rèn)值。

• All- 將所有值解析為比例。

• WidthProportional?- 僅將Width值作為比例值，將所有其他值解析為絕對(duì)值。

• HeightProportional?- 僅將height值作為比例值，將所有其他值解析為絕對(duì)值。

• XProportional?-??僅將X軸作為比例值，將所有其他值解析為絕對(duì)值。

• YProportional-??僅將Y軸作為比例值，將所有其他值解析為絕對(duì)值。

• PositionProportional?-?將X軸和Y軸作為比例解析，而控件大小值被作為絕對(duì)值解析。

• SizeProportional?-?將控件大小值作為比例解析，而X軸和Y軸被作為絕對(duì)值解析。

3.RelativeLayout(相對(duì)定位)

?嗯..相對(duì)定位,顧名思義..就是相對(duì)于某個(gè)控件來進(jìn)行定位..也可以是整個(gè)布局

示例代碼如下:

<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>

效果如下:

相對(duì)定位的東西比較復(fù)雜,仔細(xì)閱讀吧.

?

3.1?Constraint(約束)

相對(duì)定位有個(gè)叫做約束的概念,所以我們可以看到.在RelativeLayout的里面,所有的控件 都會(huì)出現(xiàn)下面幾種屬性

XConstraint ,YConstraint,?WidthConstraint,HeightConstraint

其實(shí)看前面,大家就應(yīng)該知道是X Y 寬 高.

里面的寫法 類似于JSON,如下:

?

RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=redBox,Property=Y,Factor=1,Constant=20}"

?

大口號(hào)前面定義ConstraintExpression,代表它為約束的表達(dá)式.

里面有5個(gè)屬性,解釋如下:

• Type?– 類型,有2個(gè)選擇RelativeToParent與RelativeToView,看單詞大家應(yīng)該就明白了,一個(gè)是針對(duì)于父節(jié)點(diǎn)的相對(duì)定位,一個(gè)是針對(duì)某一個(gè)視圖的相對(duì)定位

• Property?– 你要設(shè)置的什么屬性,例如Property=Height,就是你要設(shè)置的是高度的屬性.

• Factor?– 你要相對(duì)于某視圖的比例值,比如A控件高度是100,你這里輸入.5, 那么就是50.

• Constant?– 你要調(diào)整的屬性值,因?yàn)樯厦嬷荒茉O(shè)置比例,所以通過這個(gè)屬性來微調(diào)位置,設(shè)置負(fù)數(shù)就是減去你設(shè)置的值,正數(shù)就是加

• ElementName?– 你要相對(duì)的控件的Name,例如:ElementName=redBox, 就是相對(duì)于 x:Name屬性為redBox的控件.(例子中的紅色塊)　　

?

?

4.Grid(表格布局)

Gird表格布局,支持將視圖排列成行和列。行和列可以設(shè)置為比例值或絕對(duì)值。

Gird布局不應(yīng)該與傳統(tǒng)的表格相混淆，并且他的作用并不是呈現(xiàn)表格數(shù)據(jù)。

它不像HTML中的Table，Gird純粹是為了布局內(nèi)容。

例子代碼如下:

<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

它是設(shè)置Grid行數(shù)的容器,應(yīng)該放在Grid標(biāo)簽里面,例子如下:

<Grid><Grid.RowDefinitions><RowDefinition Height="4*" /><RowDefinition Height="*" /><RowDefinition Height="200" /><RowDefinition Height="2*" /></Grid.RowDefinitions></Grid>

這樣就設(shè)置了一個(gè)為4行的Grid,可以通過Height屬性來設(shè)置它的高."*"號(hào)為百分比設(shè)置 ?2*表示為20%. 直接設(shè)置絕對(duì)值也可以,如例子中的Height="200"

?

4.2 Grid.ColumnDefinitions

它是設(shè)置Grid列數(shù)的容器,應(yīng)該放在Grid標(biāo)簽里面,例子如下:

<Grid><Grid.ColumnDefinitions><ColumnDefinition Width="2*" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions></Grid>

這樣就設(shè)置了一個(gè)為2列的Grid,可以通過Width屬性來設(shè)置它的高."*"號(hào)為百分比設(shè)置 ?2*表示為20%. 直接設(shè)置絕對(duì)值也可以,如Width="200"

?

4.3 ?設(shè)置Grid中的內(nèi)容.

很簡(jiǎn)單,直接在Grid中添加控件,并寫好對(duì)應(yīng)的行列就行了.如下

<Label Text="Top Right" Grid.Row="0" Grid.Column="1" />

那么,這個(gè)label控件就會(huì)顯示在Grid中的第一行 第二列(注意:這里的行列都是從0開始)

?

4.4 ?如何跨行,跨列

跨行,跨列也很簡(jiǎn)單,如下:

<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" />

直接設(shè)置Grid.ColumnSpan與Grid.RowSpan?即可,HTML中的Table已經(jīng)用過很多次了..我就不多解釋了.

?

4.5 ?如何設(shè)置行間距與列間距

?嗯..同樣簡(jiǎn)單,直接設(shè)置Grid標(biāo)簽的ColumnSpacing與RowSpacing即可.如下:

<Grid ColumnSpacing="5" RowSpacing="10"></Grid>

上面的列子就是行間距為10,列間距為5.

?

寫在最后

好了,到此,本篇的布局就結(jié)束了...

不管你們?cè)趺凑f..是罵我坑也好..是說Xamarin不行也好..本系列都會(huì)堅(jiān)持寫完.

相關(guān)文章：?

• C#使用Xamarin開發(fā)可移植移動(dòng)應(yīng)用(1.入門與Xamarin.Forms頁(yè)面),附源碼

• .NET Standard@Xamarin.Forms
  

原文地址：http://www.cnblogs.com/GuZhenYin/p/7338709.html

---

.NET社區(qū)新聞，深度好文，微信中搜索dotNET跨平臺(tái)或掃描二維碼關(guān)注

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的C#使用Xamarin开发可移植移动应用(2.Xamarin.Forms布局,本篇很长,注意)附源码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。