How to vertically and horizontally align text in SkyFloatingLabelTextField?

Question

I have use SkyFloatingLabelTextField and I want to vertically and horizontally center align text.

I have to write code but it aligns text only horizontally not vertically.

what I have tried is

        var rightButton = UIButton(frame: CGRect(x: 0, y: 0, width: 25, height: 25))
        var imageNew = UIImage(named: "rightArrow")!
        rightButton.contentMode = .scaleAspectFit
        rightButton.setImage(imageNew, for: .normal)
        rightButton.setImage(imageNew, for: .selected)
        
        rightButton.contentVerticalAlignment = .center
        rightButton.contentHorizontalAlignment = .center


        selectTradeTxt.rightView = rightButton
        selectTradeTxt.rightView?.frame = self.selectTradeTxt.rightViewRect(forBounds: self.selectTradeTxt.bounds)
        
        selectTradeTxt.rightViewMode = .always
        selectTradeTxt.textColor = .white
        selectTradeTxt.addRoundCorner(7)
// i have tried this
  //      selectTradeTxt.contentHorizontalAlignment = .center
        selectTradeTxt.contentVerticalAlignment = .center
        selectTradeTxt.textAlignment = .center

Raja Kishan · Accepted Answer · 2021-06-14T09:00:03.503

You have to change frame y position as bellow override function in SkyFloatingLabelTextField.swift file

// MARK: - UITextField text/placeholder positioning overrides
    /**
    Calculate the rectangle for the textfield when it is not being edited
    - parameter bounds: The current bounds of the field
    - returns: The rectangle that the textfield should render in
    */
    override open func textRect(forBounds bounds: CGRect) -> CGRect {
        let superRect = super.textRect(forBounds: bounds)
        let titleHeight = self.titleHeight()

        let rect = CGRect(
            x: superRect.origin.x,
            y: titleHeight + 2,
            width: superRect.size.width,
            height: superRect.size.height - titleHeight - selectedLineHeight
        )
        return rect
    }

    /**
     Calculate the rectangle for the textfield when it is being edited
     - parameter bounds: The current bounds of the field
     - returns: The rectangle that the textfield should render in
     */
    override open func editingRect(forBounds bounds: CGRect) -> CGRect {
        let superRect = super.editingRect(forBounds: bounds)
        let titleHeight = self.titleHeight()

        let rect = CGRect(
            x: superRect.origin.x,
            y: titleHeight + 2,
            width: superRect.size.width,
            height: superRect.size.height - titleHeight - selectedLineHeight
        )
        return rect
    }

    /**
     Calculate the rectangle for the placeholder
     - parameter bounds: The current bounds of the placeholder
     - returns: The rectangle that the placeholder should render in
     */
    override open func placeholderRect(forBounds bounds: CGRect) -> CGRect {
        let rect = CGRect(
            x: 0,
            y: self.isEditing ? titleHeight() : titleHeight() - 8,
            width: bounds.size.width,
            height: bounds.size.height - titleHeight() - selectedLineHeight
        )
        return rect
    }

    // MARK: - Positioning Overrides
    /**
    Calculate the bounds for the title label. Override to create a custom size title field.
    - parameter bounds: The current bounds of the title
    - parameter editing: True if the control is selected or highlighted
    - returns: The rectangle that the title label should render in
    */
    open func titleLabelRectForBounds(_ bounds: CGRect, editing: Bool) -> CGRect {
        if editing {
            return CGRect(x: 0, y: 10, width: bounds.size.width, height: titleHeight())
        }
        return CGRect(x: 0, y: titleHeight(), width: bounds.size.width, height: titleHeight())
    }

i cannot edit that file, how can i do? if i modify that code, will it effect on all SkyFloatingLabelTextField ? — Pinal, Jun 14 '21 at 08:14
Then create a subclass of SkyFloatingLabelTextField and override all. — Raja Kishan, Jun 14 '21 at 08:15
that's working, but one issue is, the text is not shown properly. — Pinal, Jun 14 '21 at 08:44
result is [![text is not shwon properly][1]][1] [1]: https://i.stack.imgur.com/nPEhu.png — Pinal, Jun 14 '21 at 08:57
When i click on green SkyFloatingLabelTextField, fonts cut down any idea? result is [![text is not shwon properly][1]][1] [1]: i.stack.imgur.com/nPEhu.png — Pinal, Jun 14 '21 at 09:26

How to vertically and horizontally align text in SkyFloatingLabelTextField?

1 Answers1