How we can set gradient colour in UIButton using swift?
I have tried this:
func addGradient(btn : UIButton){
let color1 = UIColor(red: 221.0/255, green: 96.0/255, blue: 129.0/255, alpha: 1.0).cgColor
let color2 = UIColor(red: 171.0/255, green: 74.0/255, blue: 141.0/255, alpha: 1.0).cgColor
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [color2,color1 ]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.6)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.6)
btn.layer.insertSublayer(gradientLayer, at: 0)
}
it's not working properly.
Try below code hope it will fix your issue:
Uses:
override func viewDidAppear(_ animated: Bool) {
yesBtn.clipsToBounds = true
yesBtn.addGradient(btn: yesBtn)
}
Extension:
func addGradient(btn : UIButton){
let color1 = UIColor(red: 221.0/255, green: 96.0/255, blue: 129.0/255, alpha: 1.0).cgColor
let color2 = UIColor(red: 171.0/255, green: 74.0/255, blue: 141.0/255, alpha: 1.0).cgColor
let gradientLayer = CAGradientLayer()
gradientLayer.frame = btn.bounds
gradientLayer.colors = [color2,color1 ]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.6)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.6)
btn.layer.insertSublayer(gradientLayer, at: 0)
}
Related
I'm setting the image of the navigation bar to a gradient. This works perfectly on all models except for iPhone 12 mini.
I've tried calling this on my main view controller in ViewWillAppear, viewDidAppear, and ViewDidLoad
Here's what it looks like on all other models
func setNavGradiant(){
guard let navigationController = self.navigationController else {print("❇️♊️>>>\(#file) \(#line): guard let failed<<<"); return}
let gradientLayer = CAGradientLayer()
var updatedFrame = navigationController.navigationBar.bounds
updatedFrame.size.height += UIApplication.shared.windows[0].windowScene?.statusBarManager?.statusBarFrame.height ?? 0
gradientLayer.frame = updatedFrame
gradientLayer.colors = [ #colorLiteral(red: 0.4392156899, green: 0.01176470611, blue: 0.1921568662, alpha: 1).cgColor, #colorLiteral(red: 0.2196078449, green: 0.007843137719, blue: 0.8549019694, alpha: 1).cgColor] // start color and end color
gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.0) // vertical gradient start
gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0)
UIGraphicsBeginImageContext(gradientLayer.bounds.size)
gradientLayer.render(in: UIGraphicsGetCurrentContext()!)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
self.navigationController?.navigationBar.setBackgroundImage(image, for: UIBarMetrics.default)
self.navigationController?.navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor(#colorLiteral(red: 0.9579688907, green: 0.9579688907, blue: 0.9579688907, alpha: 1))]
}
You will probably have better results by subclassing UINavigationController:
class MyNavigationController: UINavigationController {
let gradient = CAGradientLayer()
override func viewDidLoad() {
super.viewDidLoad()
gradient.frame = navigationBar.bounds
gradient.colors = [ #colorLiteral(red: 0.4392156899, green: 0.01176470611, blue: 0.1921568662, alpha: 1).cgColor, #colorLiteral(red: 0.2196078449, green: 0.007843137719, blue: 0.8549019694, alpha: 1).cgColor] // start color and end color
gradient.startPoint = CGPoint(x: 0.5, y: 0.0) // vertical gradient start
gradient.endPoint = CGPoint(x: 0.5, y: 1.0)
if let image = getImageFrom(gradientLayer: gradient) {
navigationBar.setBackgroundImage(image, for: UIBarMetrics.default)
}
}
func getImageFrom(gradientLayer:CAGradientLayer) -> UIImage? {
var gradientImage:UIImage?
UIGraphicsBeginImageContext(gradientLayer.frame.size)
if let context = UIGraphicsGetCurrentContext() {
gradientLayer.render(in: context)
gradientImage = UIGraphicsGetImageFromCurrentImageContext()?.resizableImage(withCapInsets: UIEdgeInsets.zero, resizingMode: .stretch)
}
UIGraphicsEndImageContext()
return gradientImage
}
}
Try calling:
DispatchQueue.main.async {
self.setNeedsStatusBarAppearanceUpdate()
}
after your setup is done. Should work without dispatching to main thread, but I had previously caught issues of things called from lifecycle methods not being on the main thread. So another thing to check is to make sure you are running the updates on the main thread.
I would like to add gradient layer to my navbar, but after I add it, layer hides my title, like its behind that new sublayer.
override func viewDidLoad() {
super.viewDidLoad()
self.title = "My Trips"
self.navigationController?.navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor:UIColor.white]
//self.navigationController?.navigationBar.layer.addSublayer(gradientLayer)
self.navigationController?.navigationBar.layer.insertSublayer(gradientLayer, at: 1)
setupGradient()
}
let gradientLayer = CAGradientLayer()
func setupGradient() {
gradientLayer.colors = [
UIColor(red: 0.259, green: 0.188, blue: 0.475, alpha: 1).cgColor,
UIColor(red: 0.11, green: 0.024, blue: 0.369, alpha: 1).cgColor
]
gradientLayer.locations = [0, 1]
gradientLayer.startPoint = CGPoint(x: 0.25, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 0.75, y: 0.5)
gradientLayer.transform = CATransform3DMakeAffineTransform(CGAffineTransform(a: 0, b: 0.58, c: -0.58, d: 0, tx: 0.5, ty: 0))
gradientLayer.bounds = (self.navigationController?.navigationBar.bounds.insetBy(dx: -0.01*view.bounds.size.width, dy: -1*view.bounds.size.height))!
}
Use this line for inserting layer.
self.navigationController?.navigationBar.subviews.first?.layer.insertSublayer(gradientLayer, at: 0)
When I run the app the gradient layer frame doesn't match with UIView frame. I tried with below code:
let color1 = UIColor(red: 20.0/255, green: 43.0/255, blue: 81.0/255, alpha: 1.0).cgColor
let color2 = UIColor(red: 149.0/255, green: 45.0/255, blue: 122.0/255, alpha: 1.0).cgColor
let gradientLayer = CAGradientLayer()
gradientLayer.frame = self.backBarcodeSrch.bounds
gradientLayer.colors = [color1,color2 ]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.6)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.6)
self.backBarcodeSrch.layer.addSublayer(gradientLayer)
Update the frame of gradientLayer in viewDidLayoutSubviews() in your ViewController.
class VC: UIViewController {
var gradientLayer = CAGradientLayer()
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
gradientLayer.frame = self.backBarcodeSrch.bounds
}
override func viewDidLoad() {
super.viewDidLoad()
self.addGradient()
}
func addGradient() {
let color1 = UIColor(red: 20.0/255, green: 43.0/255, blue: 81.0/255, alpha: 1.0).cgColor
let color2 = UIColor(red: 149.0/255, green: 45.0/255, blue: 122.0/255, alpha: 1.0).cgColor
gradientLayer.frame = self.backBarcodeSrch.bounds
gradientLayer.colors = [color1,color2 ]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.6)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.6)
self.backBarcodeSrch.layer.addSublayer(gradientLayer)
}
}
try this :
func addGradientLayer() {
let color1 = UIColor(red: 20.0/255, green: 43.0/255, blue: 81.0/255, alpha:1.0).cgColor
let color2 = UIColor(red: 149.0/255, green: 45.0/255, blue: 122.0/255, alpha: 1.0).cgColor
let gradientLayer = CAGradientLayer()
gradientLayer.frame = self.backBarcodeSrch.bounds
gradientLayer.colors = [color1,color2 ]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.6)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.6)
self.backBarcodeSrch.layer.addSublayer(gradientLayer)
}
override func viewDidLayoutSubviews() {
addGradientLayer()
}
I'm trying to apply gradient background to a UITextView object, not sure if it's possible because I get white background instead.
Here is my UIView extension:
extension UIView{
func setTextGradient(startColor:UIColor,endColor:UIColor)
{
let gradient:CAGradientLayer = CAGradientLayer()
gradient.colors = [startColor.cgColor, endColor.cgColor]
gradient.locations = [0.0 , 1.0]
gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
gradient.endPoint = CGPoint(x: 0.0, y: 1.0)
gradient.frame = self.bounds
self.layer.insertSublayer(gradient, at: 0)
}
Here where I assign gradient to the text view:
detailTxtView.translatesAutoresizingMaskIntoConstraints = false
detailTxtView.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
detailTxtView.rightAnchor.constraint(equalTo: self.rightAnchor, constant: -8).isActive = true
detailTxtView.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 8).isActive = true
detailTxtView.heightAnchor.constraint(equalTo: self.heightAnchor, multiplier: 0.5).isActive = true
detailTxtView.setTextGradient(startColor: Constants.Colors.bluLight, endColor: Constants.Colors.silver)
// Set up text
let attributedTxt = NSMutableAttributedString(string: titleStr, attributes:[NSFontAttributeName: UIFont(name: "Jazeel-Bold", size: 24)!, NSForegroundColorAttributeName: Constants.Colors.bluLight])
attributedTxt.append(NSAttributedString(string: "\n\n\(detailStr)", attributes:[NSFontAttributeName: UIFont(name: "HacenTunisia", size: 20)!, NSForegroundColorAttributeName: Constants.Colors.aluminum]))
let txtStyle = NSMutableParagraphStyle()
txtStyle.alignment = .center
let length = attributedTxt.string.count
attributedTxt.addAttribute(NSParagraphStyleAttributeName, value: txtStyle, range: NSRange(location: 0, length: length))
detailTxtView.attributedText = attributedTxt
Here are the colors in the Constants class:
struct Colors{
static let bluDark = UIColor(colorLiteralRed: 51/255, green: 50/255, blue: 80/255, alpha: 1)
static let bluLight = UIColor(colorLiteralRed: 68/255, green: 85/255, blue: 138/255, alpha: 1)
static let greenLight = UIColor(colorLiteralRed: 200/255, green: 255/255, blue: 132/255, alpha: 1)
static let mercury = UIColor(colorLiteralRed: 235/255, green: 235/255, blue: 235/255, alpha: 1)
static let silver = UIColor(colorLiteralRed: 214/255, green: 214/255, blue: 214/255, alpha: 1)
static let magnesium = UIColor(colorLiteralRed: 192/255, green: 192/255, blue: 192/255, alpha: 1)
static let aluminum = UIColor(colorLiteralRed: 169/255, green: 169/255, blue: 169/255, alpha: 1)
static let blu2 = UIColor(colorLiteralRed: 88/255, green: 120/255, blue: 166/255, alpha: 0.2)
static let bluLighter = #colorLiteral(red: 0.451, green: 0.5569, blue: 0.8314, alpha: 1) /* #738ed4 */
}
I always get white background when using the gradient method. Appreciate any suggestions.
i think you forget location
extension UIView
{
func setGradient(startColor:UIColor,endColor:UIColor)
{
let gradient:CAGradientLayer = CAGradientLayer()
gradient.colors = [startColor.cgColor, endColor.cgColor]
gradient.locations = [0.0 , 1.0]
gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
gradient.endPoint = CGPoint(x: 0.0, y: 1.0)
gradient.frame = self.bounds
self.layer.insertSublayer(gradient, at: 0)
}
}
use
txtView.setGradient(startColor: UIColor.blue, endColor: UIColor.green)
Output:
You need to use locations property of CAGradientLayer
extension UIView{
func setGriadientBackrnd(color1: UIColor, color2: UIColor){
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
gradientLayer.colors = [color1.cgColor, color2.cgColor]
gradientLayer.locations = [0.5 , 0.5] //here you can set percentage of color part are display betwin 0 to 1
layer.insertSublayer(gradientLayer, at: 0)
}
}
Please check your code Output
Hi Folk try like that hope you helps,
let titleStr = "Hi How are you ?"
let detailStr = "HI How UR preparation..."
gradientTextview.translatesAutoresizingMaskIntoConstraints = false
gradientTextview.bottomAnchor.constraint(equalTo:self.view.bottomAnchor).isActive = true
gradientTextview.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: -8).isActive = true
gradientTextview.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 8).isActive = true
gradientTextview.heightAnchor.constraint(equalTo: self.view.heightAnchor, multiplier: 0.5).isActive = true
gradientTextview.setGradient(startColor: UIColor(colorLiteralRed: 68/255, green: 85/255, blue: 138/255, alpha: 1), endColor: UIColor(colorLiteralRed: 214/255, green: 214/255, blue: 214/255, alpha: 1))
let attributedTxt = NSMutableAttributedString(string: titleStr, attributes:[NSFontAttributeName: UIFont (name: "HelveticaNeue-Bold", size: 20)! , NSForegroundColorAttributeName: UIColor(colorLiteralRed: 68/255, green: 85/255, blue: 138/255, alpha: 1)])
attributedTxt.append(NSAttributedString(string: "\n\n\(detailStr)", attributes:[NSFontAttributeName: UIFont (name: "HelveticaNeue-Bold", size: 18)! , NSForegroundColorAttributeName:UIColor(colorLiteralRed: 169/255, green: 169/255, blue: 169/255, alpha: 1)]))
let txtStyle = NSMutableParagraphStyle()
txtStyle.alignment = .center
let length = attributedTxt.string.characters.count
attributedTxt.addAttribute(NSParagraphStyleAttributeName, value: txtStyle, range: NSRange(location: 0, length: length))
gradientTextview.attributedText = attributedTxt
===============================================================
extension UIView{
func setTextGradient(startColor:UIColor,endColor:UIColor)
{
let gradient:CAGradientLayer = CAGradientLayer()
gradient.colors = [startColor.cgColor, endColor.cgColor]
gradient.locations = [0.0 , 1.0]
gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
gradient.endPoint = CGPoint(x: 0.0, y: 1.0)
gradient.frame = self.bounds
self.layer.insertSublayer(gradient, at: 0)
}
NOTE:-
instead of view you can add self.gradientTextview also...
The gradient worked when I set it after setting text attributes
detailTxtView.attributedText = attributedTxt
detailTxtView.setTextGradient(startColor: Constants.Colors.silver, endColor: Constants.Colors.bluDark)
I have a project in Swift 3 that I am using a gradient on the view. I placed a image on the view, but it is under the gradient layer so I was going to draw the image programmatically instead of with the storyboard. I can't seem to figure out how to get the image to be centered and to aspect fit inside the bounds of the view.
What I have...
//Gradient Background
let gradientLayer = CAGradientLayer()
gradientLayer.frame = self.view.frame
gradientLayer.colors = [UIColor(red: 0/255, green: 147/255, blue: 255/255, alpha: 1.0).cgColor, UIColor(red: 162/255, green: 134/255, blue: 255/255, alpha: 1.0).cgColor]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
self.view.layer.addSublayer(gradientLayer)
//Image
let mainImage = UIImage(named:"WhiteLogoFront")
var mainImageView = UIImageView(image:mainImage)
self.view.addSubview(mainImageView)
You can try it
let mainImage = UIImage(named:"WhiteLogoFront")
var mainImageView = UIImageView(image:mainImage)
mainImageView.contentMode = .ScaleAspectFit
let gradientLayer = CAGradientLayer()
gradientLayer.frame = self.view.frame
gradientLayer.colors = [UIColor(red: 0/255, green: 147/255, blue: 255/255, alpha: 1.0).cgColor, UIColor(red: 162/255, green: 134/255, blue: 255/255, alpha: 1.0).cgColor]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
self.view.layer.addSublayer(gradientLayer)
//Image
let mainImage = UIImage(named:"WhiteLogoFront")
var mainImageView = UIImageView(image:mainImage)
mainImageView.center = self.view.cente
mainImageView.contentMode = .ScaleAspectFit
self.view.addSubview(mainImageView)
Try this one