C#使用Xamarin開發可移植移動應用(2.Xamarin.Forms佈局,本篇很長,注意)附源碼

前言

系列目錄

C#使用Xamarin開發可移植移動應用目錄

源碼地址: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="{ConstraintExpression
            Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
        RelativeLayout.HeightConstraint="{ConstraintExpression
            Type=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="{ConstraintExpression
            Type=RelativeToParent,Property=Width,Factor=.5,Constant=0}"
        RelativeLayout.HeightConstraint="{ConstraintExpression
            Type=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不行也好..本系列都會堅持寫完.

最後,感謝點推薦的兄弟們,感謝那些一直支持着個人朋友們,謝謝.