＊Swift5, Xcode ver 12.1
I wrote how to make gradient Button, Text and View in Swift. It also describes the measures to be taken when the gradation is applied on the iPhone12 Pro Max and it cuts off in the middle.
Apply gradient
let background1 = UIColor.blue
let background2 = UIColor.yellow
let gradientLayer:CAGradientLayer = CAGradientLayer()
gradientLayer.colors = [background1.withAlphaComponent(1.0).cgColor,
background2.withAlphaComponent(1.0).cgColor]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)Basically, it seems good to use this code to make View, Button, and text gradation. Let’s get started!!!
Make a gradient button
Let’s make a gradation button right away! Let’s write the code below.
Since the color is specified by the color code, if you want to use the code as it is, proceed to “Specify the color by the color code” from the article below and create a swift file.
If you are tired of such things, please rewrite the code…
import UIKit
class GradientViewController: UIViewController {
@IBOutlet weak var button: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
// background1 = UIColor.blue
// background2 = UIColor.yellow
let buttonTextColor = UIColor(hex: "7B61F8", alpha: 1.0)
let background1 = UIColor(hex: "00FECA", alpha: 1.0)
let background2 = UIColor(hex: "FDF200", alpha: 1.0)
let gradientLayer:CAGradientLayer = CAGradientLayer()
gradientLayer.cornerRadius = 13
gradientLayer.frame.size = button.frame.size
gradientLayer.colors = [background1.withAlphaComponent(1.0).cgColor,
background2.withAlphaComponent(1.0).cgColor]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
button.layer.addSublayer(gradientLayer)
button.titleLabel?.font = UIFont(name: "HelveticaNeue-Bold", size: 25)
button.setTitle("Button", for: .normal)
button.setTitleColor(buttonTextColor, for: .normal)
}
}
If the gradation is dull like the image below? Did you get black? Isn’t this code used for gradation?
gradientLayer.colors = [background1,background2.cgColor]If the above code or other than the above code turns black, try the code below.
gradientLayer.colors = [background1.withAlphaComponent(1.0).cgColor,
background2.withAlphaComponent(1.0).cgColor]Then, you should be able to create the desired color gradation as shown in the image below.
Cover the image with a gradient
I tried to make the Label easier to read by covering the beach image with a black gradation. I don’t know now, but there was a time when Airbnb and Tinder were showing something like this. Also, if you want to insert a few lines of introductory text in textView, you should be able to expand the black gradation area.
The method can be done with the code below in the same way as the button gradation, but when building with iphone12 Pro Max, the right side is cut off in the middle as shown in the image below.
Even if I compared the vertical and horizontal sizes of the gradation view and imageView with print, the numbers were the same, so I was worried.
let gradientLayer1 = CAGradientLayer()
let imageGradient1 = UIColor(hex: "333333", alpha: 1.0)
let imageGradient2 = UIColor(hex: "333333", alpha: 1.0)
imageView.image = UIImage(named: "maarten-van-den-heuvel-Siuwr3uCir0-unsplash.jpg")
gradientLayer1.colors = [imageGradient1.withAlphaComponent(0.0).cgColor,
imageGradient2.withAlphaComponent(1.0).cgColor]
gradientLayer1.startPoint = CGPoint(x: 0.0, y: 0.6)
gradientLayer1.endPoint = CGPoint(x: 0.0, y: 1.0)
imageView.layer.addSublayer(gradientLayer1)
gradientLayer1.frame = imageView.frame
label.text = "Beach"Left: iPhone12 Pro Max Right: iPhone11
This time, I used Auto Layout to set the top and left and right of the imageView to 0 with Constraints, set the aspect ratio to 3: 4, and placed the image. When I investigated, it was a problem of Auto Layout, and if I set it with Auto Layout, the size should be changed automatically depending on the model, but CALayer seems to be the same, so this seems to happen. There seem to be three ways to avoid this. I will try one of them. Is the image like calling the gradation once and then calling it again?*I’m sorry if my understanding is wrong!
First of all, this code
let gradientLayer1: CAGradientLayer = {
let gradientLayer1 = CAGradientLayer()
return gradientLayer1
}()And add this code
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
gradientLayer1.frame = imageView.frame
}All
import UIKit
class GradientViewController: UIViewController {
let gradientLayer1: CAGradientLayer = {
let gradientLayer1 = CAGradientLayer()
return gradientLayer1
}()
@IBOutlet weak var label: UILabel!
@IBOutlet weak var imageView: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
let imageGradient1 = UIColor(hex: "333333", alpha: 1.0)
let imageGradient2 = UIColor(hex: "333333", alpha: 1.0)
imageView.image = UIImage(named: "maarten-van-den-heuvel-Siuwr3uCir0-unsplash.jpg")
// Apply Gradient Color
gradientLayer1.colors = [imageGradient1.withAlphaComponent(0.0).cgColor,
imageGradient2.withAlphaComponent(1.0).cgColor]
gradientLayer1.startPoint = CGPoint(x: 0.0, y: 0.6)
gradientLayer1.endPoint = CGPoint(x: 0.0, y: 1.0)
imageView.layer.addSublayer(gradientLayer1)
gradientLayer1.frame = imageView.frame
label.text = "Beach"
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
gradientLayer1.frame = imageView.frame
}
}
Then, even iPhone12 Pro Max was shown to the corner
Referenced sites
Make gradient text
Basically, what you do is the same as for the gradation button. The difference is that the Label is placed on top of the gradient view and masked.
import UIKit
class GradientViewController: UIViewController {
@IBOutlet weak var labelView: UIView!
@IBOutlet weak var gradientLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
gradientLabel.text = "foo bar baz"
let background3 = UIColor(hex: "FF85EA", alpha: 1.0)
let background4 = UIColor(hex: "7B61F8", alpha: 1.0)
let gradientLayer3:CAGradientLayer = CAGradientLayer()
gradientLayer3.frame = labelView.bounds
gradientLayer3.colors = [background3.withAlphaComponent(1.0).cgColor,
background4.withAlphaComponent(1.0).cgColor]
gradientLayer3.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer3.endPoint = CGPoint(x: 1.0, y: 0.0)
labelView.layer.addSublayer(gradientLayer3)
labelView.mask = gradientLabel
}
}
Completed
All code
import UIKit
class GradientViewController: UIViewController {
let gradientLayer1: CAGradientLayer = {
let gradientLayer1 = CAGradientLayer()
return gradientLayer1
}()
@IBOutlet weak var label: UILabel!
@IBOutlet weak var button: UIButton!
@IBOutlet weak var imageView: UIImageView!
@IBOutlet weak var labelView: UIView!
@IBOutlet weak var gradientLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
/// Image
let imageGradient1 = UIColor(hex: "333333", alpha: 1.0)
let imageGradient2 = UIColor(hex: "333333", alpha: 1.0)
imageView.image = UIImage(named: "Beach")
gradientLayer1.colors = [imageGradient1.withAlphaComponent(0.0).cgColor,
imageGradient2.withAlphaComponent(1.0).cgColor]
gradientLayer1.startPoint = CGPoint(x: 0.0, y: 0.6)
gradientLayer1.endPoint = CGPoint(x: 0.0, y: 1.0)
imageView.layer.addSublayer(gradientLayer1)
gradientLayer1.frame = imageView.frame
label.text = "Beach"
///Button
let buttonTextColor = UIColor(hex: "7B61F8", alpha: 1.0)
let background1 = UIColor(hex: "00FECA", alpha: 1.0)
let background2 = UIColor(hex: "FDF200", alpha: 1.0)
// Apply Gradient Color
let gradientLayer:CAGradientLayer = CAGradientLayer()
gradientLayer.cornerRadius = 13
gradientLayer.frame.size = button.frame.size
gradientLayer.colors = [background1.withAlphaComponent(1.0).cgColor,
background2.withAlphaComponent(1.0).cgColor]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
button.layer.addSublayer(gradientLayer)
button.titleLabel?.font = UIFont(name: "HelveticaNeue-Bold", size: 25)
button.setTitle("Button", for: .normal)
button.setTitleColor(buttonTextColor, for: .normal)
///Label
gradientLabel.text = "foo bar baz"
let background3 = UIColor(hex: "FF85EA", alpha: 1.0)
let background4 = UIColor(hex: "7B61F8", alpha: 1.0)
let gradientLayer3:CAGradientLayer = CAGradientLayer()
gradientLayer3.frame = labelView.bounds
gradientLayer3.colors = [background3.withAlphaComponent(1.0).cgColor,
background4.withAlphaComponent(1.0).cgColor]
gradientLayer3.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer3.endPoint = CGPoint(x: 1.0, y: 0.0)
labelView.layer.addSublayer(gradientLayer3)
labelView.mask = gradientLabel
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
gradientLayer1.frame = imageView.frame
}
}
If you find it helpful, please like one button! !! 😉
コメント