Skyscanner / SkyFloatingLabelTextField

A beautiful and flexible text field control implementation of "Float Label Pattern". Written in Swift.
Apache License 2.0
4.09k stars 542 forks source link

Add left padding for the Texts #250

Open Shawnees opened 5 years ago

Shawnees commented 5 years ago

I can't find a way to add a padding to the title and the text while I keep the underline stuck to the left. Something like that capture d ecran 2018-11-06 a 10 42 50

k0nserv commented 5 years ago

Hey @Shawnees this isn't currently possible

TomWFox commented 5 years ago

This would be a great, any chance of it getting implemented? I could try making a PR but have no knowledge of the code for this library.

alex02rt commented 5 years ago

I have same problem, this is my current solution. Hope it helps.

class CustomTextField: SkyFloatingLabelTextField {
    private let leftPadding = CGFloat(6)
    override open func placeholderRect(forBounds bounds: CGRect) -> CGRect {
        let rect = CGRect(
            x: leftPadding,
            y: titleHeight(),
            width: bounds.size.width,
            height: bounds.size.height - titleHeight() - selectedLineHeight
        )
        return rect
    }
    override func titleLabelRectForBounds(_ bounds: CGRect, editing: Bool) -> CGRect {
        if editing {
            return CGRect(x: leftPadding, y: 0, width: bounds.size.width, height: titleHeight())
        }
        return CGRect(x: leftPadding, y: titleHeight(), width: bounds.size.width, height: titleHeight())
    }
}
TomWFox commented 5 years ago

@alex02rt thanks for sharing this - I have adjusted it slightly for my use case by adding right padding and moving down the title label. The result and source code is attached below in case anyone is interested:

screen recording 2019-02-18 at 15 06 59

class TomsFloatingLabelTextField: SkyFloatingLabelTextField {

    private let leftPadding = CGFloat(6)
    private let rightPadding = CGFloat(6)

    override open func placeholderRect(forBounds bounds: CGRect) -> CGRect {

        let rect = CGRect(
            x: leftPadding,
            y: titleHeight(),
            width: bounds.size.width - rightPadding,
            height: bounds.size.height - titleHeight() - selectedLineHeight
        )

        return rect

    }

    override func textRect(forBounds bounds: CGRect) -> CGRect {

        let rect = CGRect(
            x: leftPadding,
            y: titleHeight(),
            width: bounds.size.width - rightPadding,
            height: bounds.size.height - titleHeight() - selectedLineHeight
        )

        return rect

    }

    override func editingRect(forBounds bounds: CGRect) -> CGRect {

        let rect = CGRect(
            x: leftPadding,
            y: titleHeight(),
            width: bounds.size.width - rightPadding,
            height: bounds.size.height - titleHeight() - selectedLineHeight
        )

        return rect

    }

    override func titleLabelRectForBounds(_ bounds: CGRect, editing: Bool) -> CGRect {

        if editing {
            return CGRect(x: leftPadding, y: 5, width: bounds.size.width, height: titleHeight())
        }

        return CGRect(x: leftPadding, y: titleHeight(), width: bounds.size.width, height: titleHeight())
    }

}
TomWFox commented 5 years ago

The only issue is that I would like to centre the placeholder (which I can do) however I don't know how to move it to the location where the user will type (further down) when the text view becomes the first responder.

Any ideas?