Icon on the right side

[reeichert]

I need an Icon on the right side, how can I do that??

just the icon

thank you

[gergelyorosz]

Hi! This use case is not supported out of the box - however you can definitely do this by extending the control. You could either subclass SkyFloatingLabelTextField, and draw the icon to the right size. You can check how displaying an icon on the left side is implemented in SkyFloatingLabelTextFieldWithIcon (see source here.

Alternatively, you could also try subclassing SkyFloatingLabelTextFieldWithIcon, and move iconLabel to the right side. You would need to override layoutSubviews, textRectForBounds, editingRectForBounds and placeholderRectForBounds to place the textfield to the right location (and the right size).

Please let me know if this helps. We designed the control so when subclassing, you can change the layout programmatically, like in this case.

[intonarumori]

Maybe we should consider accomplishing the icon placement with UITextFields leftView property. In right-to-left context UITextField places leftView on the right, so we could achieve this with very little effort.

From the documentation:

You can use the left overlay view to indicate the intended behavior of the text field. For example, you might display a magnifying glass in this location to indicate that the text field is a search field. The left overlay view flips automatically in a right-to-left user interface.

[gergelyorosz]

That's a good point @intonarumori . @reeichert - would you mind letting us know if you are using the textfield with right-to-left text (e.g. Arabic or Hebrew), or with left-to-right text (e.g. English or Spanish).

Showing the icon on the other side with right-to-left, as Daniel said, should be something we could add to the control. Configuring which side the icon is displayed is also potentially something we could add by just adding an additional property to specify the icon location in SkyFloatingLabelTextFieldWithIcon.

[reeichert]

Thanks for reply. I'm using LTR text, if you can add and additional property like iconSide = .Left will be awesome!

This is what I'm trying to do:

With icon on left side

[pichirichi]

I think that ignorer to support this request and keep the RTL support intact iconSide should have the following states:

• .Left & .Right - Will be flipped when switching to RTL language (right will become left and vice versa)
• .LeftForce & .RightForce - language orientation won't change the alignment (RTL will use the same value for alignment)

So the enum should have:

1. .Unspecified (whet we have today, will be flipped for RTL).
2. .Left
3. .Right
4. .LeftForce
5. .RightForce

[gergelyorosz]

@pichirichi good point on those potential values, as well as thinking of the "force" options. I'll give the implementation a go the next few days 👍

[pichirichi]

@gergelyorosz the alignment to right is already available from the RTL support, all is required is just the property and referencing it. I might have time tomorrow to look into it if you want.

the only problems there are no enums in inspectable and it will be a problem in the storyboard (making it readable)

[gergelyorosz]

Thanks @pichirichi . I'll try to squeeze some time in by tomorrow as well. Sounds like it will be a simple change then! (Just finishing another fix first)

[reeichert]

up

[alelevinas]

Hello everybody.

I was looking for something like this

A responsive icon on the right ;)

Anyone did an extension or something you can help me with. If not I'll try @gergelyorosz suggestion.

Thanks in advance

[anitaa1990]

Hey guys, is there an option added to the library to add icon to the right instead of the left?

[chejarla-venkatesh]

There is no option to set iconImage to Right or Left. Still you can achieve this by coding. Just make the textFiled class as SkyFloatingLabelTextField and add this two lines to your code

textField.rightViewMode = UITextFieldViewMode.always
textField.rightView = UIImageView(image: UIImage(named : "imageName"))

With this no need to use SkyFloatingLabelTextFieldWithIcon

[kwstasna]

@chejarla-venkatesh yes but if the text is too large, then the letters are above the image. And a workaround is the following

import SkyFloatingLabelTextField

extension SkyFloatingLabelTextField {
    /**
     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 {
        super.textRect(forBounds: bounds)
        let rightViewWidth = self.rightView?.bounds.width ?? 0.0
        let rect = CGRect(
            x: 0,
            y: titleHeight(),
            width: bounds.size.width - rightViewWidth,
            height: bounds.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 rightViewWidth = self.rightView?.bounds.width ?? 0.0
        let rect = CGRect(
            x: 0,
            y: titleHeight(),
            width: bounds.size.width - rightViewWidth,
            height: bounds.size.height - titleHeight() - selectedLineHeight
        )
        return rect
    }
}

[TomikeKrasnay]

Make the textFiled class as SkyFloatingLabelTextField and add this code

 self.textField.rightViewMode = .always
 let imageView = UIImageView()
 let image = UIImage(named: "icon")
 imageView.frame = CGRect(x: 0, y: 0, width: 20, height: 20)
 imageView.image = image
 self.textField.rightView = imageView

[bhanushalilinesh]

@TomikeKrasnay Thank you, your answer worked properly