UIPickerController leaves black bottom bar

Question

I am using the following code to display a UIPickerController along with its overlay view:

-(void) viewDidLoad{
    self.overlayView = [[OverlayViewController alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    self.overlayView.delegate = self;
    if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera])
    {
        imagePickerController = [[UIImagePickerController alloc] init];
        imagePickerController.sourceType = UIImagePickerControllerSourceTypeCamera;
        imagePickerController.modalPresentationStyle = UIModalPresentationFullScreen;
        imagePickerController.cameraOverlayView.frame=self.view.frame;
        imagePickerController.showsCameraControls = NO;
        imagePickerController.navigationBarHidden = YES;
        imagePickerController.toolbarHidden = YES;
    //imagePickerController.cameraViewTransform = CGAffineTransformScale(imagePickerController.cameraViewTransform, 1.0, 1.3);
        imagePickerController.delegate = self.overlayView;
        // as a delegate we will be notified when pictures are taken and when to dismiss the image picker

        [self.view addSubview:imagePickerController.view];
        imagePickerController.cameraOverlayView =self.overlayView.view;
    } else {
        [self.view addSubview:self.overlayView.view];

    }
 }

Yet the screen displays a black bar at the bottom when keeping the iPhone in portrait. No bar appears in landscape as you may see in the attached screen-shots. How to fix it?

It seems the overlayView is created programmatically, you will need to adjust the Mode of the overlayView (Scale to Fill, Aspect Fit, ..) or adjust the size of the camera view. In your portrait screenshot the camera view fits into the main view and you get the black bar because the aspect ratio of the camera (4:3) and the iPhone screen (16:9) are different. In your landscape screenshot it seems that the camera view is scaled to fill the screen, but the image is cropped at the top and bottom. — iCode, Jan 04 '16 at 15:29
So what should I do instead? I cannot depend on the eventual sizes of the future devices to ice the screen properly... is there not a way to just fill the screen and so it is? — Fabrizio Bartolomucci, Jan 04 '16 at 17:08
A for the overlayView I frankly se no other way to create it but programmatically. Not even the UIImagePicker controller has a Storyboard counterpart, what to say of its overlayView?! — Fabrizio Bartolomucci, Jan 04 '16 at 17:09

score 0 · Accepted Answer · edited May 23 '17 at 11:59

0

I think this question: How to get the custom overlay for UIImagePicker camera to be full screen in iOS 7? is about the same problem and you can find an answer there.

edited May 23 '17 at 11:59

Community

1
1

answered Jan 04 '16 at 21:19

iCode

320
2
13

Fabrizio Bartolomucci · Answer 2 · 2016-01-05T12:26:23.057

I implemented it as suggested in the thread after inserting the viewController in the storyboard:

-(void) viewDidLoad{
     self.overlayView = [[OverlayViewController alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
     self.overlayView.delegate = self;
     if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera])
     {
         imagePickerController = [[UIImagePickerController alloc] init];
         imagePickerController.sourceType = UIImagePickerControllerSourceTypeCamera;
         imagePickerController.modalPresentationStyle = UIModalPresentationFullScreen;
         imagePickerController.cameraOverlayView.frame=self.view.frame;
         imagePickerController.showsCameraControls = NO;
         imagePickerController.navigationBarHidden = YES;
         imagePickerController.toolbarHidden = YES;

         //imagePickerController.cameraViewTransform = CGAffineTransformScale(imagePickerController.cameraViewTransform, 1.0, 1.3);
         imagePickerController.delegate = self.overlayView;
         // as a delegate we will be notified when pictures are taken and when to dismiss the image picker
         self.overlayView=[self.storyboard instantiateViewControllerWithIdentifier:@"OverlayViewController"];
         [self.view addSubview:imagePickerController.view];
         [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(showSlider) name:@"showSlider" object:nil];
         imagePickerController.cameraOverlayView =self.overlayView.view;
         CGSize screenSize = [[UIScreen mainScreen] bounds].size;
         float cameraAspectRatio = 4.0 / 4.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);
      } else {
         [self.view addSubview:self.overlayView.view]; 
    }
 }

And in fact the thing works fine after tweaking the cameraAspectRatio to 4.0, 4.0. Yet, when showing the app in landscape the image and control get reversed. This is how my door handle shows. Moreover when I point the iPhone upward the image moves sideways and viceversa. May it be fixed or would I need to forego the landscape option?

score 0 · Answer 3 · answered Dec 21 '20 at 18:17

for anyone who can use this, he is the code in swift:

@IBAction func takePhoto(_ sender: Any) {
    imagePicker =  UIImagePickerController()
    imagePicker.delegate = self
    imagePicker.sourceType = .camera
    imagePicker.cameraCaptureMode = .photo
    imagePicker.cameraDevice = .front
    imagePicker.cameraOverlayView?.frame = view.frame
    imagePicker.showsCameraControls = false
    imagePicker.isNavigationBarHidden = true
    imagePicker.isToolbarHidden = true
    let screenSize = UIScreen.main.bounds.size
    let cameraAspectRatio: Float = 4.0 / 4.0
    let imageWidth = floorf(Float(screenSize.width * CGFloat(cameraAspectRatio)))
    let scale = ((screenSize.height / CGFloat(imageWidth)) * 10.0).rounded() / 10.0;
    imagePicker.cameraViewTransform = CGAffineTransform(scaleX: CGFloat(scale), y: CGFloat(scale))
    

    present(imagePicker, animated: false, completion: nil)
}

im my case i call this screen from a button.

UIPickerController leaves black bottom bar

3 Answers3