Adding image to the TextField - ios

im trying to add an icon to my username textfield, somehow I added the icon but I cant add any padding to it.
What I mean is, I want it to look like this:
And what I get is this:
let usernameTextField: UITextField = {
let tf = UITextField()
let imageView = UIImageView()
let image = UIImage(named: "user-icon")
imageView.image = image
imageView.frame = CGRect(x: 0, y: 0, width: 10, height: 15)
tf.leftViewMode = UITextFieldViewMode.always
tf.leftView = imageView
tf.addSubview(imageView)
var placeholder = NSMutableAttributedString(string: "username", attributes: [NSForegroundColorAttributeName: UIColor.lightGray])
tf.attributedPlaceholder = placeholder
tf.backgroundColor = UIColor.rgb(red: 34, green: 34, blue: 34)
tf.borderStyle = .roundedRect
tf.font = UIFont.systemFont(ofSize: 14)
tf.layer.cornerRadius = 25
tf.textColor = .white
tf.layer.borderWidth = 1
tf.layer.borderColor = UIColor(white: 1, alpha: 0.1).cgColor
tf.layer.masksToBounds = true
return tf
}()
And this is my code block. Even if I change the x and y values it doesnt event move any pixels.

Increase the width of the view and center the image. Adjust the width accordingly (I have set it 50). Try this ...
let usernameTextField: UITextField = {
let tf = UITextField()
let imageView = UIImageView()
let image = UIImage(named: "user-icon")
imageView.image = image
imageView.frame = CGRect(x: 0, y: 0, width: 50, height: 15)
imageView.contentMode = .scaleAspectFit
tf.leftViewMode = UITextFieldViewMode.always
tf.leftView = imageView
tf.addSubview(imageView)
var placeholder = NSMutableAttributedString(string: "username", attributes: [NSForegroundColorAttributeName: UIColor.lightGray])
tf.attributedPlaceholder = placeholder
tf.backgroundColor = UIColor.init(red: 35.0/100.0, green: 34.0/100.0, blue: 34.0/100.0, alpha: 1)
tf.borderStyle = .roundedRect
tf.font = UIFont.systemFont(ofSize: 14)
tf.layer.cornerRadius = 25
tf.textColor = .white
tf.layer.borderWidth = 1
tf.layer.borderColor = UIColor(white: 1, alpha: 0.1).cgColor
tf.layer.masksToBounds = true
return tf
}()

Related

UILabel custom Text

How can I make this text using single UILabel or give any other solution to achieve this design.
You can use NSTextAttachment for that behaviour. I modify this for position of attachment.
All code :
#IBOutlet weak var lbl: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
let string = "Urban points users average montly saving is "
let normalNameString = NSMutableAttributedString.init(string: string)
let attachment = NSTextAttachment()
attachment.image = imageHelper.pgImage(textValue: "QAR 115 ", lbl: lbl)
attachment.bounds = CGRect(x: 0, y: (lbl.font.capHeight - attachment.image!.size.height).rounded() / 2, width: attachment.image!.size.width, height: attachment.image!.size.height)
normalNameString.append(NSAttributedString(attachment: attachment))
normalNameString.append(NSAttributedString(string: "You have saved "))
let attachment2 = NSTextAttachment()
attachment2.image = imageHelper.pgImage(textValue: "QAR 29",textColor: UIColor.yellow,backgroundColor: UIColor.black , lbl: lbl)
attachment2.bounds = CGRect(x: 0, y: (lbl.font.capHeight - attachment2.image!.size.height).rounded() / 2, width: attachment2.image!.size.width, height: attachment2.image!.size.height)
normalNameString.append(NSAttributedString(attachment: attachment2))
normalNameString.append(NSAttributedString(string: " this month"))
lbl.attributedText = normalNameString
}
}
class imageHelper{
static func pgImage(textValue:String,textColor : UIColor = UIColor.white , backgroundColor : UIColor = UIColor.red,lbl : UILabel) ->UIImage{
let label = UILabel(frame: CGRect(x: 0, y: 0, width: (textValue as NSString).size(withAttributes: [NSAttributedString.Key.font : lbl.font!]).width, height: lbl.frame.size.height))
label.font = lbl.font
label.textAlignment = .center
label.textColor = textColor
label.backgroundColor = backgroundColor
label.layer.borderColor = UIColor.darkGray.cgColor
label.layer.borderWidth = 1
label.layer.cornerRadius = label.frame.size.height/2
label.layer.masksToBounds = true
label.text = textValue
label.numberOfLines = 1
UIGraphicsBeginImageContextWithOptions(label.bounds.size, false,UIScreen.main.scale)
label.layer.render(in: UIGraphicsGetCurrentContext()!)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image!
}
}
And the result is :

CALayer not showing text in

I am trying to add CALayer in my view, layer is shown but text is hide.
My code is as follow:
let label = UILabel(frame: CGRect(x: 100, y: 100, width: 25, height: 25))
label.text = "5"
label.font = .boldSystemFont(ofSize: 10)
label.adjustsFontSizeToFitWidth = true
label.textColor = #colorLiteral(red: 0.4392156899, green: 0.01176470611, blue: 0.1921568662, alpha: 1)
label.textAlignment = .center
let sublayer = label.layer
sublayer.backgroundColor = UIColor.yellow.cgColor
sublayer.borderColor = UIColor.red.cgColor
self.view.layer.addSublayer(sublayer)
Can you please let me know where I am going wrong?
Thank you,

How to make a reusable UILabel and UITextField programmatically

I want to make a reusable UILabel and UITextField so it will not be repeated, how I can do that? this is my code
let nameLabel: UILabel = {
let label = UILabel()
label.text = "Name"
label.textColor = .white
return label
}()
let nameTextField: UITextField = {
let tv = UITextField()
tv.placeholder = "Name"
tv.textColor = #colorLiteral(red: 0.6078431373, green: 0.6078431373, blue: 0.6078431373, alpha: 1)
return tv
}()
let emailLabel: UILabel = {
let label = UILabel()
label.text = "Email"
label.textColor = .white
return label
}()
let emailTextField: UITextField = {
let tv = UITextField()
tv.placeholder = "Email"
tv.textColor = #colorLiteral(red: 0.6078431373, green: 0.6078431373, blue: 0.6078431373, alpha: 1)
return tv
}()
Use computed property , it'll return a new instance every access
var emailLabel: UILabel {
let label = UILabel()
label.text = "Default"
label.textColor = .green
view.addSubview(label)
return label
}
let em1 = emailLabel
em1.text = "dshjsdhdshdhdshjdsh"
em1.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
let em2 = emailLabel
em2.text = "dshjsdhdshdhdshjdsh"
em2.frame = CGRect(x: 0, y: 100, width: 100, height: 100)

Center a UILabel of a UIView

I am currently trying to make a simple pop up, here I have a button, once it gets tapped.
It should show a simple view above it, I achieved the blue background, but I am not being able to add a label to it, and center the label to the blue popup
let width = (sender as! UIButton).frame.width
let y = (sender as! UIButton).frame.origin.y
let x = (sender as! UIButton).frame.origin.x
myView = UIView(frame: CGRect(x: x, y: y - 30, width:width, height: 30))
myView.backgroundColor = UIColor.blue
let label = UILabel()
label.text = (sender as! UIButton).titleLabel?.text
label.font = UIFont(name:"avenirNext-Meduim",size:20)
label.center = self.myView.center
myview.addSubview(label)
self.view.addSubview(myView)
UIView.animate(withDuration: 0.1, delay: 0.1, options: [], animations: {
self.myView.alpha = 0.0
}) { (finished: Bool) in
self.myView.isHidden = true
}
Try to set your label frame:
let label = UILabel(frame: CGRect(origin: .zero, size: yourLabelSize))
Instead of
label.center = self.myView.center
try
label.centerXAnchor.constraint(equalTo: myView.centerXAnchor).isActive = true
label.centerYAnchor.constraint(equalTo: myView.centerYAnchor).isActive = true
after
myview.addSubview(label)
self.view.addSubview(myView)
My solution
let codedLabel:UILabel = UILabel()
codedLabel.frame = CGRect(x: myView.center.x, y: myView.center.y, width: 51, height: 30)
codedLabel.textAlignment = .center
codedLabel.text = "q"
codedLabel.numberOfLines = 1
codedLabel.textColor=UIColor.red
codedLabel.font=UIFont.systemFont(ofSize: 22)
codedLabel.backgroundColor=UIColor.lightGray
self.myView.addSubview(codedLabel)
codedLabel.translatesAutoresizingMaskIntoConstraints = false
codedLabel.heightAnchor.constraint(equalToConstant: 30).isActive = true
codedLabel.widthAnchor.constraint(equalToConstant: 30).isActive = true
codedLabel.centerXAnchor.constraint(equalTo: codedLabel.superview!.centerXAnchor).isActive = true
codedLabel.centerYAnchor.constraint(equalTo: codedLabel.superview!.centerYAnchor).isActive = true
let headerView = UIView.init(frame: CGRect.init(x: 0, y: 0, width: tableView.frame.width, height: 50))
let label = UILabel()
label.frame = CGRect.init(x: headerView.center.x-60, y:headerView.center.y-15, width: 120, height: 30)
label.textAlignment = .center
label.textColor = #colorLiteral(red: 0.1290470958, green: 0.2743584514, blue: 0.6418049335, alpha: 1)
label.font = UIFont(name: "Roboto-Bold", size: 15)
label.text = "11-12-2020"
headerView.addSubview(label)
headerView.backgroundColor = #colorLiteral(red: 0.9967060685, green: 0.9998621345, blue: 0.9997505546, alpha: 1)

How to remove a programmatically created subview from Superview when button touch up inside?

I have a system that generate new view (marked with blue rect on the picture) and button (marked with green circle ) as a subview of Superview(marked with red rect) when user tapped to another button(named as Button). They all created programmatically. I can remove the "minus button" according it's button.tag with Action Messages. The problem is that how do I remove that subview next to minus button? It has also same tag with minus button.
My mainButton IBAction below ;
#IBAction func mainButton(sender: UIButton) {
drawThem()
minusButtonY = counter == 0 ? (minusButtonY + 101) :(minusButtonY + 68)
borderY = counter == 0 ? (borderY + 86) : (borderY + 68)
counter++
drawFooter()
completePaymentView.contentSize = counter > 7 ? (CGSizeMake(500.0, ( borderY ))) : (CGSizeMake(500.0, ( 490.0 )))
}
And the the method where I generate new view and button ;
func drawThem() {
//creating minus button
let image = UIImage(named: "minus.png") as UIImage?
let button = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton
var mX : CGFloat = 2.0
var mY : CGFloat = minusButtonY >= 36.0 ? minusButtonY : 36.0
button.frame = CGRectMake(mX, mY, 22, 22)
button.setImage(image, forState: .Normal)
button.tag = Int(counter)
button.addTarget(self, action:"btnTouched:", forControlEvents:.TouchUpInside)
completePaymentView.addSubview(button)
//drawing payment section border
var x : CGFloat = 43.0
var y : CGFloat = borderY >= 20.0 ? borderY : 20.0
let size = CGSize(width: 485 , height: 55)
let borderView = UIView(frame: CGRect(origin: CGPoint(x: x , y: y), size: size))
borderView.layer.borderColor = UIColor(red: 0.83, green: 0.85, blue: 0.88, alpha: 1.0).CGColor
borderView.layer.borderWidth = 2.0
borderView.layer.cornerRadius = 5.0
borderView.tag = counter
completePaymentView.addSubview(borderView)
//drawing UIImage and Labels into border
let imageName = "circle.png"
let thumb = UIImage(named: imageName)
let imageView = UIImageView(image: thumb!)
imageView.frame = CGRect(x: 14, y: 8, width: 55, height: 35)
borderView.addSubview(imageView)
let label1 = UILabel(frame: CGRect(x: 85, y: 20, width: 100, height: 18)) as UILabel
label1.text = "Some Text"
label1.textColor = UIColor(red: 0.49, green: 0.54, blue: 0.6, alpha: 1.0)
label1.font = label1.font.fontWithSize(14.0)
label1.textAlignment = .Left
borderView .addSubview(label1)
let label2 = UILabel(frame: CGRect(x: 370, y: 20, width: 100, height: 18)) as UILabel
label2.text = "Some Text"
label2.textColor = UIColor(red: 0.49, green: 0.54, blue: 0.6, alpha: 1.0)
label2.font = label2.font.fontWithSize(14.0)
label2.textAlignment = .Right
borderView .addSubview(label2)
}
and Target Action below ;
func btnTouched(button : UIButton){
button.removeFromSuperview()
}
Add the following in btnTouched method. Actually I am searching through all the subviews to find the tag.
for view in self.view.subviews as! [UIView] {
if view.tag == button.tag {
view.removeFromSuperview()
}
}

Resources