Draw a gradient with CAGradientLayer

I had the opportunity to draw a gradient in UIView using CAGradientLayer I briefly summarized the mounting method.

Prerequisite knowledge

startPoint ・ ・ ・ Start point of gradation endPoint ・ ・ ・ End point of gradation

When startPoint and endPoint are not specified

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        setGradation()
    }

    private func setGradation() {
        let gradientLayer = CAGradientLayer()
     //Specify the range to be gradation to the view size of UIViewController
        gradientLayer.frame.size = self.view.frame.size
        gradientLayer.colors = [UIColor.green.cgColor, UIColor.white.cgColor]
        self.view.layer.addSublayer(gradientLayer)
    }
}

The default values ​​of startPoint and endPoint of the gradation are as follows (gradient from top center to bottom center)

startPoint endPoint
CGPoint(x: 0.5, y: 0.0) CGPoint(x: 0.5, y: 1.0)

It is drawn as follows.

When specifying startPoint and endPoint

As mentioned above, the values ​​of startPoint and endPoint of the gradation are set by default, but you can also specify them. In the code below startPoint: CGPoint (x: 0.0, y: 1.0) (lower left) endPoint: CGPoint (x: 1.0, y: 0.0) (upper right) Therefore, it will be drawn as shown in the capture below.

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        setGradation()
    }

    private func setGradation() {
        let gradientLayer = CAGradientLayer()
     //Specify the range to be gradation to the view size of UIViewController
        gradientLayer.frame.size = self.view.frame.size
        gradientLayer.colors = [UIColor.blue.cgColor, UIColor.white.cgColor]
        gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
        gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
        self.view.layer.addSublayer(gradientLayer)
    }
}

Recommended Posts

Draw a gradient with CAGradientLayer
Draw a pie chart with Chart.js
Draw a graph with Sinatra and Chartkick
[Swift 5] Draw a line.
Create a playground with Xcode 12
[Java] Draw a simple pattern
A story stuck with NotSerializableException
Logic to draw a circle with ASCII art on the console
Draw screen with Thymeleaf in SpringBoot
Create a Vue3 environment with Docker!
Deploy a Docker application with Greengrass
Make a digging maze with Ruby2D
Write a Reactive server with Micronaut
Build a Node.js environment with Docker
[Question] Draw a diamond in a rectangle
Build a Tomcat 8.5 environment with Pleiades 4.8
Make a slideshow tool with JavaFX
Conditional branching with a flowing interface
Throw a PATCH request with HttpURLConnection
Launch a stub server with WireMock
[Rails] Creating a new project with rails new
I made a GUI with Swing
Make a Christmas tree with swift
Creating a timer app with a muddy
Make a garbage reminder with line-bot-sdk-java
Build a web application with Javalin
Make a list map with LazyMap
Operate a honeypot (Dionaea) with Docker
Exception handling with a fluid interface
Create exceptions with a fluid interface
Create a Maven project with a command
A memorandum with NTP (chrony) set
Make a typing game with ruby