如何让 UIImagePicker 相机的自定义叠加在 iOS 7 中全屏显示? [英] How to get the custom overlay for UIImagePicker camera to be full screen in iOS 7?

问题描述

我有兴趣为 UIImagePickerController 使用自定义叠加层，用于拍摄整个屏幕的相机控件，这与切换到视频功能时默认相机应用程序所做的非常相似.

I am interested in using a custom overlay for the UIImagePickerController for camera controls that take the entire screen, very similar to what the default Camera app does when switched to the video function.

我在这里引用了几个关于这个主题的问题，特别是这个一个，如以及关于如何使用UIImagePickerController 的自定义叠加层，但它们都无法在 iOS 7 中产生成功的全屏结果.

I have referenced several questions here on SO on this topic, particularly this one, as well as the Apple example on how to use a custom overlay for the UIImagePickerController, but none of them have been able to produce a successful, full-screen result with iOS 7.

到目前为止，这是带有自定义叠加层(没有任何按钮)的相机 UI 的样子:

So far, this is what the camera UI looks like with the custom overlay (without any buttons):

请注意，屏幕底部有一个黑条.我注意到，如果我将 cameraAspectRatio 更改为 1，我可以移除黑条，但这会扭曲相机变焦，因为它的视野非常大.有没有办法在不过度扭曲缩放的情况下全屏显示(我知道需要一点点)，并且还删除黑条?

Note that there is a black bar in the bottom of the screen. I noticed that I could get the black bar removed if I change the cameraAspectRatio to 1, but this distorts the camera zoom as it then has a very zoomed in view. Is there a way to have full screen without either distorting the zoom too much (I understand that a small bit is necessary), and also remove the black bar?

这是我配置自定义叠加层的代码:

Here is my code that configures the custom overlay:

{
        self.imagePickerController.showsCameraControls = NO;

        [[NSBundle mainBundle] loadNibNamed:@"overlayView" owner:self options:nil];
        self.overlayView.frame = self.imagePickerController.cameraOverlayView.frame;
        self.imagePickerController.cameraOverlayView = self.overlayView;
        self.overlayView = nil;

        // Device's screen size (ignoring rotation intentionally):
        CGSize screenSize = [[UIScreen mainScreen] bounds].size;


        float cameraAspectRatio = 4.0 / 3.0; //! Note: 4.0 and 4.0 works
        float imageWidth = floorf(screenSize.width * cameraAspectRatio);
        float scale = ceilf((screenSize.height / imageWidth) * 10.0) / 10.0;

        self.imagePickerController.cameraViewTransform = CGAffineTransformMakeScale(scale, scale);

    }

更新:

我注意到的另一个问题是，在相机预览中显示的图片总是小，并且比使用 [self.imagePickerController takePicture 方法时保存的图片具有更少的细节].举例说明:

An additional issue that I noticed is, the picture that is shown in camera preview is always smaller and has less details than the picture that is saved when the method [self.imagePickerController takePicture]. To illustrate:

这是键盘在相机预览中的样子，下面有黑条(抱歉有点摇晃):

This is what the keyboard looks like in the camera preview with the black bar below (sorry its a bit shaky):

但是，请注意预览面板中实际捕获的图像具有更多细节，如下所示，尤其是顶部以及左右两侧.

However, note that the actual captured image in the preview panel has a lot more details as shown here, especially towards the top, as well as both left and right.

我的问题是，如何能够设置我的相机预览，以便用户在预览中看到的正是它将捕获的图像，然后可以向他们显示?谢谢！

My question is, how would be able to set my camera preview so that what the user sees in preview is exactly the image that it will capture and could be shown to them afterwards? Thanks!

更新 2

这是 viewDidLoad 中设置相机控件的完整代码.

Here is the entire code in viewDidLoad that sets up the camera controls.

- (void)viewDidLoad
{
    [super viewDidLoad];

    //Appearance configuration
    self.navigationItem.hidesBackButton = YES;

    //UIImagePickerController initialization and setup
    self.imagePickerController = [[UIImagePickerController alloc] init];
    self.imagePickerController.delegate = self;
    self.imagePickerController.allowsEditing = NO;
    if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]){
        self.imagePickerController.sourceType = UIImagePickerControllerSourceTypeCamera; //if there is a camera avaliable
    } else {
        self.imagePickerController.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;//otherwise go to the folder
    }
    self.imagePickerController.mediaTypes = [[NSArray alloc] initWithObjects: (NSString *) kUTTypeImage, nil];
    if (self.imagePickerController.sourceType == UIImagePickerControllerSourceTypeCamera)
    {
        self.imagePickerController.showsCameraControls = NO;

        [[NSBundle mainBundle] loadNibNamed:@"overlayView" owner:self options:nil];
        self.overlayView.frame = self.imagePickerController.cameraOverlayView.frame;
        self.imagePickerController.cameraOverlayView = self.overlayView;
        self.overlayView = nil;

        // Device's screen size (ignoring rotation intentionally):
        CGSize screenSize = [[UIScreen mainScreen] bounds].size;

        int heightOffset = 0;

        if(SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(@"7.0"))
        {
            heightOffset = 120; //whole screen :)
        }

        float cameraAspectRatio = 4.0 / 3.0; //! Note: 4.0 and 4.0 works
        float imageWidth = floorf(screenSize.width * cameraAspectRatio);
        float scale = ceilf(((screenSize.height + heightOffset) / imageWidth) * 10.0) / 10.0;

        self.imagePickerController.cameraViewTransform = CGAffineTransformMakeScale(scale, scale);

    }
}

在 viewWillAppear 中，我调用图像选择器视图:

And in viewWillAppear, I call the image picker view:

BOOL modalPresent = (BOOL)(self.presentedViewController);
    //Present the Camera UIImagePicker if no image is taken
    if (!appDelegate.imageStorageDictionary[@"picture1"]){
        if (modalPresent == NO){ //checks if the UIImagePickerController is modally active
            [self presentViewController:self.imagePickerController animated:NO completion:nil];
        }
    }

推荐答案

经过多次尝试，这对我有用，非常感谢其他人的建议.了解和牢记以下事实非常有帮助:

After many attempts, this is what worked for me with many thanks to other people's suggestions. The following facts were very helpful to know and keep in mind:

相机的点分辨率为426 * 320.为了将相机预览的高度拉伸到手机屏幕高度 568，使用 CGAffineTransformScale 时需要乘以 1.3333 的系数.

The camera's points resolution is 426 * 320. In order for the camera preview's height to be stretched to the phone's screen height of 568, it needs to be multiplied by a factor of 1.3333 when using CGAffineTransformScale.

请注意，以下内容是根据 iPhone 5 的屏幕分辨率(以点为单位)使用各种数字硬编码的.可以通过使用诸如 screen.height、screen.width 和其他变量之类的对象来改进它们，使其也适用于 iPhone 4/4s 尺寸.

Note that the below are hard coded with various numbers based on the iPhone 5's screen resolution in points. They could be improved by using such objects such as screen.height, screen.width and other variables to make it applicable to iPhone 4/4s dimensions as well.

    self.imagePickerController.showsCameraControls = NO;

    [[NSBundle mainBundle] loadNibNamed:@"overlayView" owner:self options:nil];
    self.overlayView.frame = self.imagePickerController.cameraOverlayView.frame;
    self.imagePickerController.cameraOverlayView = self.overlayView;
    self.overlayView = nil;

    //For iphone 5+
    //Camera is 426 * 320. Screen height is 568.  Multiply by 1.333 in 5 inch to fill vertical
    CGAffineTransform translate = CGAffineTransformMakeTranslation(0.0, 71.0); //This slots the preview exactly in the middle of the screen by moving it down 71 points
    self.imagePickerController.cameraViewTransform = translate;

    CGAffineTransform scale = CGAffineTransformScale(translate, 1.333333, 1.333333);
    self.imagePickerController.cameraViewTransform = scale;

这篇关于如何让 UIImagePicker 相机的自定义叠加在 iOS 7 中全屏显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！