1

I have added a checkmarkImageView as rightview of a skyfloatinglabeltextfield as follows:

let checkmark = UIImage(named: "checkmark") 
checkmarkImageView = UIImageView(image: checkmark)
checkmarkImageView?.frame = CGRect(x: 0.0, y: 0.0, width: 20.0, height: 20.0)
textfield?.rightView = checkmarkImageView
textfield?.rightViewMode = .always
editView.addSubview(textfield!)

It is not aligning vertically centre with the text of the textfield. How do I achieve that? It is not aligning vertically centre with the text of the textfield.

sandpat
  • 1,478
  • 12
  • 30

3 Answers3

3

change the frame.offsetBy, I used textfield Border Style as Plain

    let rightVie = UIView()
    rightVie.backgroundColor = UIColor.clear

   checkmarkImageView = UIImageView(image: UIImage(named: "checkmark")) // use your imageView
  //  checkmarkImageView?.frame = CGRect(x: 0.0, y: 0.0, width: 20.0, height: 20.0)
   checkmarkImageView.frame = checkmarkImageView.frame.offsetBy(dx: 0, dy: -1 + textfield.titleHeight()/2)
    rightVie.frame = checkmarkImageView.frame
    rightVie.addSubview(checkmarkImageView)
    //use your textfield name
    textfield?.rightView = rightVie
    textfield?.rightViewMode = .always

output

enter image description here

Anbu.Karthik
  • 82,064
  • 23
  • 174
  • 143
  • I tried this but unfortunately didn't work for me Anbu. I couldn't see any difference. May be it is because I am using SkyFloatingTextfield and frame of it is larger than just text+bottom line. – sandpat May 18 '18 at 07:19
  • can you modify your answer by changing dy to (-1 + textfield.titleHeight()/2). SkyFloatingLabelTextField is a custom textfield with a title added. So, we need to bring down the checkmark by an amount equal to half the height of the top title. – sandpat May 18 '18 at 07:42
  • This works, hence asked you to do the modification. Will accept the answer but I have used textfield as instance name, so can you update the answer with the same instance names (also for checkmarkImageView) as in the questions so that it is straight away helpful for someone having the same issue? – sandpat May 18 '18 at 08:52
  • checkmarkImageView instead of getCheckmark as well please. – sandpat May 18 '18 at 08:56
  • Thanks a lot. Please change the variable name on rhs. Many thanks Anbu. checkmarkImageView.frame = getCheckmarkImageView.frame.offsetBy(dx: 0, dy: -1 + textfield.titleHeight()/2) – sandpat May 18 '18 at 09:00
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/171316/discussion-between-josh-and-anbu-karthik). – sandpat May 18 '18 at 10:32
1

Try changing the frame of checkmarkImageView to:

checkmarkImageView?.frame = CGRect(x: 0.0, y: 0.0, width: 20.0, height: textfield.bounds.height)

And please add a screenshot of the frames you are getting from the UI debugger.

Edit:

checkmarkImageView?.contentMode = .scaleAspectFit

Edit-2:

To get the height of the text, use:

let textHeight = text.size(withAttributes: [NSAttributedStringKey.font: UIFont.openSansBold(size: 10)]).height

Add the attributes according to your requirement.

Let me know if you still face any issues.

PGDev
  • 23,751
  • 6
  • 34
  • 88
  • if you change the height , then checkmarkImageView? is not shows as squre – Anbu.Karthik May 18 '18 at 06:56
  • 1
    Set the contentMode of `checkmarkImageView` to `AspectFit`. – PGDev May 18 '18 at 06:57
  • That will not work PGDev, my textfield starts all the way from nombre (title) to bottom line. This is SkyFloatingTextField. I want my image to be only as big as text and vertically align it with text. – sandpat May 18 '18 at 07:03
  • 1
    Then in that case, you need to calculate the height of the text and set the `checkmarkImageView's` origin - y to `height/2`. You have to customize it accordingly. – PGDev May 18 '18 at 07:06
  • I thought of that way before using textfield.rightView. How to find the height of text inside textfield? – sandpat May 18 '18 at 07:17
  • what's text? (textfield.text?). Fortunately, SkyfloatingLabelTextField has getTextHeight() method. Now I am in a fix. Both the answers helped me to the right answer. – sandpat May 18 '18 at 07:34
  • Sure. Happy coding..:) – PGDev May 18 '18 at 07:35
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/171314/discussion-between-josh-and-pgdev). – sandpat May 18 '18 at 10:31
0

Maybe you can use that function:

func setupNavUI() {
    let addressTextField = UITextField(frame: CGRect(x: 0.0, y: 0.0, width: self.navigationItem.titleView?.frame.width ?? 100.0, height: 50.0))
    addressTextField.rightViewMode = .always
    let icon = FAKFontAwesome.sortDownIcon(withSize: 20.0)
    icon?.setAttributes([NSAttributedString.Key.foregroundColor : UIColor.lightGray])
    let image = icon?.image(with: CGSize(width: 20.0, height: 20.0))
    let imageView = UIImageView(frame: CGRect(x: 0.0, y: 0.0, width: 20.0, height: 20.0))
    imageView.image = image
    let rightView = UIView(frame: CGRect(x: 0, y: 0, width: 20.0, height: 26.0))
    rightView.addSubview(imageView)
    addressTextField.rightView = rightView
    addressTextField.placeholder = "Buscar una dirección"
    self.navigationItem.titleView = addressTextField
}

Best Regards

Alfredo Luco G
  • 876
  • 7
  • 18