方向改变时将图像在同一位置旋转 90 度 [英] Rotating an image 90 degrees on same position when orientation changes

问题描述

最终这样做了:支持多方向的最简单方法?当应用程序处于横向模式时，如何加载自定义 NIB? 非常棒！

Ended up with doing this: Easiest way to support multiple orientations? How do I load a custom NIB when the application is in Landscape? Works superb!

我在 Photoshop 中制作了一张图像，我想将其用作 iPad 应用程序中信息屏幕的背景.该图像还包含文本和一些图标.在图像周围我有一个绿色的边框.

I have made an image in Photoshop which I want to use as background for my info-screen in my iPad application. The image contains text and some icons also. Around the image I have a border which is green.

我想要达到的效果是:

当用户从纵向转到横向时，我希望图像(仅框架和图标)旋转 90 度，以便图像以横向模式显示，而不是在横向模式下获得框架的纵向视图.文本和图标是解耦的(我在不同的 UIImageView 中组织了不同的层)它们应该旋转 90 度.

When the user goes from the portrait orientation to landscape orientation I want the image (just the frame and the icons) to rotate 90 degrees so the image appear in landscape mode, instead of having a portrait view of the frame in landscape. The text and icons are decoupled (different layers which I have organized in different UIImageView's)they shall rotate 90 degrees.

我已经做的如下:

用这个方法试验了一下:

Experimented a bit with this method:

- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation duration:

并尝试这样做:

self.btnFacebook.transform = CGAffineTransformMakeRotation(1.5707964);

我认为它将 btnFacebook 属性向右旋转 90 度(如果我错了，请纠正我)，因为它指定了正弧度.我似乎无法让它正常工作.这不应该将按钮围绕框架中的中心坐标旋转 90 度吗?那不会导致按钮位置发生变化(按钮是方形的)?

which I think will rotate the btnFacebook property 90 degrees to the right (correct me if I am wrong) since it specifies positive radians. I can't seem to get it to work correctly though. Should'nt this rotate the button 90 degrees around its center coordinate in the frame? That wouldn't cause a change in the position of the button (the button is square)?

制作图片:

由于图像显示图像背景(其上的一些自定义图形在两个方向上看起来都不错)从纵向变为横向并旋转，因此它不会在横向中显示为纵向，因此图标与背景分离，因此它们需要也可以旋转，因为它们需要处于正确的方向(它是社交图标).然而文本在同一个位置，它只旋转 90 度而不重新定位.

As the image shows the image background (some custom graphics on it which looks good in both orientations) goes from portrait to landscape and rotates so it does not appear as portrait in landscape, the icons are decoupled from the background so they need to rotate as well because they need to be in the right orientation (it is social icons). The text however are on the same position, it only rotates 90 degrees without repositioning.

推荐答案

我理解你的问题，因为你试图不旋转整个界面，而是单独旋转紫色和红色方块.

I understand your question as that you are trying to not to rotate the interface as whole but to rotate the purple and red squares individually.

我创建了一个类似于您的布局的 UIViewController.

I created a UIViewController that resembles your layout.

黑色方块是 UIView，白色方块只是为了让我知道黑色视图何时旋转.此视图连接到控制器上的 view1 属性.

The black square is a UIView and the white square is there only so that I can tell when the black view rotates. This view is wired to view1 property on the controller.

有 4 个按钮连接到 btnx(x 运行 1 到 4)属性.

There are 4 buttons that are wired to btnx (x runs 1 through 4) properties.

由于我不再想自动旋转界面，我只支持纵向.

Since I no longer want to auto rotate the interface I only support the portrait orientation.

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

为了手动进行旋转，我向 ViewController 添加了一个方法.它确定将组件从纵向旋转到当前方向所需的角度，创建旋转变换并将其应用于所有出口.

To do the rotation manually, I added a method to the ViewController. It determines the angle it needs to rotate the components from portrait to current orientation, creates a rotation transform and applies it to all outlets.

- (void)deviceDidRotate:(NSNotification *)notification
{
    UIDeviceOrientation currentOrientation = [[UIDevice currentDevice] orientation];
    double rotation = 0;
    UIInterfaceOrientation statusBarOrientation;
    switch (currentOrientation) {
        case UIDeviceOrientationFaceDown:
        case UIDeviceOrientationFaceUp:
        case UIDeviceOrientationUnknown:
            return;
        case UIDeviceOrientationPortrait:
            rotation = 0;
            statusBarOrientation = UIInterfaceOrientationPortrait;
            break;
        case UIDeviceOrientationPortraitUpsideDown:   
            rotation = -M_PI;
            statusBarOrientation = UIInterfaceOrientationPortraitUpsideDown;
            break;     
        case UIDeviceOrientationLandscapeLeft:     
            rotation = M_PI_2;   
            statusBarOrientation = UIInterfaceOrientationLandscapeRight;
            break;  
        case UIDeviceOrientationLandscapeRight:    
            rotation = -M_PI_2;
            statusBarOrientation = UIInterfaceOrientationLandscapeLeft;
            break;
    }
    CGAffineTransform transform = CGAffineTransformMakeRotation(rotation);
    [UIView animateWithDuration:0.4 delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
        [self.btn1 setTransform:transform];
        [self.btn2 setTransform:transform];
        [self.btn3 setTransform:transform];
        [self.btn4 setTransform:transform];
        [self.view1 setTransform:transform];
        [[UIApplication sharedApplication] setStatusBarOrientation:statusBarOrientation];
    } completion:nil];
}

最后要做的是让操作系统调用我的方法.为了实现这一点，我在 AppDelegate 中的 application:didFinishLaunchingWithOptions: 中添加了以下代码.

The last thing to do is to get the OS to call my method. To achieve that I added the following code to application:didFinishLaunchingWithOptions: in the AppDelegate.

[[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];
[[NSNotificationCenter defaultCenter] addObserver:self.viewController selector:@selector(deviceDidRotate:) name:UIDeviceOrientationDidChangeNotification object:nil];

我不确定这是否正是您想要的，但我相信它至少是相似的，因此您可以从中获得一些想法来解决您的问题.我可以为我创建的一个工作 iPad 应用程序提供源代码来说明这一点.

I am not sure whether this is exactly what you wanted but I believe it is at least similar so you can get some ideas from it how to solve your problem. I can provide source code for a working iPad application that I created to illustrate this.

这篇关于方向改变时将图像在同一位置旋转 90 度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！