Custom Clear Button

Question

I want to create custom clear button on UITextField, that is to use rightView and put image there, the problem is attaching the original clear button event to that custom r

Answer 1

Here is my solution in Swift 3. In addition to the already existing answer, I also made sure that both left and right views of the textfield (i.e. the search magnifier image view and the custom clear button) have a padding to their left/right by overriding leftViewRect() and rightViewRect(). Otherwise, they will stick right on the edges of the textfield.

class CustomTextField: UITextField
{
    fileprivate let searchImageLength: CGFloat = 22
    fileprivate let cancelButtonLength: CGFloat = 15
    fileprivate let padding: CGFloat = 8


    override init( frame: CGRect )
    {
        super.init( frame: frame )
        self.customLayout()
    }

    required init?( coder aDecoder: NSCoder )
    {
        super.init( coder: aDecoder )
        self.customLayout()
    }

    override func leftViewRect( forBounds bounds: CGRect ) -> CGRect
    {
        let x = self.padding
        let y = ( bounds.size.height - self.searchImageLength ) / 2
        let rightBounds = CGRect( x: x, y: y, width: self.searchImageLength, height: self.searchImageLength )
        return rightBounds
    }

    override func rightViewRect( forBounds bounds: CGRect ) -> CGRect
    {
        let x = bounds.size.width - self.cancelButtonLength - self.padding
        let y = ( bounds.size.height - self.cancelButtonLength ) / 2
        let rightBounds = CGRect( x: x, y: y, width: self.cancelButtonLength, height: self.cancelButtonLength )
        return rightBounds
    }

    fileprivate func customLayout()
    {
        // Add search icon on left side
        let searchImageView = UIImageView()
        searchImageView.contentMode = .scaleAspectFit
        let searchIcon = UIImage( named: "search_magnifier" )
        searchImageView.image = searchIcon
        self.leftView = searchImageView
        self.leftViewMode = .always

        // Set custom clear button on right side
        let clearButton = UIButton()
        clearButton.setImage( UIImage( named: "search_cancel" ), for: .normal )
        clearButton.contentMode = .scaleAspectFit
        clearButton.addTarget( self, action: #selector( self.clearClicked ), for: .touchUpInside )
        self.rightView = clearButton
        self.clearButtonMode = .never
        self.rightViewMode = .whileEditing
    }

    @objc fileprivate func clearClicked( sender: UIButton )
    {
        self.text = ""
    }
}