0

Is it possible to add rightView UIButton to a UITextField to StoryBoard using @IBInspectable ?

I want to create a uiTextfield like in this image using StoryBoard so that it will be easier in the future

TextField Design

So far I was able do this IBDesignable Class with CornerRadius, Right Image and LeftView Image

import UIKit

@IBDesignable class UITextFieldX: UITextField {

@IBInspectable var leftImage: UIImage? {
    didSet {
        updateView()
    }
}   
@IBInspectable var leftPadding: CGFloat = 0 {
    didSet {
        updateView()
    }
}    
@IBInspectable var rightImage: UIImage? {
    didSet {
        updateView()
    }
}    
@IBInspectable var rightPadding: CGFloat = 0 {
    didSet {
        updateView()
    }
}
@IBInspectable var rightViewButton: Bool = false{
    didSet{
        updateView()
    }
}    
private var _isRightViewVisible: Bool = true
var isRightViewVisible: Bool {
    get {
        return _isRightViewVisible
    }
    set {
        _isRightViewVisible = newValue
        updateView()
    }
}    
func updateView() {
    setLeftImage()
    setRightImage()

    // Placeholder text color
    attributedPlaceholder = NSAttributedString(string: placeholder != nil ?  placeholder! : "", attributes:[NSAttributedStringKey.foregroundColor: tintColor])
}    
func setLeftImage() {
    leftViewMode = UITextFieldViewMode.always
    var view: UIView

    if let image = leftImage {
        let imageView = UIImageView(frame: CGRect(x: leftPadding, y: 0, width: 20, height: 20))
        imageView.image = image
        // Note: In order for your image to use the tint color, you have to select the image in the Assets.xcassets and change the "Render As" property to "Template Image".
        imageView.tintColor = tintColor

        var width = imageView.frame.width + leftPadding

        if borderStyle == UITextBorderStyle.none || borderStyle == UITextBorderStyle.line {
            width += 5
        }

        view = UIView(frame: CGRect(x: 0, y: 0, width: width, height: 20))
        view.addSubview(imageView)
    } else {
        view = UIView(frame: CGRect(x: 0, y: 0, width: leftPadding, height: 20))
    }

    leftView = view
}

func setRightImage() {
    rightViewMode = UITextFieldViewMode.always

    var view: UIView

    if let image = rightImage, isRightViewVisible {
        let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
        imageView.image = image
        // Note: In order for your image to use the tint color, you have to select the image in the Assets.xcassets and change the "Render As" property to "Template Image".
        imageView.tintColor = tintColor

        var width = imageView.frame.width + rightPadding

        if borderStyle == UITextBorderStyle.none || borderStyle == UITextBorderStyle.line {
            width += 5
        }

        view = UIView(frame: CGRect(x: 0, y: 0, width: width, height: 20))
        view.addSubview(imageView)

    } else {
        view = UIView(frame: CGRect(x: 0, y: 0, width: rightPadding, height: 20))
    }

    rightView = view
}


// MARK: - Corner Radius
@IBInspectable var cornerRadius: CGFloat = 0 {
    didSet {
        self.layer.cornerRadius = cornerRadius
    }
  }
}

Is it possible to add UIButton in UITextview as a Right View using IBInspectable? like shown in the above image

alpha47
  • 305
  • 3
  • 17
  • Why IBInspectable?? Add button directly side of the textfield , it does not make any issue in interface. – dahiya_boy Apr 10 '18 at 07:18
  • it is easier but if it is possible i can use this this IBDesignable class for other project too.. we'll be able see it while we design the app .. – alpha47 Apr 10 '18 at 07:20
  • Instead of rightImage why you didn't add button. You already done in above code as I am seeing. – dahiya_boy Apr 10 '18 at 07:23
  • also if we add a button directly on top of the Textfield, if the text is too long, i could be seen behind the Button.. right? – alpha47 Apr 10 '18 at 07:24
  • yeah.. let me check.. will get back to you – alpha47 Apr 10 '18 at 07:25
  • No actually you have to take a view and add textfield and button (Right . side). Both have clear color. horizontal spacing is as per your requirement.This view will bind your textfiled and button as just like as like the above image. – dahiya_boy Apr 10 '18 at 07:27
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/168619/discussion-between-alpha47-and-dahiya-boy). – alpha47 Apr 10 '18 at 07:36

0 Answers0