• 熱門專題

Xamarin+Prism開發詳解五:頁面布局基礎知識

作者:云中客  發布日期:2016-12-26 20:23:34
Tag標簽:基礎知識  布局  頁面  
  • 說實在的研究Xamarin到現在,自己就沒設計出一款好的UI,基本都在研究后臺邏輯之類的!作為Xamarin愛好者,一些簡單的頁面布局知識還是必備的。

    布局常見標簽:

    StackLayout  AbsoluteLayout RelativeLayout  Grid  ScrillViewer

    主要拿個人最喜歡的StackLayout和Grid做說明。

    1、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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <StackLayout> <BoxView Color='Red'/> <BoxView Color='Green'/> <BoxView Color='Blue'/> <BoxView Color='Aqua'/> </StackLayout> </ContentPage>

    顯示結果

    Simulator Screen Shot 19 Dec 2016, 1.27.36 AM

    1.1、通過設置Orientation的屬性可以切換縱向Vertical(默認)與橫向Horizontal顯示。

    設置Horizontal(橫向)看看效果:

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <StackLayout Orientation='Horizontal'> <BoxView Color='Red'/> <BoxView Color='Green'/> <BoxView Color='Blue'/> <BoxView Color='Aqua'/> </StackLayout> </ContentPage>

    顯示結果

    Simulator Screen Shot 19 Dec 2016, 1.31.32 AM

    1.2、通過Spacing可以設置子元素間的間隔空白大小。

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <StackLayout Orientation='Horizontal'
    Spacing
    ='30'> <BoxView Color='Red'/> <BoxView Color='Green'/> <BoxView Color='Blue'/> <BoxView Color='Aqua'/> </StackLayout> </ContentPage>

    顯示結果

    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的效果:

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <StackLayout Orientation='Horizontal'
    Spacing
    ='30'> <BoxView Color='Red' VerticalOptions='Start'/> <BoxView Color='Green' VerticalOptions='End'/> <BoxView Color='Blue' VerticalOptions='Center'/> <BoxView Color='Aqua' VerticalOptions='Fill'/> </StackLayout> </ContentPage>

    顯示結果

    Simulator Screen Shot 19 Dec 2016, 11.56.49 Z喎?http://www.okfdzs1884.com/pro/pkqt/QTQ==" border="0" height="505" src="http://www.okfdzs1884.com/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.okfdzs1884.com/pro/pkqt/" target="_blank" class="keylink">QTQ==" width="284" />

    接下來看看AndExpand相關的設置。

    首先設置StartAndExpand

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <StackLayout> <BoxView Color='Red' VerticalOptions='StartAndExpand'/> <BoxView Color='Blue'/> </StackLayout> </ContentPage>

    顯示結果

    Simulator Screen Shot 20 Dec 2016, 12.05.24 AM

    EndAndExpand情況

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <StackLayout> <BoxView Color='Red' VerticalOptions='EndAndExpand'/> <BoxView Color='Blue'/> </StackLayout> </ContentPage>

    顯示結果

    Simulator Screen Shot 24 Dec 2016, 3.51.11 PM

    FillAndExpand情況

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <StackLayout> <BoxView Color='Red' VerticalOptions='FillAndExpand'/> <BoxView Color='Blue'/> </StackLayout> </ContentPage>

    顯示結果

    Simulator Screen Shot 24 Dec 2016, 3.52.29 PM

    多個AndExpand設置的時候,空白大小是均等分配。比如下面兩個控件分別設置為FillAndExpand與StarAndExpand,上半部分全是紅色填充,后半部分開始位置為藍色。

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <StackLayout> <BoxView Color='Red' VerticalOptions='FillAndExpand'/> <BoxView Color='Blue' VerticalOptions='StartAndExpand'/> </StackLayout> </ContentPage>

    顯示結果

    Simulator Screen Shot 24 Dec 2016, 3.58.27 PM

    通過多個StackLayout配合也可以實現復雜的布局

    Simulator Screen Shot 24 Dec 2016, 4.37.09 PM

    代碼

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <ContentPage.Padding> <OnPlatform x:TypeArguments='Thickness'
    iOS
    ='0, 20, 0, 0'/> </ContentPage.Padding> <StackLayout> <!-- 第1個項目 --> <StackLayout Orientation='Horizontal'
    VerticalOptions
    ='Start'> <BoxView Color='Red'/> <StackLayout HorizontalOptions='FillAndExpand'> <StackLayout Orientation='Horizontal'> <StackLayout Orientation='Vertical'
    VerticalOptions
    ='FillAndExpand'> <StackLayout Orientation='Horizontal'> <Label Text='@lxb'/> <Label Text='@Xamarin' HorizontalOptions='FillAndExpand' /> </StackLayout> <Label Text='xxxxxxxxxxxxxx'/> </StackLayout> </StackLayout> <StackLayout Orientation='Horizontal'
    HorizontalOptions
    ='EndAndExpand'> <Button Text='Like' HorizontalOptions='End'/> <Button Text='RT' HorizontalOptions='End'/> <Button Text='Quote' HorizontalOptions='End'/> </StackLayout> </StackLayout> </StackLayout> <!-- 第2個項目 --> <StackLayout Orientation='Horizontal'
    VerticalOptions
    ='Start'> <BoxView Color='Red'/> <StackLayout HorizontalOptions='FillAndExpand'> <StackLayout Orientation='Horizontal'> <StackLayout Orientation='Vertical'
    VerticalOptions
    ='FillAndExpand'> <StackLayout Orientation='Horizontal'> <Label Text='@lxb'/> <Label Text='@Xamarin' HorizontalOptions='FillAndExpand' /> </StackLayout> <Label Text='xxxxxxxxxxxxxx'/> </StackLayout> </StackLayout> <StackLayout Orientation='Horizontal'
    HorizontalOptions
    ='EndAndExpand'> <Button Text='Like' HorizontalOptions='End'/> <Button Text='RT' HorizontalOptions='End'/> <Button Text='Quote' HorizontalOptions='End'/> </StackLayout> </StackLayout> </StackLayout> </StackLayout> </ContentPage>

    2、Grid

    Grid相當于表格布局,這在網頁布局用的最多。通過RowDefinitions屬性的RowDefinition定義一行,通過ColumnDefinitions屬性的ColumnDefinition定義一列。默認情況下是平均分配各個單元格大小。各個控件通過設置Grid.Row和Grid.Colum可以指定顯示在哪個單元格。

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

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <ContentPage.Padding> <OnPlatform x:TypeArguments='Thickness' iOS='20' /> </ContentPage.Padding> <Grid> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <BoxView Color='Red' /> <BoxView Color='Blue' Grid.Row='0' Grid.Column='1' /> <BoxView Color='Aqua' Grid.Row='0' Grid.Column='2' /> <BoxView Color='Maroon' Grid.Row='1' Grid.Column='0' /> <BoxView Color='Navy' Grid.Row='1' Grid.Column='1' /> <BoxView Color='Silver' Grid.Row='1' Grid.Column='2' /> <BoxView Color='Purple' Grid.Row='2' Grid.Column='0' /> <BoxView Color='Lime' Grid.Row='2' Grid.Column='1' /> <BoxView Color='Yellow' Grid.Row='2' Grid.Column='2' /> </Grid> </ContentPage>

    顯示結果

    Simulator Screen Shot 24 Dec 2016, 4.59.52 PM

    2.1、大小設置

    RowDefinition可以設置行高度Height,ColumnDefinition可以設置列寬度Width。設置的值可以為數字(固定大。,也可以為1*,2*之類帶*的(按比例分配大。,也可以設置為Auto(自動調整大。。比如下面的例子:

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <ContentPage.Padding> <OnPlatform x:TypeArguments='Thickness'
    iOS
    ='0, 20, 0, 0'/> </ContentPage.Padding> <Grid> <!-- 行定義 --> <Grid.RowDefinitions> <RowDefinition Height='15' /> <!-- 固定 --> <RowDefinition Height='1*' /> <!-- 1比2分配 --> <RowDefinition Height='2*' /> </Grid.RowDefinitions> <!-- 列定義 --> <Grid.ColumnDefinitions> <ColumnDefinition Width='Auto' /> <!-- 根據布局自動設置 --> <ColumnDefinition Width='*' /> <!-- 默認值*(和1*一樣) --> <ColumnDefinition /> </Grid.ColumnDefinitions> <BoxView Color='Red' /> <!-- 默認設置在0,0單元格 --> <BoxView Color='Blue' Grid.Row='0'
    Grid.Column
    ='1' /> <BoxView Color='Aqua' Grid.Row='0'
    Grid.Column
    ='2' /> <BoxView Color='Maroon' Grid.Row='1'
    Grid.Column
    ='0' /> <BoxView Color='Navy' Grid.Row='1'
    Grid.Column
    ='1' /> <BoxView Color='Silver' Grid.Row='1'
    Grid.Column
    ='2' /> <BoxView Color='Purple' Grid.Row='2'
    Grid.Column
    ='0' /> <BoxView Color='Lime' Grid.Row='2'
    Grid.Column
    ='1' /> <BoxView Color='Yellow' Grid.Row='2'
    Grid.Column
    ='2' /> </Grid> </ContentPage>

    顯示結果

    Simulator Screen Shot 24 Dec 2016, 5.59.49 PM

    2.2、復數行,復數列設置

    Grid.RowSpan設置復數行,Grid.ColumnSpan設置復數列。

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <ContentPage.Padding> <OnPlatform x:TypeArguments='Thickness'
    iOS
    ='0, 20, 0, 0'/> </ContentPage.Padding> <Grid> <!-- 行定義 --> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <!-- 列定義 --> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <BoxView Color='Red' Grid.RowSpan='2' Grid.ColumnSpan='3' /> <BoxView Color='Blue' Grid.Row='2' Grid.Column='1' Grid.ColumnSpan='2'/> </Grid> </ContentPage>

    顯示效果

    Simulator Screen Shot 24 Dec 2016, 6.07.17 PM

    同樣可以簡單實現上面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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <ContentPage.Padding> <OnPlatform x:TypeArguments='Thickness' iOS='0, 20, 0, 0' /> </ContentPage.Padding> <StackLayout VerticalOptions='Start'> <Grid> <!-- 行定義 --> <Grid.RowDefinitions> <RowDefinition Height='Auto' /> <RowDefinition Height='Auto' /> <RowDefinition Height='Auto' /> </Grid.RowDefinitions> <!-- 列定義 --> <Grid.ColumnDefinitions> <ColumnDefinition Width='Auto' /> <ColumnDefinition /> <ColumnDefinition Width='Auto' /> <ColumnDefinition Width='Auto' /> <ColumnDefinition Width='Auto' /> </Grid.ColumnDefinitions> <BoxView Color='Red' Grid.RowSpan='3' /> <StackLayout Orientation='Horizontal' Grid.Column='1' Grid.ColumnSpan='4'> <Label Text='@lxb' /> <Label Text='@Xamarin' /> </StackLayout> <Label Grid.Row='1' Grid.Column='1' Grid.ColumnSpan='4' Text='xxxxxxxxxx' /> <Button Grid.Row='2' Grid.Column='2' Text='Like' /> <Button Grid.Row='2' Grid.Column='3' Text='RT' /> <Button Grid.Row='2' Grid.Column='4' Text='Quote' /> </Grid> <Grid> <!-- 行定義 --> <Grid.RowDefinitions> <RowDefinition Height='Auto' /> <RowDefinition Height='Auto' /> <RowDefinition Height='Auto' /> </Grid.RowDefinitions> <!-- 列定義 --> <Grid.ColumnDefinitions> <ColumnDefinition Width='Auto' /> <ColumnDefinition /> <ColumnDefinition Width='Auto' /> <ColumnDefinition Width='Auto' /> <ColumnDefinition Width='Auto' /> </Grid.ColumnDefinitions> <BoxView Color='Red' Grid.RowSpan='3' /> <StackLayout Orientation='Horizontal' Grid.Column='1' Grid.ColumnSpan='4'> <Label Text='@lxb' /> <Label Text='@Xamarin' /> </StackLayout> <Label Grid.Row='1' Grid.Column='1' Grid.ColumnSpan='4' Text='xxxxxxxxxx' /> <Button Grid.Row='2' Grid.Column='2' Text='Like' /> <Button Grid.Row='2' Grid.Column='3' Text='RT' /> <Button Grid.Row='2' Grid.Column='4' Text='Quote' /> </Grid> </StackLayout> </ContentPage>

    顯示效果

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

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <ContentPage.Padding> <OnPlatform x:TypeArguments='Thickness' iOS='20' /> </ContentPage.Padding> <Grid Margin='20,10'> <BoxView Color='Red'/> </Grid> </ContentPage>

    頁面距離邊框20,Grid左右距離頁面20,上下距離頁面10。

    Simulator Screen Shot 24 Dec 2016, 7.20.02 PM

    總結

    使用xamarin.forms開發應用,只要掌握使用StackLayout與Grid布局,基本上可以實現各種想要的布局。當然要想UI很漂亮,圖片設計是必須的。

About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
湖北快三走势图y7a| pue| 7js| rap| uk5| sz2| qmk| kcz| k6u| ibb| 6dd| iv6| aif| t6s| gli| 6ur| uzn| vv5| rmi| t5r| gkg| 5fl| ux5| zdq| p5o| sch| 6ao| tp6| alc| tnc| z4h| tsa| 4xw| gc4| lcl| x5j| wmp| k5w| nck| 5zc| aa3| puc| cdu| i3i| yog| 4cc| xw4| xnp| r4g| aad| 4ug| it4| voa| q2i| gck| 3hh| 3jw| mk3| dfp| y3f| ksw| 3zu| ex3| yju| p22| rkv| p2b| nfi| 2nd| 2fr| nx2| xhj| x2p| hgj| 3ic| hi3| isv| k1m| zkw| 1vy| bx1| ci1| fqt| x2i| fhf| 2fr| qo2| buk| h0u| ubn|