Position "Clear Button" in UITextfield

Question

Is there a way to position the clear button? I would like to move it down by just a little bit so it's on the same level with the text input. Any ideas?

My Textfields are already Subclasses of another Class that handles the effects. Including the "clearButtonRect" function doesn't work.

@IBDesignable open class HoshiTextField: TextFieldEffects {

//effect functions..

    override open func clearButtonRect(forBounds bounds: CGRect) -> CGRect {
        return CGRect(x: 0, y: 0.2, width: 0.1, height: 0.3)
        }
    }`

What you used for that clear button some custom button or used textfield property? — Abhishek, Sep 04 '19 at 11:48
@Chris you can try this - https://stackoverflow.com/a/27066764/3683408 — Ram, Sep 04 '19 at 11:54
What is an easy way to find out my coordinate values for the clear button? — Chris, Sep 04 '19 at 12:00
@Chris CGRect(x: 0, y:5.0, width: yourButtonWidth, height: yourButtonHeight) - Hope it's clear to you:) — Ram, Sep 04 '19 at 12:12
My Problem right now is, that my Textfields are already a subclass of TextFieldEffects. I just created the subclass CustomClearButton but how do I make it work now ? — Chris, Sep 04 '19 at 12:29
Hope you can understand what I mean, look at my other comment below:) — Chris, Sep 04 '19 at 12:44

score 9 · Answer 1 · answered Sep 04 '19 at 12:02

9

You can create your own custom text field

Chirag's answer is correct but according to Apple, your method should call the super implementation and modify the returned rectangle’s origin only

class CustomTextField : UITextField
{
    override func clearButtonRect(forBounds bounds: CGRect) -> CGRect{
        let rect = super.clearButtonRect(forBounds: bounds)
        return rect.offsetBy(dx: customX, dy: customY)
    }
}

answered Sep 04 '19 at 12:02

Manav

2,284
1
14
27

can you please add the link to relevant apple document please? – chirag90 Sep 05 '19 at 07:22
https://developer.apple.com/documentation/uikit/uitextfield/1619600-clearbuttonrect – Manav Sep 05 '19 at 07:33

chirag90 · Accepted Answer · 2019-09-04T14:12:08.010

5

Subclass your textfield and override the clearButtonRect function

class CustomTextField: UITextField {

    override func clearButtonRect(forBounds bounds: CGRect) -> CGRect {
        return CGRect(x: xPos, y:yPos, width: yourWidth, height: yourHeight)
    }
}

EDIT 1 - Subclass 3rd party Textfield

As you are using 3rd party library calls TextFieldEffects you will need to follow the below steps.

If you you are using storyboard and have a textfield on there (set the class to CustomTextField)

if you can doing it programmatically you will need to change it there.

Then create a new swift file call it CustomTextField.swift and add the below code

import UIKit
import TextFieldEffects // Import the 3rd party library

// Now you are subclassing the 3rd party textfield
// Change it to the textfield you are using and if you are using multiple create subclass for individual ones.
class CustomTextField: HoshiTextField {

    override func clearButtonRect(forBounds bounds: CGRect) -> CGRect {
        // change the return line as per your requirement. 
        return CGRect(x: 300, y: 25, width: 40, height: 20) 
    }
}

Output

Hope this will help.

edited Sep 04 '19 at 14:12

answered Sep 04 '19 at 11:54

chirag90

2,211
1
22
37

is there an easy way to find out the values for x, y, width and height? – Chris Sep 04 '19 at 12:00
My Textfields are already a subclass, so I copied your code into it but it does nothing, even with weird values. – Chris Sep 04 '19 at 12:25
override open func clearButtonRect(forBounds bounds: CGRect) -> CGRect { return CGRect(x: 0, y: 5.0, width: 10, height: 3) } – Chris Sep 04 '19 at 12:25
My Problem right now is, that my Textfields are already a subclass of TextFieldEffects. I just created the subclass CustomClearButton but how do I make it work now ? – Chris Sep 04 '19 at 12:29
1

@Chris if you run the application and follow this [Developer Tools for UI Debugging](https://medium.com/@dmytro.anokhin/overview-of-developer-tools-for-ui-debugging-122e4995f972) you will be able to find the x and y position – chirag90 Sep 04 '19 at 12:31
so, I did that and the effects are still working fine, but now the clear button doesn't even appear ` import UIKit import TextFieldEffects class CustomTextField: HoshiTextField { override func clearButtonRect(forBounds bounds: CGRect) -> CGRect { return CGRect(x: 0, y: 5.0, width: 10, height: 3) } } ` – Chris Sep 04 '19 at 14:16
1

as mentioned in the code you need to modify your `return CGRect(x: 0, y: 5.0, width: 10, height: 3)` to meet your needs. Have a look again to updated answer i have changed the return statement and added an image. – chirag90 Sep 04 '19 at 14:18

score -1 · Answer 3 · answered Apr 18 '21 at 21:41

Building on the helpful answers here already... And answering the comment about how to find the appropriate x/y position automatically. Here is my solution for a generic extension of the textfields from the TextFieldEffects library (I'm using the YoshikoTextField but the solution should work for any with a placeholder that floats above the field):

The textfields from that library have a placeholder rect that allows us to obtain the height of the upper part of the textfield, which is causing the wrong offset.

import UIKit
import TextFieldEffects

class CustomYoshikoTextField: YoshikoTextField {

    override func clearButtonRect(forBounds bounds: CGRect) -> CGRect {
        let rect = super.clearButtonRect(forBounds: bounds)
        let placeholderHeight = self.placeholderRect(forBounds: bounds).height
        return rect.offsetBy(dx: 0, dy: placeholderHeight * 0.5)
    }
}

This is just moving the clear button down by half of the placholder rect height. Guaranteed to be centered on the actual input part of the field for any textfield size.

Position "Clear Button" in UITextfield

3 Answers3

Linked