Camera Record Button

Jun 12, 2018

For a project that I've been working on, I decided to create a record button like the one in iOS.

Here is the result.

The source code is on github

Overriding the draw(_ rect: CGRect) function

RecordButton extends UIView and overrides the draw(_ rect: CGRect) function. In this function, we draw the button and add a gesture recognizer to detect when the button is pressed. We also add an animation to transform the button from a round shape to a square.

Delegate

Classes that use RecordButton class should implement RecordButtonDelegate to know the button has been pressed.

protocol RecordButtonDelegate: class {

    func tapButton(isRecording: Bool)
}

Usage

Interface Builder

• Drag RecordButton class into your project
• In your storyboard, select an UIView
• Go the the identity inspector and in the class field, type RecordButton instead of UIView

Manually

• Drag RecordButton class into your project
• In your ViewController add the following

     var recordButton: RecordButton?
    override func viewDidAppear(_ animated: Bool) {

        super.viewDidAppear(animated)

        let recordButtonSide = self.view.bounds.size.height/10
        recordButton = RecordButton(frame: CGRect(x: self.view.bounds.width/2-recordButtonSide/2,
                                                  y: self.view.bounds.height/2-recordButtonSide/2,
                                                  width: recordButtonSide,
                                                  height: recordButtonSide))
        recordButton?.delegate = self

        self.view.addSubview(recordButton!)

    }

You can download the full project with a fully functional example here

And that's it!! If you use it I'll be happy to know about it.