布局指在 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官方的文档中也注明其已经过期,所以一般情况下都不再使用该种布局方式。

动态布局

在动态布局中,用户界面会根据不同的屏幕分辨率正确显示。通过指定子元素相对于其父元素应该如何排列以及应该如何换行来排列子元素。例如,您可以在面板上排列控件并指定它们应水平换行。若要使用自动或成比例调整大小,则必须向HeightWidth属性分配特殊的值。以下是针对动态布局的建议设置:

● 将控件或布局的高度和宽度设置为 Auto。当这些值用于Grid布局中的控件时,控件填充其所在的单元格。控件以及GridStackPanel布局支持自动调整大小。

● 对于包含文本的控件,移除HeightWidth属性,设置MinWidthMinHeight属性。这可以防止文本缩小至不可读的大小。

● 若要在Grid布局中,为RowDefinitionColumnDefinition元素设置成比例值,则使用相对的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 支持以下屏幕方向:

● 纵向

● 向左横向

● 向右横向

用户可以通过旋转设备轻松启动从一个方向到另一个方向的更改。在模拟器中测试您的应用时,您可以通过单击模拟器工具栏中的按钮,切换屏幕方向。方向按钮包含带箭头的矩形,它们指示方向的更改。

Screen Orientation - Emulator

在纵向方向中,页面按垂直方向显示,以使页面的高度要大于其宽度。

在两种横向方向的任一方向中,“状态栏”“应用程序栏”各自位于具有“电源”“启动”按钮的屏幕的一侧。横向左视图的“状态栏”在左侧,横向右视图的“状态栏”在右侧。

应用的默认方向为纵向,并且您必须添加附加代码以支持横向。您不能只指定向左横向或向右横向方向。如果要支持横向方向,您必须同时支持向左和向右两个方向。要指定应用支持纵向和横向,您必须在 XAML 或代码中将SupportedOrientations属性设置为PortraitOrLandscape

可以使用不同的方法,以纵向或横向方向显示内容。其中两种方法是滚动和网格布局。

1.  滚动

滚动方法使用放置在ScrollViewer控件内的StackPanel控件。如果要显示列表中的内容或者如果您在页面上拥有一个接着一个显示的不同控件,请使用此方法。StackPanel允许您在应用中一个接一个地对子元素进行排序,且当您从纵向切换到横向时,如果屏幕上容纳不下 UI 元素,ScrollViewer控件允许您滚动浏览StackPanel

要使用滚动方法,通常您会执行以下步骤。

● 将页面的SupportedOrientations属性更改为PortraitOrLandscape

● 将“内容面板”区域中的默认Grid替换为ScrollViewerStackPanel

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:durationviewWillLayoutSubviewswillAnimateRotationToInterfaceOrientation:durationdidRotateFromInterfaceOrientation方法实现。

更多相关内容参见IOS屏幕旋转

分辨率

Windows Phone 8支持具有WVGA、WXGA 和 720p 分辨率的手机。这与仅支持 WVGA 分辨率的 Windows Phone OS 7.1 不同。本主题将介绍 Windows Phone 8 支持的分辨率,以及如何使用不同的分辨率开发面向手机的应用。

Windows Phone

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

http://static.oschina.net/uploads/img/201312/24151230_ZuN3.png

下图所示为同一屏幕显示在具有不同分辨率的手机中。

http://static.oschina.net/uploads/img/201312/24151231_ZZlB.png

由于所有 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 1、2、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屏)