Swift: Make an image in background of label - ios

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)

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 :

UINavigationItem is behind UINavigationBar

I've set up a UINavigationBar to have rounded bottom corners with shadow, but it removed my UINavigationItem. I've tried to set it back programatically but it sets it behind the top bar item.
class RoundedShadowCorners {
func shadowTopBar(_ topBar: UINavigationBar,_ offset: CGFloat,_ navigationItem: UINavigationItem){
topBar.isTranslucent = false
topBar.tintColor = UIColor.orange
topBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
topBar.shadowImage = UIImage()
topBar.backgroundColor = UIColor.white
let shadowView = UIView(frame: CGRect(x: 0, y: -offset, width: (topBar.bounds.width), height: (topBar.bounds.height) + offset))
shadowView.backgroundColor = UIColor.white
topBar.insertSubview(shadowView, at: 1)
let shadowLayer = CAShapeLayer()
shadowLayer.path = UIBezierPath(roundedRect: shadowView.bounds, byRoundingCorners: [.bottomLeft , .bottomRight , .topLeft], cornerRadii: CGSize(width: 20, height: 20)).cgPath
shadowLayer.fillColor = UIColor.white.cgColor
shadowLayer.shadowColor = UIColor.darkGray.cgColor
shadowLayer.shadowPath = shadowLayer.path
shadowLayer.shadowOffset = CGSize(width: 2.0, height: 2.0)
shadowLayer.shadowOpacity = 0.8
shadowLayer.shadowRadius = 2
shadowView.layer.insertSublayer(shadowLayer, at: 0)
topBar.prefersLargeTitles = true
topBar.topItem?.title = "HJFSKDJKA"
}
}
offset is view.safeAreaInsets.top! Picture attached, as you can see, the title is behind the layer.
Text is behind
As you can see, layer works
I have edited #Daljeet's code and thanks to that I've found the solution:
let titleLabelView = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 40))
titleLabelView.backgroundColor = UIColor.clear
titleLabelView.textAlignment = .center
titleLabelView.textColor = UIColor.black
titleLabelView.font = UIFont.systemFont(ofSize: 17)
titleLabelView.adjustsFontSizeToFitWidth = true
titleLabelView.text = navigationItem.title
let labelView: UIView = titleLabelView
topBar.insertSubview(labelView, aboveSubview: shadowView)
let yCoordPlaceholder = labelView.center.y
labelView.center = CGPoint(x: safeArea.width/2, y: yCoordNavPlaceholder)
Thanks again #Daljeet!
You can try below code:
// First create custom label
UILabel *titleLabelView = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 200, 40)];
[titleLabelView setBackgroundColor:[UIColor clearColor]];
[titleLabelView setTextAlignment: NSTextAlignmentCenter];
[titleLabelView setTextColor:[UIColor whiteColor]];
[titleLabelView setFont:[UIFont systemFontOfSize: 27]];
[titleLabelView setAdjustsFontSizeToFitWidth:YES];
titleLabelView.text = #"You text here";
// here set in navBar titleView
topBar.topItem.titleView = titleLabelView;
topBar.bringSubviewToFront(topBar.topItem!.titleView!)
Add this line of code after setting the title.

UINavigationItem TitleView Cutting Off When Using UIView

I am trying to display a multi-line titleView in my app. Here is my code to set the titleView.
self.titleView = TitleView(frame: CGRect(origin: CGPoint.zero, size: CGSize(width: self.tableView.frame.width, height: 80)), title: "NEWS", subtitle: Date.dateAsStringForNavBarSubTitle())
self.titleView.backgroundColor = UIColor.red
self.navigationItem.titleView = self.titleView
The part of the implementation of TitleView is shown below:
private func setupUI() {
let label = UILabel(frame: CGRect(origin: CGPoint.zero, size: CGSize(width: self.frame.width, height: self.frame.height)))
label.numberOfLines = 2
label.text = "\(self.title)\n\(self.subtitle)"
self.addSubview(label)
}
The label comes out to be outside the parent view.
Should I just use a UILabel instead of putting it in UIView?
I can see that you are adding label subview into title view. Instead, you can try this in your viewcontroller's viewDidLoad() method.
For Swift 4
let label = UILabel(frame: CGRect(x: 0.0, y: 0.0, width: UIScreen.main.bounds.width, height: 44.0))
label.backgroundColor = .red
label.numberOfLines = 2
label.textAlignment = .left
label.text = "\(self.title)\n\(self.subtitle)"
self.navigationItem.titleView = label
For more information please refer this link UINavigationBar multi-line title

overlaying text on image using swift

I am trying to overlay some text on an image using Swift and am looking at this code here: (src: How do I add text to an image in iOS Swift)
This places the text right in the center. I have been changing the values in
var rect = CGRectMake(10,150, inImage.size.width,
inImage.size.height)
but I am unable to get the text to show in the lower left corner. Can someone help and show what I am missing here ?
I am adding the modified image using this line:
modImage = self.textToImage("000", inImage: UIImage(named:"thisImage.png")!, atPoint: CGPointMake(10, 400))
Below is the function...
func textToImage(drawText: NSString, inImage: UIImage, atPoint: CGPoint) -> UIImage{
// Setup the font specific variables
var textColor = UIColor.whiteColor()
var textFont = UIFont(name: "Helvetica Bold", size: 12)!
// Setup the image context using the passed image
let scale = UIScreen.mainScreen().scale
UIGraphicsBeginImageContextWithOptions(inImage.size, false, scale)
// Setup the font attributes that will be later used to dictate how the text should be drawn
let textFontAttributes = [
NSFontAttributeName: textFont,
NSForegroundColorAttributeName: textColor,
]
// Put the image into a rectangle as large as the original image
inImage.drawInRect(CGRectMake(0, 0, inImage.size.width, inImage.size.height))
// Create a point within the space that is as bit as the image
var rect = CGRectMake(atPoint.x, atPoint.y, inImage.size.width, inImage.size.height)
// Draw the text into an image
drawText.drawInRect(rect, withAttributes: textFontAttributes)
// Create a new image out of the images we have created
var newImage = UIGraphicsGetImageFromCurrentImageContext()
// End the context now that we have the image we need
UIGraphicsEndImageContext()
//Pass the image back up to the caller
return newImage
}
Details
xCode 9.1, Swift 4
Solution
extension UIView
extension UIView {
func copyObject<T: UIView> () -> T? {
let archivedData = NSKeyedArchiver.archivedData(withRootObject: self)
return NSKeyedUnarchiver.unarchiveObject(with: archivedData) as? T
}
}
extension UIImage
extension UIImage {
typealias EditSubviewClosure<T: UIView> = (_ parentSize: CGSize, _ viewToAdd: T)->()
func with<T: UIView>(view: T, editSubviewClosure: EditSubviewClosure<T>) -> UIImage {
if let copiedView = view.copyObject() as? T {
UIGraphicsBeginImageContext(size)
let basicSize = CGRect(origin: .zero, size: size)
draw(in: basicSize)
editSubviewClosure(size, copiedView)
copiedView.draw(basicSize)
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage!
}
return self
}
}
extension UIImageView
extension UIImageView {
enum ImageAddingMode {
case changeOriginalImage
case addSubview
case addCopiedSubview
}
func drawOnCurrentImage<T: UIView>(view: T, mode: ImageAddingMode, editSubviewClosure: #escaping UIImage.EditSubviewClosure<T>) {
guard let image = image else {
return
}
let addSubView: (T) -> () = { view in
editSubviewClosure(self.frame.size, view)
self.addSubview(view)
}
switch mode {
case .changeOriginalImage:
self.image = image.with(view: view, editSubviewClosure: editSubviewClosure)
case .addSubview:
addSubView(view)
case .addCopiedSubview:
if let copiedView = view.copyObject() as? T {
addSubView(copiedView)
}
}
}
}
Usage
Sample 1
func sample1(label: UILabel) {
imageView.contentMode = .scaleAspectFit
imageView.image = UIImage(named: "wall")?.with(view: label) { (parentSize, viewToAdd) in
print("parentSize: \(parentSize)")
viewToAdd.font = UIFont.systemFont(ofSize: 40)
viewToAdd.textColor = .yellow
viewToAdd.bounds = CGRect(x: 40, y: 40, width: 200, height: 40)
}
}
Sample 2
func sample2(label: UILabel) {
imageView.image = UIImage(named: "wall")
imageView.contentMode = .scaleAspectFit
imageView.drawOnCurrentImage(view: label, mode: .changeOriginalImage) { (parentSize, viewToAdd) in
print("parentSize: \(parentSize)")
viewToAdd.font = UIFont.systemFont(ofSize: 40)
viewToAdd.textColor = .yellow
viewToAdd.textAlignment = .right
let width: CGFloat = 200
let height: CGFloat = 30
let indent: CGFloat = 40
viewToAdd.bounds = CGRect(x: parentSize.width - width - indent, y: parentSize.height - height - indent, width: width, height: height)
}
}
Sample 3
func sample3(label: UILabel) {
imageView.image = UIImage(named: "wall")
imageView.contentMode = .scaleAspectFill
imageView.drawOnCurrentImage(view: label, mode: .addSubview) { (parentSize, viewToAdd) in
print("parentSize: \(parentSize)")
viewToAdd.font = UIFont.systemFont(ofSize: 16)
viewToAdd.textColor = .yellow
viewToAdd.frame = CGRect(x: 40, y: 40, width: 200, height: 20)
}
}
Sample 4
func sample4(label: UILabel) {
imageView.image = UIImage(named: "wall")
imageView.contentMode = .scaleAspectFill
imageView.drawOnCurrentImage(view: label, mode: .addCopiedSubview) { (parentSize, viewToAdd) in
print("parentSize: \(parentSize)")
viewToAdd.font = UIFont.systemFont(ofSize: 16)
viewToAdd.textColor = .yellow
viewToAdd.frame = CGRect(x: 40, y: 40, width: 200, height: 20)
}
}
Full sample
Do not forget to add the solution code here
import UIKit
class ViewController: UIViewController {
let imageView = UIImageView(frame: CGRect(x: 50, y: 50, width: 300, height: 300))
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
let label = UILabel(frame: CGRect(x: 20, y: 20, width: 80, height: 30))
label.text = "Blablabla"
label.font = UIFont.systemFont(ofSize: 20)
label.textColor = .black
view.addSubview(label)
sample1(label: label)
//sample2(label: label)
//sample3(label: label)
//sample4(label: label)
imageView.clipsToBounds = true
view.addSubview(imageView)
}
func sample1(label: UILabel) {
imageView.contentMode = .scaleAspectFit
imageView.image = UIImage(named: "wall")?.with(view: label) { (parentSize, viewToAdd) in
print("parentSize: \(parentSize)")
viewToAdd.font = UIFont.systemFont(ofSize: 40)
viewToAdd.textColor = .yellow
viewToAdd.bounds = CGRect(x: 40, y: 40, width: 200, height: 20)
}
}
func sample2(label: UILabel) {
imageView.image = UIImage(named: "wall")
imageView.contentMode = .scaleAspectFit
imageView.drawOnCurrentImage(view: label, mode: .changeOriginalImage) { (parentSize, viewToAdd) in
print("parentSize: \(parentSize)")
viewToAdd.font = UIFont.systemFont(ofSize: 40)
viewToAdd.textColor = .yellow
viewToAdd.textAlignment = .right
let width: CGFloat = 200
let height: CGFloat = 30
let indent: CGFloat = 40
viewToAdd.bounds = CGRect(x: parentSize.width - width - indent, y: parentSize.height - height - indent, width: width, height: height)
}
}
func sample3(label: UILabel) {
imageView.image = UIImage(named: "wall")
imageView.contentMode = .scaleAspectFill
imageView.drawOnCurrentImage(view: label, mode: .addSubview) { (parentSize, viewToAdd) in
print("parentSize: \(parentSize)")
viewToAdd.font = UIFont.systemFont(ofSize: 16)
viewToAdd.textColor = .yellow
viewToAdd.frame = CGRect(x: 40, y: 40, width: 200, height: 20)
}
}
func sample4(label: UILabel) {
imageView.image = UIImage(named: "wall")
imageView.contentMode = .scaleAspectFill
imageView.drawOnCurrentImage(view: label, mode: .addCopiedSubview) { (parentSize, viewToAdd) in
print("parentSize: \(parentSize)")
viewToAdd.font = UIFont.systemFont(ofSize: 16)
viewToAdd.textColor = .yellow
viewToAdd.frame = CGRect(x: 40, y: 40, width: 200, height: 20)
}
}
}
Great answer Vasily!
but in my situation I needed to add these fixes.
TEXT IS VERY SMALL
I ran a situation where the text was super small, maybe because the UIImage size was too small for the selected font of 14, so I fixed this by giving a huge font of 120.
TEXT IS NOT DISPLAYED AT THE GIVEN CGPOINT
In the same context of a big UIImage size, the position given to the extension was misplacing the text, the fix: added these 2 lets with the ratio of height and width computed and then multiplied for x,y points.
let widthRatio = size.width/UIScreen.main.bounds.width
let heightRatio = size.height/UIScreen.main.bounds.height
Hope that helps anybody!

How to dynamically draw image for button in iOS?

This is the result I need to accomplish:
I need the icons with basic image: basket and additionally I need to put there UILabel with some text: once it is just a number, and once it is an amount to pay. Any ideas?
This is my example:
var image = UIImage(named: "cart")!
let text = "1 PLN"
UIGraphicsBeginImageContext(CGSizeMake(80, 50))
let context = UIGraphicsGetCurrentContext()
let label = UILabel(frame: CGRectZero)
label.text = text
label.font = UIFont.systemFontOfSize(10)
label.sizeToFit()
let width = max(label.frame.size.width + 10, 15)
let height = CGFloat(15)
CGContextSetFillColorWithColor(context, UIColor.greenColor().CGColor)
CGContextFillRect(context, CGRectMake(0, 0, image.size.width, image.size.height))
image.drawInRect(CGRectMake(80/2-50/2, 0, 50, 50))
let path = UIBezierPath(roundedRect: CGRectMake(75-width, 45-height, width, height), cornerRadius: 5)
path.lineWidth = 2
UIColor.redColor().setStroke()
UIColor.yellowColor().setFill()
path.stroke()
path.fill()
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.alignment = NSTextAlignment.Center
let attributes = [NSFontAttributeName: UIFont.systemFontOfSize(10.0), NSParagraphStyleAttributeName: paragraphStyle]
(text as NSString).drawInRect(CGRectMake(75-width, 45-height, width, height), withAttributes: attributes)
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
The result is following:
Some examples for different text:

Resources