I am trying to render a Label in a CALayer and the background of the layer iconLayer is being placed on top of the Label.
func textToImage(drawText: NSString, inImage: UIImage, atPoint:CGPoint)->UIImage{
let textColor: UIColor = UIColor(red: 85/255, green: 150/255, blue: 230/255, alpha: 1)
let textFont: UIFont = UIFont(name: "WeatherIcons-Regular", size: 20)!
UIGraphicsBeginImageContext(inImage.size)
let layer = CALayer()
let iconLayer = CALayer()
layer.frame = CGRectMake(0, 0, inImage.size.width, inImage.size.height)
inImage.drawInRect(CGRectMake(0, 0, inImage.size.width, inImage.size.height))
let imageSubLayer = CALayer()
imageSubLayer.contents = inImage.CGImage
let rect: CGRect = CGRectMake(atPoint.x, atPoint.y, 30, 30)
iconLayer.frame = rect
iconLayer.cornerRadius = 15.0
iconLayer.backgroundColor = UIColor.whiteColor().CGColor
layer.renderInContext(UIGraphicsGetCurrentContext()!)
iconLayer.borderColor = textColor.CGColor
iconLayer.borderWidth = 1
let label = UILabel(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
label.text = drawText as String
label.font = textFont
label.textColor = textColor
label.layer.renderInContext(UIGraphicsGetCurrentContext()!)
iconLayer.contents = label
layer.addSublayer(iconLayer)
layer.addSublayer(imageSubLayer)
layer.renderInContext(UIGraphicsGetCurrentContext()!)
let newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage
}
Below is what the view looks like with the background.
Below is what the view looks like with the background removed.
It seems the icon is not getting added to the layer iconLayer except it just getting added to the context.
I ended up fixing it with the following code.
func textToImage(drawText: NSString, inImage: UIImage, atPoint:CGPoint)->UIImage{
let textColor: UIColor = UIColor(red: 85/255, green: 150/255, blue: 230/255, alpha: 1)
let textFont: UIFont = UIFont(name: "WeatherIcons-Regular", size: 20)!
UIGraphicsBeginImageContext(inImage.size)
let layer = CALayer()
let iconLayer = CALayer()
layer.frame = CGRectMake(0, 0, inImage.size.width, inImage.size.height)
inImage.drawInRect(CGRectMake(0, 0, inImage.size.width, inImage.size.height))
let imageSubLayer = CALayer()
imageSubLayer.contents = inImage.CGImage
let rect: CGRect = CGRectMake(atPoint.x, atPoint.y, 30, 30)
iconLayer.frame = rect
iconLayer.cornerRadius = 15.0
iconLayer.backgroundColor = UIColor.whiteColor().CGColor
layer.renderInContext(UIGraphicsGetCurrentContext()!)
iconLayer.borderColor = textColor.CGColor
iconLayer.borderWidth = 1
let label = UILabel(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
label.text = drawText as String
label.font = textFont
label.textColor = textColor
iconLayer.contents = label.layer
layer.addSublayer(iconLayer)
layer.addSublayer(label.layer)
layer.addSublayer(imageSubLayer)
layer.renderInContext(UIGraphicsGetCurrentContext()!)
let newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage
}
Related
I am trying to set UIsegmentedControl tint color for the selected segment to gradient color and I am unable to do it
I am trying to follow this article https://www.bethedev.com/2019/02/set-gradient-tint-color-for-segmented.html
Trying to use this code:
segmentedControl.setTitleTextAttributes([NSAttributedString.Key.foregroundColor:UIColor.white],for: UIControl.State.normal)
segmentedControl.setTitleTextAttributes([NSAttributedString.Key.foregroundColor:UIColor.white],for: UIControl.State.selected)
fileprivate func updateGradientBackground() {
let sortedViews = segmentedControl.subviews.sorted( by: { $0.frame.origin.x < $1.frame.origin.x } )
for (_, view) in sortedViews.enumerated() {
// let gradientImage = gradient(size: segmentedControl.frame.size, color: [UIColor.cyan,UIColor.blue])!
view.backgroundColor = UIColor(patternImage: UIImage(named: "segmentedRectangle.png")!)
view.tintColor = UIColor.clear
}
}
I am expecting only one segment to be of the segmentedRectangle.png image color but it is displaying on the entire segmented control like this.
Try this code, I put comments on relevant parts. Let me know if you need more explanation.
let segmentedControl: UISegmentedControl = {
let view = UISegmentedControl(items: ["Pounds", "Kilograms"])
view.selectedSegmentIndex = 0
view.tintColor = .black
view.backgroundColor = .white
view.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width - 40, height: 20)
/// Gradient
let gradient = CAGradientLayer()
gradient.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width - 40, height: 20)
let leftColor = UIColor.red
let rightColor = UIColor.purple
gradient.colors = [leftColor.cgColor, rightColor.cgColor]
gradient.startPoint = CGPoint(x: 0, y: 0.5)
gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
/// Create gradient image
UIGraphicsBeginImageContext(gradient.frame.size)
gradient.render(in: UIGraphicsGetCurrentContext()!)
let segmentedControlImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
// Normal Image
let rect: CGRect = CGRect(x: 0, y: 0, width: 1, height: 1)
UIGraphicsBeginImageContext(rect.size);
let context:CGContext = UIGraphicsGetCurrentContext()!;
context.setFillColor(UIColor.white.cgColor)
context.fill(rect)
let normalImage:UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
/// Set segmentedControl image
view.setBackgroundImage(normalImage, for: .normal, barMetrics: .default)
view.setBackgroundImage(segmentedControlImage, for: .selected, barMetrics: .default)
return view
}()
Usage:
On your ViewDidLoad set navigationItem title view as your segmented control like so:-
self.navigationItem.titleView = segmentedControl
I think with few modifications/custominization you can get want you want, Cheers :)
StoryBoard/InterfaceBuilder
Just call this inside your ViewDidLoad and pass your outlet name on the function call: -
func configureSegementedControl(segmentedControl: UISegmentedControl) {
segmentedControl.selectedSegmentIndex = 0
segmentedControl.tintColor = .black
segmentedControl.backgroundColor = .white
segmentedControl.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width - 40, height: 20)
/// Gradient
let gradient = CAGradientLayer()
gradient.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width - 40, height: 20)
let leftColor = UIColor.red
let rightColor = UIColor.purple
gradient.colors = [leftColor.cgColor, rightColor.cgColor]
gradient.startPoint = CGPoint(x: 0, y: 0.5)
gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
/// Create gradient image
UIGraphicsBeginImageContext(gradient.frame.size)
gradient.render(in: UIGraphicsGetCurrentContext()!)
let segmentedControlImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
// Normal Image
let rect: CGRect = CGRect(x: 0, y: 0, width: 1, height: 1)
UIGraphicsBeginImageContext(rect.size);
let context:CGContext = UIGraphicsGetCurrentContext()!;
context.setFillColor(UIColor.white.cgColor)
context.fill(rect)
let normalImage:UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
/// Set segmentedControl image
segmentedControl.setBackgroundImage(normalImage, for: .normal, barMetrics: .default)
segmentedControl.setBackgroundImage(segmentedControlImage, for: .selected, barMetrics: .default)
}
Hello i try to render two labels in one CGContext to get an UIImage - one above the other. However the code is ignoring the origins of the CGRects. Can anyone point me in the right direction?
// frames with positions and bounds
let frame = CGRect(x: 0, y: 0, width: 64, height: 64)
let upperFrame = CGRect(x: 0, y: 0, width: 64, height: 40)
let lowerFrame = CGRect(x: 0, y: 40, width: 64, height: 24)
// settings of lower label
let lowerLabel = UILabel(frame: lowerFrame)
lowerLabel.textAlignment = .center
lowerLabel.backgroundColor = UIColor.init(red: 1.0, green: 1.0, blue: 1.0, alpha: 0.0)
lowerLabel.textColor = .black
lowerLabel.font = nameLabel.font.withSize(15.0)
lowerLabel.adjustsFontSizeToFitWidth = true
lowerLabel.minimumScaleFactor = 1.0/nameLabel.font.pointSize
lowerLabel.text = "Monatsende"
// settings of upper label
let upperLabel = UILabel(frame: upperFrame)
upperLabel.textAlignment = .center
upperLabel.backgroundColor = UIColor.init(red: 1.0, green: 1.0, blue: 1.0, alpha: 0.0)
upperLabel.textColor = .black
upperLabel.font = upperLabel.font.withSize(15.0)
upperLabel.adjustsFontSizeToFitWidth = true
upperLabel.minimumScaleFactor = 1.0/upperLabel.font.pointSize
upperLabel.text = "2500 €"
// draw alltogether
UIGraphicsBeginImageContext(frame.size)
if let currentContext = UIGraphicsGetCurrentContext() {
lowerlabel.layer.render(in: currentContext)
upperLabel.layer.render(in: currentContext)
let image = UIGraphicsGetImageFromCurrentImageContext()
return image
}
the result is, that both labels are overlapping each other:
as i understand it the two labels should be clearly distinguishable from one another.
I want to display a little circle point as indicator to the selected UITabBarItem. How can i do this?
I use a custom UITabBarController. It looks like this:
import UIKit
class EventTabBar: UITabBarController {
override func awakeFromNib() {
tabBar.barTintColor = UIColor.white
tabBar.tintColor = UIColor(red: 79/255, green: 122/255, blue: 198/255, alpha: 1)
tabBar.unselectedItemTintColor = UIColor(red: 198/255, green: 203/255, blue: 209/255, alpha: 1)
tabBar.isTranslucent = false
tabBar.shadowImage = UIImage()
tabBar.backgroundImage = UIImage()
//Add Shadow to TabBar
tabBar.layer.shadowOpacity = 0.12
tabBar.layer.shadowOffset = CGSize(width: 0, height: 2)
tabBar.layer.shadowRadius = 8
tabBar.layer.shadowColor = UIColor.black.cgColor
tabBar.layer.masksToBounds = false
}
}
Can i use the selectionIndicatorImage to do this?
Hope you can help me. Thanks for your answer
let size = CGSize(width: tabController.tabBar.frame.width / (amount of items),
height: tabController.tabBar.frame.height)
let dotImage = UIImage().createSelectionIndicator(color: .blue, size: size, lineHeight: 7)
tabController.tabBar.selectionIndicatorImage = dotImage
-
extension UIImage {
func createSelectionIndicator(color: UIColor, size: CGSize, lineHeight: CGFloat) -> UIImage {
UIGraphicsBeginImageContextWithOptions(size, false, 0)
color.setFill()
let innerRect = CGRect(x: (size.width/2) - lineHeight/2,
y: size.height - lineHeight - 2,
width: lineHeight,
height: lineHeight)
let path = UIBezierPath(roundedRect: innerRect, cornerRadius: lineHeight/2)
path.fill()
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image!
}
}
It's pretty easy actually. TabBarButton has two properties to set image, one is TabBarItem.image and another is TabBarItem.selectedImage set an image without the circle point for TabBarItem.image property and set an image with circle point for TabBarItem.selectedImage property.
If you want to set only the circle point for selected state, set the normal image property to UIImage(). Hope this solves the problem.
scanTabBarItem.image = UIImage.fontAwesomeIcon(name: .qrcode, textColor: .white, size: CGSize(width: 30, height: 30))
scanTabBarItem.selectedImage = UIImage.fontAwesomeIcon(name: .addressBook, textColor: .white, size: CGSize(width: 30, height: 30))
if not to show any image normally,
scanTabBarItem.image = UIImage()
I am trying to make scroll view with gradient background color, but it shows me gradient color only and could not see scroll view! No error waning.
mainScrollView.frame = view.frame
imageArray = [#imageLiteral(resourceName: "business-improvement"), #imageLiteral(resourceName: "IMG_3601"), #imageLiteral(resourceName: "IMG_4261"), #imageLiteral(resourceName: "IMG_4264")]
for i in 0..<imageArray.count{
let imageView = UIImageView()
imageView.image = imageArray[i]
imageView.contentMode = .scaleAspectFit
let xPosition = self.view.frame.width * CGFloat(i)
imageView.frame = CGRect(x: xPosition, y:0, width: self.mainScrollView.frame.width, height: self.mainScrollView.frame.height)
let mainScrollView = CAGradientLayer()
self.view.backgroundColor = UIColor(red: 0.01, green:0.34, blue: 0.38, alpha: 1.0)
mainScrollView.frame = self.view.bounds
let color1 = UIColor(red: 0.11, green:0.04, blue: 0.32, alpha: 1.0).cgColor
let color2 = UIColor(red: 0.0, green:0.18, blue: 0.20, alpha: 1.0).cgColor
mainScrollView.colors = [color1, color2]
mainScrollView.frame = CGRect(x: 0, y: 0, width: 375, height: 690)
self.view.layer.addSublayer(mainScrollView)
I try the same and this works for me :
self.MyItem.applyGradient_2(colours: [UIColor(red:0.09, green:0.91, blue:0.65, alpha:1.0), UIColor(red:0.08, green:0.92, blue:0.43, alpha:1.0)])
extension UIView {
func applyGradient_2(colours: [UIColor]) -> Void {
self.applyGradient_(colours: colours, locations: nil)
}
func applyGradient_(colours: [UIColor], locations: [NSNumber]?) -> Void {
let gradient: CAGradientLayer = CAGradientLayer()
gradient.frame = self.bounds
gradient.colors = colours.map { $0.cgColor }
gradient.locations = locations
self.layer.insertSublayer(gradient, at: 0)
}
}
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: