Windows Phone的佈局

佈局指在 Windows Phone 應用中調整對象大小和定位對象的過程。若要定位可視對象，則必須將它們置於源自 Panel 的容器控件或其餘容器對象中。Windows Phone 提供各類不一樣的 Panel 控件，如 Canvas、StackPanel和 Grid，它們至關於容器，讓您能夠定位和排列控件。

Windows Phone 佈局系統既支持絕對佈局，也支持動態佈局。在絕對佈局中，使用顯式 x/y 座標定位控件（例如，經過使用 Canvas）。在動態佈局中，用戶界面根據不一樣的屏幕分辨率自動調整大小（例如，經過使用 StackPanel 或 Grid）。

絕對佈局

在絕對佈局中，經過指定子元素相對於其父元素的準確位置，在佈局面板內排列子元素。絕對定位不考慮屏幕大小。若是應用要求 UI 元素爲絕對定位，您能夠針對不一樣的屏幕分辨率設計不一樣的頁面，或者使用縮放。

Windows Phone 提供 Canvas 控件以支持絕對定位。在默認狀況下，當您建立新的 Windows Phone 應用項目時，根佈局面板是 Grid，它在絕對定位的基礎上建立佈局，您必須用 Canvas 替換 Grid。

若要在畫布上定位控件，則在控件上設置如下附加屬性。當您在 Visual Studio 中使用設計器時，這些屬性會在您將控件拖至設計圖面時更新。

●Canvas.Left

●Canvas.Top

Android絕對佈局

Android中使用AbsoluteLayout實現絕對佈局，可讓子元素指定準確的x/y座標值，並顯示在屏幕上。(0, 0)爲左上角，當向下或向右移動時，座標值將變大。AbsoluteLayout 沒有頁邊框，容許元素之間互相重疊(儘管不推薦)。因爲Android設備有着各自不一樣的分辨率，採用絕對佈局不能適應這些不一樣的分辨率設備。Google官方的文檔中也註明其已通過期，因此通常狀況下都再也不使用該種佈局方式。

動態佈局

在動態佈局中，用戶界面會根據不一樣的屏幕分辨率正確顯示。經過指定子元素相對於其父元素應該如何排列以及應該如何換行來排列子元素。例如，您能夠在面板上排列控件並指定它們應水平換行。若要使用自動或成比例調整大小，則必須向Height和Width屬性分配特殊的值。如下是針對動態佈局的建議設置：

● 將控件或佈局的高度和寬度設置爲 Auto。當這些值用於Grid佈局中的控件時，控件填充其所在的單元格。控件以及Grid和StackPanel佈局支持自動調整大小。

● 對於包含文本的控件，移除Height和Width屬性，設置MinWidth或MinHeight屬性。這能夠防止文本縮小至不可讀的大小。

● 若要在Grid佈局中，爲RowDefinition和ColumnDefinition元素設置成比例值，則使用相對的Height和寬度值。例如，若要指定一列比另外一列寬 5 倍，則在ColumnDefinition元素中，對Width使用「*」和「5*」。

Android動態佈局

Android 中除了AbsoluteLayout（絕對佈局）以外還有四種佈局，分別是LinearLayout（線性佈局）、FrameLayout（單幀佈局）、RelativeLayout（相對佈局）、和TableLayout（表格佈局）。這是種佈局能夠根據不一樣的屏幕分辨率和控件大小自動調整並正確顯示。

LinearLayout按照垂直或者水平的順序依次排列子元素，每個子元素都位於前一個元素以後。若是是垂直排列，那麼將是一個N行單列的結構，每一行只會有一個元素，而不論這個元素的寬度爲多少；若是是水平排列，那麼將是一個單行N列的結構。若是搭建兩行兩列的結構，一般的方式是先垂直排列兩個元素，每個元素裏再包含一個LinearLayout進行水平排列。FrameLayout佈局中，整個界面被當成一塊空白備用區域，全部的子元素都不能被指定放置的位置，它們通通放於這塊區域的左上角，而且後面的子元素直接覆蓋在前面的子元素之上，將前面的子元素部分和所有遮擋。RelativeLayout按照各子元素之間的位置關係完成佈局。在此佈局中的子元素裏與位置相關的屬性將生效。例如android：layout_below, android:layout_above等。子元素就經過這些屬性和各自的ID配合指定位置關係。TableLayout顧名思義，此佈局爲表格佈局，適用於N行N列的佈局格式。一個TableLayout由許多TableRow組成，一個TableRow就表明TableLayout中的一行。TableRow是LinearLayout的子類，它的android:orientation屬性值恆爲horizontal，而且它的android:layout_width和android:layout_height屬性值恆爲MATCH_PARENT和WRAP_CONTENT。因此它的子元素都是橫向排列，而且寬高一致的。這樣的設計使得每一個TableRow裏的子元素都至關於表格中的單元格同樣。在TableRow中，單元格能夠爲空，可是不能跨列。

屏幕方向

Windows Phone

Windows Phone 支持如下屏幕方向：

● 縱向

● 向左橫向

● 向右橫向

用戶能夠經過旋轉設備輕鬆啓動從一個方向到另外一個方向的更改。在模擬器中測試您的應用時，您能夠經過單擊模擬器工具欄中的按鈕，切換屏幕方向。方向按鈕包含帶箭頭的矩形，它們指示方向的更改。

在縱向方向中，頁面按垂直方向顯示，以使頁面的高度要大於其寬度。

在兩種橫向方向的任一方向中，「狀態欄」和「應用程序欄」各自位於具備「電源」和「啓動」按鈕的屏幕的一側。橫向左視圖的「狀態欄」在左側，橫向右視圖的「狀態欄」在右側。

應用的默認方向爲縱向，而且您必須添加附加代碼以支持橫向。您不能只指定向左橫向或向右橫向方向。若是要支持橫向方向，您必須同時支持向左和向右兩個方向。要指定應用支持縱向和橫向，您必須在 XAML 或代碼中將SupportedOrientations屬性設置爲PortraitOrLandscape。

可使用不一樣的方法，以縱向或橫向方向顯示內容。其中兩種方法是滾動和網格佈局。

1.  滾動

滾動方法使用放置在ScrollViewer控件內的StackPanel控件。若是要顯示列表中的內容或者若是您在頁面上擁有一個接着一個顯示的不一樣控件，請使用此方法。StackPanel容許您在應用中一個接一個地對子元素進行排序，且當您從縱向切換到橫向時，若是屏幕上容納不下 UI 元素，ScrollViewer控件容許您滾動瀏覽StackPanel。

要使用滾動方法，一般您會執行如下步驟。

● 將頁面的SupportedOrientations屬性更改成PortraitOrLandscape。

● 將「內容面板」區域中的默認Grid替換爲ScrollViewer和StackPanel。

2.  網格佈局

網格佈局方法將 UI 元素放置在Grid中。當發生方向更改時，您能夠採用編程方式從新將元素放置在Grid的不一樣單元格中。

要使用網格佈局方法，一般您會執行如下步驟。

1. 將頁面的SupportedOrientations屬性更改成PortraitOrLandscape。

2. 將Grid用於內容面板。

3. 建立一個OrientationChanged事件處理程序並添加代碼以從新將元素放置在Grid中。

Android中屏幕方向改變處理

Android支持縱向和橫向兩種屏幕方向，默認爲縱向。當屏幕方向發生變化時，全部用戶界面上的東西都須要進行更新，以適應新的屏幕方向。由於 Activity 是與用戶交互的最主要的機制，它包含了處理配置改變的專門支持。除非你特殊指定，不然當屏幕方向發生改變時，你當前的 activity 都將被銷燬，這銷燬是經過一個正常的 activity 生命週期過程（ onFreeze(Bundle) , onPause() , onStop() , 和onDestroy() ）進行的。若是 activity 以前正在前景畫面，當這個實例的 onDestroy() 調用完成後將會啓動這個 activity 的一個新的實例，並將前面那個實例中 onFreeze(Bundle) 所保存的內容傳遞給新的實例。由於任何的應用資源（包括layout 文件）都有可能因爲任何配置值而改變。所以處理配置改變的惟一安全的方法就是從新獲取全部的資源，包括layout 、繪圖資源（原文 drawables ）、字符串資源。因爲 activity 已經如何保存本身的狀態並從這些狀態中重建自身，因此 activity從新啓動自身來得到新的配置將是一個很是便利的途徑。

IOS屏幕方向

IOS支持Portrait、PortraitUpsideDown、LandscapeLeft、LandscapeRight四種屏幕方向。利用UIViewController控制屏幕旋轉，經過依次調用ViewController的willRotateToInterfaceOrientation:duration、viewWillLayoutSubviews、willAnimateRotationToInterfaceOrientation:duration、didRotateFromInterfaceOrientation方法實現。

更多相關內容參見IOS屏幕旋轉

分辨率

Windows Phone 8支持具備WVGA、WXGA 和 720p 分辨率的手機。這與僅支持 WVGA 分辨率的 Windows Phone OS 7.1 不一樣。本主題將介紹 Windows Phone 8 支持的分辨率，以及如何使用不一樣的分辨率開發面向手機的應用。

Windows Phone

下表描述了Windows Phone 8 中支持的分辨率和縱橫比。

下圖所示爲同一屏幕顯示在具備不一樣分辨率的手機中。

因爲全部 Windows PhoneOS 7.1 手機均具備相同的分辨率，您能夠佈局內容以使之在 Windows PhoneOS 7.1 手機上顯示良好，並肯定它將在全部 Windows PhoneOS 7.1 手機上顯示良好。您無需考慮每一個控件如何伸展和流動等內部問題。

在Windows Phone 8 中，您須要佈局控件和其餘 UI 元素，以使之在每種支持的縱橫比中顯示良好。由於 Windows Phone 8 手機具備兩種縱橫比（15:9 或 16:9），針對一種縱橫比佈局的控件可能在另外一種縱橫比下出現意外佈局。

若要使頁面能在分辨率爲 WVGA、WXGA 、720p和1080p 的手機上正確顯示，則不要硬編碼控件的長和寬或邊距。從工具箱中拖放控件後，請刪除或仔細測試自動添加的邊距。

若要建立可適應佈局，您可使用像網格控件之類的容器。不是對控件的高和寬進行硬編碼，而是將控件放置在網格中，並使用*和Auto值設置其行和列的高和寬。如此一來，應用能夠拉伸或縮放控件以使之適合用戶手機的高和寬。若是您對控件的高和寬進行硬編碼，佈局不適應其餘分辨率。

若要顯示全部分辨率的初始屏幕，則使用分辨率爲768 × 1280 的名爲SplashScreenImage.jpg 的單個圖像文件。手機會自動將圖像縮放至適當大小。

若是想要提供各類像素的像素完美的初始屏幕，可使用如下文件名添加圖像：

●SplashScreenImage.Screen-WVGA.jpg

●SplashScreenImage.Screen-WXGA.jpg

●SplashScreenImage.Screen-720p.jpg

1080p將自動使用SplashScreenImage.Screen-720p.jpg文件顯示初始屏幕

全部初始屏幕圖像必須包含在應用項目的根文件夾中。

Android

1.5及更早版本的Android系統，在設計的時候假定系統只會運行在一種分辨率的設備上——HVGA（320×480）分辨率，尺寸爲3.2寸。因爲系統只能工做在一種屏幕上，開發人員就能夠針對那個屏幕來編寫本身的程序，而無需去考慮程序在其餘屏幕上的顯示問題。
但自從 Android 1.6以來，系統引入了對多種尺寸、多種分辨率屏幕的支持，以此知足擁有各類配置的新平臺的運行需求。這就意味着開發人員在針對Android 1.6或更新版系統開發程序的時候，須要爲本身的程序在多種分辨率的屏幕上良好顯示做出額外的設計。
爲了簡化程序員面在對各類分辨率時的困擾，也爲了具有各類分辨率的平臺均可以直接運行這些程序， Android平臺將全部的屏幕以密度和分辨率爲分類方式，各自分紅了三類：

三種主要的尺寸：大，正常，小；
三種不一樣的密度：高（ hdpi），中（mdpi）和低（ldpi）。

若是須要的話，程序能夠爲各類尺寸的屏幕提供不一樣的資源（主要是佈局），也能夠爲各類密度的屏幕提供不一樣的資源（主要是位圖）。除此之外，程序不須要針對屏幕的尺寸或者密度做出任何額外的處理。在執行的時候，平臺會根據屏幕自己的尺寸與密度特性，自動載入對應的資源，並把它們從邏輯像素（DIP，用於定義界面佈局）轉換成屏幕上的物理像素。

IOS

iOS設備的碎片化問題顯然被控制得很好，這大大減小了遊戲開發者的重複勞動。目前，iOS 設備的分辨率有：

iPhone 1、3G、3GS，iPod Touch 一、二、3：320*480（普通屏）

iPhone 4、4S，iPod Touch 4：640*960（3：2 Retina屏）

iPhone 5，iPod Touch 5：640*1136（16：9 Retina屏）

iPad 1，iPad2，iPad mini：768*1024（普通屏）

New iPad，iPad 4：1536*2048（Retina屏）