CODEWITHSUNDEEP
iosswiftuiviewcontrolleruiimagepickercontrollermask
senty
senty

Reputation: 12847

CameraRoll Square Display and Circular Mask - UIImagePickerController

I am experimenting on Camera roll using UIImagePickerController. I have achieved presenting camera view with custom buttons (and to achieve that, I used another ViewController with an xib (CustomOverlayVC.swift)). So I have:

full code below

After creating NavBar programatically on CustomOverlayVC, this is what it looks like so far (and also what I want to achieve on the right)

enter image description here enter image description here

So my problems are:

1) How can I narrow down the imagepicker's view like the second image (displaying well as taking the picture in square format?)

I tried picker.view.frame.height -= 40 but apparently it's only get property.

2) How can I have a mask over the image that will show a circular mask? (This is explained for objective-c here but I don't know any obj-c and couldn't convert it successfully to Swift)

enter image description here

3) I tried to give it a custom background color with picker.view.backgroundColor = UIColor.redColor() however, it doesn't work at all. To clear, in second example it has grayish background color.

4) Also, the navbar that I have created looks much wider even though I used, (I know this is a different issue but having it solved would be highly appreciated)

UINavigationBar(frame: CGRectMake(0, 0, self.view.frame.size.width, 44))

So to wrap up, I want to narrow the height of its view until it gets square (as well as taking photo of the square) (2nd picture), and also, at the same time, have a circular mask and greyed outside the circle (the last picture)

I have created a sample project, also full code is below..

ViewController.swift

 class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

var picker = UIImagePickerController()


@IBAction func shootCamera(sender: AnyObject) {

    if UIImagePickerController.availableCaptureModesForCameraDevice(.Rear) != nil {
        picker = UIImagePickerController() //make a clean controller
        picker.allowsEditing = false
        picker.sourceType = UIImagePickerControllerSourceType.Camera
        picker.cameraDevice = .Front
        picker.cameraCaptureMode = .Photo
        picker.showsCameraControls = false

        picker.delegate = self

        let customViewController = CameraCustomOverlayViewController(nibName:"CameraCustomOverlayViewController",bundle: nil)
        let customView:CameraCustomOverlayView = customViewController.view as! CameraCustomOverlayView
        customView.frame = self.picker.view.frame

        picker.modalPresentationStyle = .FullScreen
        presentViewController(picker,animated: true,completion: {
            self.picker.cameraOverlayView = customView
        })

    } else { //no camera found -- alert the user.
        let alertVC = UIAlertController(
            title: "No Camera",
            message: "Sorry, this device has no camera",
            preferredStyle: .Alert)
        let okAction = UIAlertAction(
            title: "OK",
            style:.Default,
            handler: nil)
        alertVC.addAction(okAction)
        presentViewController(
            alertVC,
            animated: true,
            completion: nil)
    }
}

func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : AnyObject]) {
    let chosenImage = info[UIImagePickerControllerOriginalImage] as! UIImage //2
    UIImageWriteToSavedPhotosAlbum(chosenImage, self,nil, nil)
}

//What to do if the image picker cancels.
func imagePickerControllerDidCancel(picker: UIImagePickerController) {
    dismissViewControllerAnimated(true, completion: nil)
}

CustomOverlayVC.swift (for NavBar)

class CameraCustomOverlayViewController: UIViewController, UINavigationBarDelegate {

override func viewDidLoad() {
    super.viewDidLoad()

    let navigationBar = UINavigationBar(frame: CGRectMake(0, 0, self.view.frame.size.width, 44))
    navigationBar.backgroundColor = UIColor.blackColor()
    navigationBar.delegate = self;
    let navigationItem = UINavigationItem()
    navigationItem.title = "CAMERAROLL"
    let leftButton =  UIBarButtonItem(title: "Back", style:   UIBarButtonItemStyle.Plain, target: self, action: #selector(CameraCustomOverlayViewController.btn_clicked(_:)))
    let rightButton = UIBarButtonItem(title: "Save", style: UIBarButtonItemStyle.Plain, target: self, action: nil)
    navigationItem.leftBarButtonItem = leftButton
    navigationItem.rightBarButtonItem = rightButton
    navigationBar.items = [navigationItem]
    self.view.addSubview(navigationBar)
  }
}

Edit:

For understanding the height, I tried adding coloured border, it covers the whole view not the ImagePicker's view to me... I couldn't figure out any way to solve it..

  picker.view.layer.borderWidth = 1
  picker.view.layer.borderColor = UIColor.redColor().CGColor

enter image description here

Upvotes: 2

Views: 1455

Answers (1)

senty
senty

Reputation: 12847

I moved from UIImagePickerController to AVFoundation approach to accomplish more customised camera roll

Upvotes: 1

Related Questions