Auto Layout in camera overlay view - can't center button vertically

Question

I am trying to add an overlay to camera. To do that, I've created the following event method:

- (IBAction)takePhoto:(id)sender {
UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init];

if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]){
    [imagePicker setSourceType:UIImagePickerControllerSourceTypeCamera];
    imagePicker.showsCameraControls = NO;
    imagePicker.navigationBarHidden = YES;
    imagePicker.toolbarHidden = YES;
    imagePicker.wantsFullScreenLayout = YES;

    // Overlay
    // Insert the overlay

    self.overlay = [[OverlayViewController alloc] initWithNibName:@"OverlayView" bundle:nil];
    //[self.overlay.view setTranslatesAutoresizingMaskIntoConstraints:NO];
    self.overlay.pickerReference = imagePicker;
    imagePicker.cameraOverlayView = self.overlay.view;
    imagePicker.delegate = self.overlay;

    [self presentViewController:imagePicker animated:NO completion:nil];
} else{
    [imagePicker setSourceType:UIImagePickerControllerSourceTypePhotoLibrary];
    [imagePicker setDelegate:self];
    [self presentViewController:imagePicker animated:YES completion:nil];
}
}

The button is centered in a view like this.

Xcode - OverlayView

But when used, it appears like this on iPhone 4. It is not centered vertically. If I try it to pin button Slikaj on the bottom, it is not visible because iPhone 4 screen size is smaller than iPhone 5. The use auto layout checkbox is checked (turned on). What am I doing wrong?

Camera overlay on iPhone 4

Hey, have you got a solution to this problem please? – Pavan Dec 25 '14 at 08:14 — Pavan, Dec 25 '14 at 08:14

score 3 · Answer 1 · answered Jun 25 '15 at 20:21

Your overlay view has for some reason another frame dimensions. You can fix it by assigning imagePicker frame dimensions to your overlay view.

self.overlay = [[OverlayViewController alloc] initWithNibName:@"OverlayView" bundle:nil];

self.overlay.pickerReference = imagePicker;
self.overlay.frame = imagePicker.cameraOverlayView.frame;
imagePicker.cameraOverlayView = self.overlay.view;
imagePicker.delegate = self.overlay;

score 0 · Answer 2 · answered Jul 15 '20 at 19:50

I manage it in a tricky way.

First, calculating the height of the String (you can use this).

Second, making a view with the frame in order to contain the label. Following the code snippet:

let sentence = "YOUR STRING"
let width: CGFloat = self.view.frame.width
let height = sentence.height(withConstrainedWidth: width, font: UIConstants.getFont(size: .medium))
let view = UIView(frame: CGRect(x: .zero, y: 40.0, width: width, height: height))
view.backgroundColor = UIColor.black.withAlphaComponent(0.3)
let label = UILabel()
label.text = sentence
label.textColor = .white
label.font = UIConstants.getFont(size: .medium)
label.lineBreakMode = .byWordWrapping
label.numberOfLines = .zero
label.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(label)
label.textAlignment = .center
label.snp.makeConstraints { make in
   make.edges.equalToSuperview()
}
imagePicker.cameraOverlayView = view

PS: I use the Snapkit library in order to declare constraints.

Auto Layout in camera overlay view - can't center button vertically

2 Answers2