no19 界面旋转和大小处理.pptVIP

* * * * * * * * * * * * * * * * * * * * * 界面旋转和大小处理 移动应用开发教研室 * 界面旋转 界面大小 旋转时调整控件的框架 旋转时切换视图 1 主要内容 * * 界面旋转和大小处理 苹果的产品iPad和iPhone都是支持自动旋转的，我们写的程序也要支持两种视图：纵向和横向。 默认应用程序都是纵向的，如果把模拟器旋转，会发现很不友好，有的控件看不见了。这个时候，自动旋转就显得很有必要了。 * * 可旋转和调整大小的界面 1 启用界面旋转 可以在代码中设定所支持的旋转。打开ViewController.m，找到shouldAutorotateToInterfaceOrientation方法 　　iOS中定义了四个表示方向的变量： UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight * * 可旋转和调整大小的界面 2 设计界面 Xcode提供了描述界面在设备旋转时如何反应的工具，可在设备旋转时相应地调整其位置和大小。 自动旋转和自动调整大小 * * 可旋转和调整大小的界面 2 设计界面 使用Size Inpector实现自动旋转： ① 单击ViewController.xib，在打开的视图区域拖放两个Button在上面，分别命名为“按钮上”和“按钮下”，页面布局如下图： 自动旋转和自动调整大小 * * 可旋转和调整大小的界面 2 设计界面 使用Size Inpector实现自动旋转： ② 运行程序，并将模拟器旋转，对比一下旋转前后的效果： 自动旋转和自动调整大小 * * 可旋转和调整大小的界面 2 设计界面 使用Size Inpector实现自动旋转： ③ 在View中选中“按钮上”，打开Size Inspector，把左边的红实线改成虚线： 自动旋转和自动调整大小 * * 可旋转和调整大小的界面 2 设计界面 使用Size Inpector实现自动旋转： ④ 在View中选中“按钮下”，打开Size Inspector，把左边和上边的红实线改成虚线，下边的红虚线改成实线： 自动旋转和自动调整大小 * * 可旋转和调整大小的界面 2 设计界面 使用外围的红实线表示距离不变，例如上图右中下方的红实线就表示对应的控件与下方的距离不变，而其他方向会自动调整。现在运行一下并旋转模拟器，看看效果： 自动旋转和自动调整大小 * * 可旋转和调整大小的界面 2 设计界面 每个UI元素都由屏幕上的一个矩形区域定义，通过重新定义视图中的每个UI元素的框架，可以全面控制他们的位置和大小。 调整框架 * * 可旋转和调整大小的界面 2 设计界面 为让视图适合不同朝向，有效的方法是给横向和纵向模式提供不同的视图。当用户旋转手机，当前视图替换为另一个视图。 　　可在视图控制器中实现方法，该方法在改变朝向前被调用。 villRotateToInterfaceOrientation:toInterfaceOrientation:duration: 切换视图 * * 可旋转和调整大小的界面 2 设计界面 ① 我们先创建原始视图的副本，但是还是在原来的ViewController中。单击ViewController.xib，打开IB，在左边的三个图标中选中View图标，如果用的是Mac Book，那么按住Control键，如果是虚拟机，请按住Alt键。按住后按住鼠标左键，往下拖，鼠标会变成绿色的加号。注意新视图跟原始图是并列的，所以你要往正确的方向拖，然后松开鼠标，这样就创建了原来视图的副本： 切换视图 * * 可旋转和调整大小的界面 2 设计界面 ② 调整新视图为横向（Landscape）： 选中新视图，打开Attribute Inspector，在Orientation中选择Landscape： 切换视图 * * 可旋转和调整大小的界面 2 设计界面 ③ 调整新视图中的按钮的位置，你可以按照自己的喜好设置，这里设置成如下所示： 切换视图 * * 可旋转和调整大小的界面 2 设计界面 ④ 为这两个View建立Outlet映射，注意是View，而不是View上的控件。建立映射的方法都是一样，两个名称分别是portrait和landscape： 切换视图 * * 可旋转和调整大小的界面 2 设计界面