How to Get the Custom Overlay for Uiimagepicker Camera to Be Full Screen in iOS 7

How to get the custom overlay for UIImagePicker camera to be full screen in iOS 7?

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:

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.

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;

Positioning a UIImagePickerController cameraOverlayView on top of the camera preview

Maybe not the best solution. Using view debugger you can inspect the view hierarchy. Now add the view into the child camera view port controller

imagePicker = CustomPicker()
imagePicker.sourceType = .camera
present(imagePicker, animated: true, completion: nil)

class CustomPicker: UIImagePickerController {
    let overlay = UIView()
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        if let camController = children.first?.children.first?.children.first, overlay.superview == nil {
            overlay.backgroundColor = UIColor(white: 1, alpha: 0.5)
            camController.view.addSubview(overlay)
            overlay.addPinConstraints(top: 0, left: 0, bottom: 0, right: 0)
        }
    }
}

extension UIView {
    func addPinConstraints(top: CGFloat? = nil, left: CGFloat? = nil, bottom: CGFloat? = nil, right: CGFloat? = nil) {
        guard let parent = superview else { return }
        translatesAutoresizingMaskIntoConstraints = false
        if let left = left {
            leadingAnchor.constraint(equalTo: parent.leadingAnchor, constant: left).isActive = true
        }
        if let right = right {
            trailingAnchor.constraint(equalTo: parent.trailingAnchor, constant: -right).isActive = true
        }
        if let top = top {
            topAnchor.constraint(equalTo: parent.topAnchor, constant: top).isActive = true
        }
        if let bottom = bottom {
            bottomAnchor.constraint(equalTo: parent.bottomAnchor, constant: -bottom).isActive = true
        }
    }
}

Screenshot of the view inspector,
here child -> child -> child is the camera view port

UIImagePickerController doesn't fill screen

The camera's aspect ratio is 4:3 and the screen's aspect ratio is 3:2. So there is simply no way for the camera picture to fill the screen unless you're willing to crop is to 3:2. To do that, apply an appropriate scale transform.

UIImagePickerController.frame is not full screen

The iPhone's camera has a 4:3 aspect ratio whereas the iPhone's screen's aspect ratio is 3:2. Therefore, the live camera picture does not cover the entire screen. If you want to get rid of the black bars, you have to apply a small scaling transform (e.g. 110%) to the camera view.

Camera photo mode fullscreen on iOS7

Apply proper CGAffineTransform transformation in order to set camera mode.

Try out the following link this may help you:

here

---

Related Topics