CameraRoll Square Display and Circular Mask - UIImagePickerController
<p>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:</p>

<ul>
<li><p>MainViewController.swift (+ Storyboard)</p></li>
<li><p>CustomOverlayViewController.swift</p></li>
<li><p>CustomOverlayView.swift (UIView)</p></li>
</ul>

<p><code>full code below</code></p>

<hr>

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

<p><a href="https://i.stack.imgur.com/1zlLz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1zlLz.png" alt="enter image description here"></a> <a href="https://i.stack.imgur.com/R8qBC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R8qBC.png" alt="enter image description here"></a></p>

<hr>

<p>So my problems are:</p>

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

<p>I tried <code>picker.view.frame.height -= 40</code> but apparently it's only get property.</p>

<p>2) How can I have a mask over the image that will show a circular mask? <em>(This is explained for objective-c <a href="http://forums.macrumors.com/threads/uiimagepickercontroller-editing-view-circle-overlay-resolved.1689199/" rel="nofollow noreferrer">here</a> but I don't know any obj-c and couldn't convert it successfully to Swift)</em> </p>

<p><a href="https://i.stack.imgur.com/EO55h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EO55h.png" alt="enter image description here"></a> </p>

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

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

<pre><code>UINavigationBar(frame: CGRectMake(0, 0, self.view.frame.size.width, 44))
</code></pre>

<hr>

<p><strong>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) <em>(2nd picture)</em>, and also, at the same time, have a circular mask and greyed outside the circle <em>(the last picture)</em></strong></p>

<p>I have created a <a href="https://drive.google.com/open?id=0BxWHl6OLoWW6VUFVc1dhS0NNRzA" rel="nofollow noreferrer">sample project</a>, also full code is below..</p>

<hr>

<p>ViewController.swift</p>

<pre><code> 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)
}
</code></pre>

<hr>

<p>CustomOverlayVC.swift (for NavBar)</p>

<pre><code>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)
  }
}
</code></pre>

<hr>

<p><strong>Edit</strong>:</p>

<p>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..</p>

<pre><code>  picker.view.layer.borderWidth = 1
  picker.view.layer.borderColor = UIColor.redColor().CGColor
</code></pre>

<p><a href="https://i.stack.imgur.com/bDWnN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bDWnN.png" alt="enter image description here"></a></p>