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 :
Related
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)
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)
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
}()
I want to put label into an image that is a red rectangle with corner radius (in condition that the image size must to be equal or slightly higher than the label one). For that I found a similar question. I tested this:
theLabel.backgroundColor = UIColor(patternImage: UIImage(named: "blah")!)
But I have problems with the image size. So I tested the second answer:
UILabel *myLabel=[[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 20)];
UIImage *img = [UIImage imageNamed:#"a.png"];
CGSize imgSize = myLabel.frame.size;
UIGraphicsBeginImageContext( imgSize );
[img drawInRect:CGRectMake(0,0,imgSize.width,imgSize.height)];
UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
myLabel.backgroundColor = [UIColor colorWithPatternImage:newImage];
Having the last version of Xcode (Xcode 8.0) the CGRectMake is unavailable.
Can anyone help me please?
Try this code: Tested in Swift 3.
Answer 1:
override func viewDidLoad() {
super.viewDidLoad()
let label = UILabel()
label.frame = CGRect(x:0, y:0, width:imageView.frame.width , height:imageView.frame.height)
label.text = "Some Title"
label.textAlignment = .center
label.textColor = .yellow
label.font = UIFont(name: "HelveticaNeue-medium", size: CGFloat(20))
imageView.addSubview(label)
}
Output:
Answer 2: Updated
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
imageView.layer.cornerRadius = 10
imageView.layer.masksToBounds = true
let label = UILabel()
label.frame = CGRect(x:0, y:0, width:imageView.frame.width , height:imageView.frame.height)
label.text = "Some Title"
label.textAlignment = .center
label.textColor = .yellow
label.layer.borderColor = UIColor.red.cgColor
label.layer.cornerRadius = 10
label.layer.masksToBounds = true
label.layer.borderWidth = 5
label.font = UIFont(name: "HelveticaNeue-medium", size: CGFloat(26))
imageView.addSubview(label)
}
Note: You need to workout the image size and label font size.
Output:
Your objective c code in question is changed into swift 3.0
var myLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 21))
var img = UIImage(named:"a")
var imgSize : CGSize = myLabel.frame.size
UIGraphicsBeginImageContext(CGSize(width: newWidth, height: newHeight))
image.draw(in: CGRect(x: 0, y: 0, width: newWidth, height: newHeight))
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
myLabel.backgroundColor = UIColor(patternImage: newImage)
please help me to make a simple badge like UILabel.
My code is:
let badgeLabel = UILabel(frame: CGRectMake(0, 0, 25, 25))
badgeLabel.backgroundColor = UIColor.clearColor()
badgeLabel.layer.backgroundColor = UIColor.redColor().CGColor
badgeLabel.layer.cornerRadius = 25/2
badgeLabel.layer.borderWidth = 3.0
badgeLabel.layer.borderColor = UIColor.whiteColor().CGColor
And in result I have a UILabel with tiny red stroke on white border:
Try this.
let badgeLabel = UILabel(frame: CGRectMake(0, 0, 25, 25))
badgeLabel.backgroundColor = UIColor.redColor()
badgeLabel.layer.backgroundColor = UIColor.clearColor().CGColor
badgeLabel.layer.cornerRadius = 25/2
badgeLabel.layer.borderWidth = 3.0
badgeLabel.layer.borderColor = UIColor.whiteColor().CGColor
Hey Check this latest code, sure it will work.
let roundRing = UILabel(frame: badgeLabel.frame)
roundRing.backgroundColor = UIColor.clearColor()
roundRing.layer.backgroundColor = UIColor.whiteColor().CGColor
roundRing.layer.cornerRadius = 25/2
roundRing.layer.borderWidth = 3.0
roundRing.layer.borderColor = UIColor.whiteColor().CGColor
self.view .addSubview(roundRing)
let innerRegion = UILabel(frame: CGRectMake(3, 3, 19, 19))
innerRegion.backgroundColor = UIColor.clearColor()
innerRegion.layer.backgroundColor = UIColor.redColor().CGColor
innerRegion.layer.cornerRadius = 19/2
innerRegion.text="2"
innerRegion.font=UIFont(name: "MarkerFelt-Thin", size: 10)!
innerRegion.textAlignment=NSTextAlignment.Center
roundRing.addSubview(innerRegion)
You are missing masksToBounds
for swift 3:
let badgeLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 25, height: 25))
badgeLabel.backgroundColor = .red
badgeLabel.layer.cornerRadius = 25/2
badgeLabel.layer.masksToBounds = true
badgeLabel.layer.borderWidth = 3.0
badgeLabel.layer.borderColor = .white