iOS development 7: automatic rotation and resizing
Apple's products iPad and iPhone both support automatic rotation, so the program we wrote also supports two views: portrait and landscape.
By default, the programs we write are vertical, just like in the previous examples. If you run the program written before, when you rotate the emulator, you will find that it is very unfriendly, and some controls are invisible. At this time, automatic rotation becomes necessary.
1. Let's not talk about how to realize automatic rotation, first talk about how to let the program know which kinds of rotation it supports.
Run Xcode 4.2, create a new Single View Application, the program name is RotateTest, and other settings are as follows:
After the project is created, the first page opened contains the following views:
We can set what kind of rotation the program supports here, just select that button. As can be seen from the above figure, by default, the iPhone program does not support reverse rotation, because if the view is reversed and a call comes suddenly at this time, it will be very inconvenient because the page is still reversed. However, if you create an iPad program, you will find that the four buttons in the picture above are all selected, that is, the iPad program supports all rotations by default.
Note that if multiple View Controllers are created for the program, each View Controller must be able to set the supported rotation. However, the value set by the newly created View Controller must be a subset of the main View Controller.
In fact, when we modify the button in the above picture, what we actually modify is the plist file of our program. In this project, it is the RotateTest-Info.plist file. As shown in the figure below, expand this file. The bottom shows the supported rotation. :
The above is a method of setting support selection. We can also set the supported rotation in the code. Open ViewController.m and find the shouldAutorotateToInterfaceOrientation method. The complete code is as follows:
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
// Return YES for supported orientations
return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}
The above code shows that inversion (UIInterfaceOrientationPortraitUpsideDown) is not supported.
Four variables representing directions are defined in iOS:
UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight
If iOS is set to rotate, the program will call this direction. If it returns YES, it will rotate the view, otherwise it will not rotate. If you have created an iPad app, this method is simply to return YES.
2. Now that we have let the program know what rotation is supported, let's talk about how to implement it.
There are three ways to achieve automatic rotation in iOS.
(1) The easiest way is to use the Size Inpector in Xcode:
(2) Override the willAnimateRotationToInterfaceOrientation method in ViewController.m corresponding to the View, and reset the size and position of the control in this method.
(3) Create a new view, so we have two views, one vertical and one horizontal. After designing these two views, when rotating, call the corresponding view according to the rotation direction.
3、以下是这三个方法的简单使用。
3.1 使用Size Inpector实现自动旋转：
① 单击ViewController.xib，在打开的视图区域拖放两个Button在上面，分别命名为“按钮上”和“按钮下”，页面布局如下图：
图中两个按钮在水平方向上是居中放置的。
② 运行程序，并将模拟器旋转，对比一下旋转前后的效果：
旋转之后，“按钮下”不见了。不过，“按钮上”的坐标和大小其实是没变的。
我现在想实现旋转之后两个按钮还是水平方向居中，并且还是一个在顶端、一个在底端。为实现这个，我要做以下工作：
③ 在View中选中“按钮上”，打开Size Inspector，把左边的红实线改成虚线：
④ 在View中选中“按钮下”，打开Size Inspector，把左边和上边的红实线改成虚线，下边的红虚线改成实线：
外围的红实线表示距离不变，例如上图右中下方的红实线就表示对应的控件与下方的距离不变，而其他方向会自动调整。现在运行一下并旋转模拟器，看看效果：
3.2 重写willAnimateRotationToInterfaceOrientation方法，重新设置控件的大小与位置
① 首先先给这两个按钮添加Outlet映射到ViewController.h，名称分别是button_1和button_2：
② 在ViewController.m中的@end之前添加以下代码：
- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval) duration {
if (UIInterfaceOrientationIsPortrait(toInterfaceOrientation)) {
button_1.frame = CGRectMake(124, 20, 72, 37);
button_2.frame = CGRectMake(124, 403, 72, 37);
} else {
button_1.frame = CGRectMake(20, 131, 72, 37);
button_2.frame = CGRectMake(388, 131, 72, 37);
}
}
③ 运行，看看效果：
3.3 创建新视图，旋转时切换视图：
① 我们先创建原始视图的副本，但是还是在原来的ViewController中。单击ViewController.xib，打开IB，在左边的三个图标中 选中View图标，如果用的是Mac Book，那么按住Control键，如果是虚拟机，请按住Alt键。按住后按住鼠标左键，往下拖，鼠标会变成绿色的加号。注意新视图跟原始图是并列的， 所以你要往正确的方向拖，然后松开鼠标，这样就创建了原来视图的副本：
② 调整新视图为横向（Landscape）：
选中新视图，打开Attribute Inspector，在Orientation中选择Landscape：
③ 调整新视图中的按钮的位置，你可以按照自己的喜好设置，这里设置成如下所示：
④ 下面，我们为这两个View建立Outlet映射，注意是View，而不是View上的控件。建立映射的方法都是一样，两个名称分别是portrait和landscape：
⑤ 单击ViewController.m，在@implementation那行代码的下一行添加以下语句：
#define degreesToRadians(x) (M_PI*(x)/180.0)
⑥ 修改willAnimateRotationToInterfaceOrientation方法，如下：
- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration {
if (toInterfaceOrientation == UIInterfaceOrientationPortrait) {
self.view = self.portrait;
self.view.transform = CGAffineTransformIdentity;
self.view.transform = CGAffineTransformMakeRotation(degreesToRadians(0));
self.view.bounds = CGRectMake(0.0, 0.0, 320.0, 460.0);
} else if(toInterfaceOrientation == UIInterfaceOrientationLandscapeLeft) {
self.view = self.landscape;
self.view.transform = CGAffineTransformIdentity;
self.view.transform = CGAffineTransformMakeRotation(degreesToRadians(-90));
self.view.bounds = CGRectMake(0.0, 0.0, 480.0, 300.0);
} else if(toInterfaceOrientation == UIInterfaceOrientationLandscapeRight) {
self.view = self.landscape;
self.view.transform = CGAffineTransformIdentity;
self.view.transform = CGAffineTransformMakeRotation(degreesToRadians(90));
self.view.bounds = CGRectMake(0.0, 0.0, 480.0, 300.0);
}
}
⑦ 运行，查看效果：
4、小结
这次讲了实现自动旋转调整大小的三种方法，第一种只要点点鼠标，很简单，但不适合复杂的视图；第二种要重新设置控件的大小和位置，代码量会比较大；第三种是创建两种视图，旋转时调用不同的视图，比较适合复杂的视图。