系列目錄
源碼地址: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不行也好..本系列都會堅持寫完.
最后,感謝點推薦的兄弟們,感謝那些一直支持着我的朋友們,謝謝.