I'm trying to design such a button or a textfield, but exactly how can I do it? This is my textfield. I added an arrow to the right.
#IBOutlet weak var pickerTextField: UITextField!{
didSet {
pickerTextField.tintColor = UIColor.lightGray
pickerTextField.setIcon(#imageLiteral(resourceName: "drop-down-arrow"))
}
}
extension UITextField {
func setIcon(_ image: UIImage) {
let iconView = UIImageView(frame:
CGRect(x: -40, y: 7, width: 15, height: 15))
iconView.image = image
let iconContainerView: UIView = UIView(frame:
CGRect(x: -50, y: 0, width: 30, height: 30))
iconContainerView.addSubview(iconView)
rightView = iconContainerView
rightViewMode = .always
}
}
Related
I have a problem, I added secureTextEntry toggle in my text field, but text is on toggle button.
extension UITextField {
fileprivate func setPasswordToggleImage(_ button: UIButton) {
if(isSecureTextEntry){
button.setImage(UIImage(named: "eye-active"), for: .normal)
}else{
button.setImage(UIImage(named: "eye-inactive"), for: .normal)
}
}
func enablePasswordToggle(){
let button = UIButton(type: .custom)
setPasswordToggleImage(button)
button.frame = CGRect(x: CGFloat(self.frame.size.width - 25), y: CGFloat(5), width: CGFloat(25), height: CGFloat(25))
button.addTarget(self, action: #selector(self.togglePasswordView), for: .touchUpInside)
self.rightView = button
self.rightViewMode = .always
}
#IBAction func togglePasswordView(_ sender: Any) {
self.isSecureTextEntry.toggle()
setPasswordToggleImage(sender as! UIButton)
}
}
Also I have a bug that places my icon in far right, instead of the place I meant and I don't know why but it's 2nd icon
You can use this directly to add image and padding to your UITextField. Can be done from code as well as storyboard
// MARK: - UITextField
extension UITextField {
#IBInspectable var leftPadding: CGFloat {
get {
return leftView?.frame.size.width ?? 0.0
}
set {
let frame = CGRect(x: 0, y: 0, width: newValue, height: bounds.size.height)
leftView = UIView(frame: frame)
leftViewMode = .always
}
}
#IBInspectable var leftImage: UIImage? {
get {
let imgView = leftView?.subviews.first(where: {$0 is UIImageView}) as? UIImageView
return imgView?.image
}
set {
let frame = CGRect(x: 0, y: 0, width: leftPadding, height: bounds.size.height)
leftView = UIView(frame: frame)
let imgView = UIImageView(frame: frame.insetBy(dx: 4, dy: 4))
imgView.contentMode = .scaleAspectFit
leftView?.addSubview(imgView)
imgView.image = newValue
leftViewMode = .always
}
}
#IBInspectable var rightPadding: CGFloat {
get {
return rightView?.frame.size.width ?? 0.0
}
set {
let frame = CGRect(x: 0, y: 0, width: newValue, height: bounds.size.height)
rightView = UIView(frame: frame)
rightViewMode = .always
}
}
#IBInspectable var rightImage: UIImage? {
get {
let imgView = rightView?.subviews.first(where: {$0 is UIImageView}) as? UIImageView
return imgView?.image
}
set {
let frame = CGRect(x: 0, y: 0, width: rightPadding, height: bounds.size.height)
rightView = UIView(frame: frame)
let imgView = UIImageView(frame: frame.insetBy(dx: 4, dy: 4))
imgView.contentMode = .scaleAspectFit
rightView?.addSubview(imgView)
imgView.image = newValue
rightViewMode = .always
}
}
}
I have set up the left icon in UITextField. When I set text, it is over the left icon. I want to set text after the icon in the UITextField. I have used below code.
let imageView = UIImageView(image: UIImage(named: strImgname))
imageView.frame = CGRect(x: 0, y: 0, width: imageView.image!.size.width , height: imageView.image!.size.height)
let paddingView: UIView = UIView.init(frame: CGRect(x: 0, y: 0, width: 50, height: 30))
paddingView.addSubview(imageView)
txtField.leftViewMode = .always
txtField.leftView = paddingView
You can use #IBDesignable to make a designable UITextField with these capabilities and even more and use it through out your project.
DesignableTextField with Delegate methods when icon in UITextField is tapped:
import Foundation
import UIKit
protocol DesignableTextFieldDelegate: UITextFieldDelegate {
func textFieldIconClicked(btn:UIButton)
}
#IBDesignable
class DesignableTextField: UITextField {
//Delegate when image/icon is tapped.
private var myDelegate: DesignableTextFieldDelegate? {
get { return delegate as? DesignableTextFieldDelegate }
}
#objc func buttonClicked(btn: UIButton){
self.myDelegate?.textFieldIconClicked(btn: btn)
}
//Padding images on left
override func leftViewRect(forBounds bounds: CGRect) -> CGRect {
var textRect = super.leftViewRect(forBounds: bounds)
textRect.origin.x += padding
return textRect
}
//Padding images on Right
override func rightViewRect(forBounds bounds: CGRect) -> CGRect {
var textRect = super.rightViewRect(forBounds: bounds)
textRect.origin.x -= padding
return textRect
}
#IBInspectable var padding: CGFloat = 0
#IBInspectable var leadingImage: UIImage? { didSet { updateView() }}
#IBInspectable var color: UIColor = UIColor.lightGray { didSet { updateView() }}
#IBInspectable var imageColor: UIColor = UIColor.init(hex: "3EB2FF") { didSet { updateView() }}
#IBInspectable var rtl: Bool = false { didSet { updateView() }}
func updateView() {
rightViewMode = UITextFieldViewMode.never
rightView = nil
leftViewMode = UITextFieldViewMode.never
leftView = nil
if let image = leadingImage {
let button = UIButton(type: .custom)
button.frame = CGRect(x: 0, y: 0, width: 20, height: 20)
let tintedImage = image.withRenderingMode(.alwaysTemplate)
button.setImage(tintedImage, for: .normal)
button.tintColor = imageColor
button.setTitleColor(UIColor.clear, for: .normal)
button.addTarget(self, action: #selector(buttonClicked(btn:)), for: UIControlEvents.touchDown)
button.isUserInteractionEnabled = true
if rtl {
rightViewMode = UITextFieldViewMode.always
rightView = button
} else {
leftViewMode = UITextFieldViewMode.always
leftView = button
}
}
// Placeholder text color
attributedPlaceholder = NSAttributedString(string: placeholder != nil ? placeholder! : "", attributes:[NSAttributedStringKey.foregroundColor: color])
}
}
Now its Designable in the Storyboard as follows:
NOTE: Rtl when set to Off icon will move to left of UITextField
Conforming the Delegate in desired ViewController.
class MyViewController: UIViewController, DesignableTextFieldDelegate {
#IBOutlet weak var txtFieldSomeSearch: DesignableTextField!
txtFieldSomeSearch.delegate = self // can be done in storyboard as well
... // other codes
func textFieldIconClicked(btn: UIButton) {
print("MyViewController : textFieldIconClicked")
}
... // other codes
}
Finally Output :
Using the extension in Swift4, We can easily put the image on the right or on the left with padding to TextField.
extension UITextField {
//MARK:- Set Image on the right of text fields
func setupRightImage(imageName:String){
let imageView = UIImageView(frame: CGRect(x: 10, y: 10, width: 20, height: 20))
imageView.image = UIImage(named: imageName)
let imageContainerView: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 55, height: 40))
imageContainerView.addSubview(imageView)
rightView = imageContainerView
rightViewMode = .always
self.tintColor = .lightGray
}
//MARK:- Set Image on left of text fields
func setupLeftImage(imageName:String){
let imageView = UIImageView(frame: CGRect(x: 10, y: 10, width: 20, height: 20))
imageView.image = UIImage(named: imageName)
let imageContainerView: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 55, height: 40))
imageContainerView.addSubview(imageView)
leftView = imageContainerView
leftViewMode = .always
self.tintColor = .lightGray
}
}
Use code as for right image setup:-
self.password_text_field.setupRightImage(imageName: "unlock")
Output :)
please use the below code
//Left side icon
textField.leftViewMode = UITextFieldViewMode.Always
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
let image = UIImage(named: imageName)
imageView.image = image
textField.leftView = imageView
//Right side icon
textField.rightViewMode = UITextFieldViewMode.Always
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
let image = UIImage(named: imageName)
imageView.image = image
textField.rightView = imageView
Extension to UITextField in Swift 5. This allows you to check if the image is a system image, otherwise, you use a custom image. You can also set which side of the text field you want the image on using the TextFieldImageSide enumeration.
enum TextFieldImageSide {
case left
case right
}
extension UITextField {
func setUpImage(imageName: String, on side: TextFieldImageSide) {
let imageView = UIImageView(frame: CGRect(x: 10, y: 5, width: 30, height: 30))
if let imageWithSystemName = UIImage(systemName: imageName) {
imageView.image = imageWithSystemName
} else {
imageView.image = UIImage(named: imageName)
}
let imageContainerView = UIView(frame: CGRect(x: 0, y: 0, width: 45, height: 40))
imageContainerView.addSubview(imageView)
switch side {
case .left:
leftView = imageContainerView
leftViewMode = .always
case .right:
rightView = imageContainerView
rightViewMode = .always
}
}
}
Usage:
searchBar.setUpImage(imageName: "mappin.and.ellipse", on: .left)
Produces the following:
I am trying to create the following registration form . I cant set the space between the textfield image and the placeholder text . I've tried the following :
Email_text.placeholderRect(forBounds: CGRect(x: 10, y: 0 , width: 60, height: 50))
any idea how can I fix this ?
Thanks
You can simply do like this, an extension for UITextField
extension UITextField {
func setTextIconAndPlaceholder(icon: UIImage, placeholder: String) {
let imageView = UIImageView()
imageView.image = icon
imageView.frame = CGRect(x: 0, y: 0, width: 20, height: 20)
let view = UIView()
view.frame = CGRect(x: 0, y: 2, width: 25, height: 25)
view.backgroundColor = UIColor.clear
view.addSubview(imageView)
self.leftView = view
self.leftViewMode = UITextFieldViewMode.always
self.placeholder = placeholder
}
}
I want to make a popup menu which is a UIView containing an array of buttons which should be existing side by side. Instead, they are all stacked on top of each other despite my changing the center.x dynamically. This is my code snippet:
func createPopUpView(number: Int) -> UIView{
let popUpView: UIView = UIView()
var buttons: [UIButton] = [UIButton]()
let button: UIButton = UIButton(frame: CGRect(x: 0, y: 0, width: 32, height:42))
button.backgroundColor = UIColor.black
button.layer.cornerRadius = 5
for i in 0..<number {
buttons.append(button)
buttons[i].setTitle(String(i), for: .normal)
buttons[i].center.x += 32
popUpView.addSubview(buttons[i])
}
return popUpView
}
Thank you.
You need to create a new button each time through the loop. Also, need to supply a frame when you create your popUpView...
Try it like this:
func createPopUpView(number: Int) -> UIView{
let popUpView: UIView = UIView(frame: CGRect(x: 0, y: 0, width: number * 32, height: 42))
for i in 0..<number {
let button: UIButton = UIButton(frame: CGRect(x: i * 32, y: 0, width: 32, height:42))
button.backgroundColor = UIColor.black
button.layer.cornerRadius = 5
button.setTitle(String(i), for: .normal)
popUpView.addSubview(button)
}
return popUpView
}
I have created a custom UIView :
import UIKit
class IndicatorView: UIView {
var image_view_indicator: UIImageView!
var label_indicator: UILabel!
required init(coder decoder: NSCoder) {
super.init(coder: decoder)!
}
init(frame:CGRect, imageName: String, indicatorValue: String)
{
super.init(frame: frame)
self.frame = frame
image_view_indicator = UIImageView(frame: CGRect(x: 0, y: 0, width: 15, height: 15))
image_view_indicator.image = UIImage(named: imageName)
self.addSubview(image_view_indicator)
self.bringSubviewToFront(image_view_indicator)
label_indicator = UILabel(frame: CGRect(x: image_view_indicator.frame.size.width + 3, y: 0, width: 25, height: 15))
label_indicator.text = indicatorValue
label_indicator.textColor = UIColor.blackColor()
self.addSubview(label_indicator)
self.bringSubviewToFront(label_indicator)
}
}
This is my call from UIViewController :
view_indicator_friends = IndicatorView(frame: view_indicator_friends.frame, imageName: "friend.png", indicatorValue: "20")
I cross checked the IBOutlet connections. They seem to be fine.
But nothing is showing up in the custom view.
When you take your custom view from Xib through IBOutlet connection then your custom init will not invoked that why your image_view_indicator and label_indicator does not created. Thats why your custom view does not showing up properly. One solution is that implement your code under init(frame:CGRect, imageName: String, indicatorValue: String) method in the awakeFromNib method.
override func awakeFromNib() {
let frame = self.frame
image_view_indicator = UIImageView(frame: CGRect(x: 0, y: 0, width: 15, height: 15))
image_view_indicator.image = UIImage(named: imageName)
self.addSubview(image_view_indicator)
self.bringSubviewToFront(image_view_indicator)
label_indicator = UILabel(frame: CGRect(x: image_view_indicator.frame.size.width + 3, y: 0, width: 25, height: 15))
label_indicator.text = indicatorValue
label_indicator.textColor = UIColor.blackColor()
self.addSubview(label_indicator)
self.bringSubviewToFront(label_indicator)
}