Two separate background colors for top and bottom view controller

huangapple go评论65阅读模式
英文:

Two separate background colors for top and bottom view controller

问题

Sure, here is the translated content:

问题:

我想通过编程方式为视图控制器设置两种不同的背景颜色。

代码:

self.view.backgroundColor = .systemBackground

或者

func setGradientBackground() {
        
        let colorTop = UIColor.black.cgColor
        let colorBottom = backgroundGray.cgColor
                 
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [colorTop, colorBottom]
        gradientLayer.startPoint = CGPoint(x: 0, y: 0)
        gradientLayer.endPoint = CGPoint(x: 1, y: -1)
        //gradientLayer.locations = [0.0, 1.0]
        gradientLayer.frame = self.view.bounds
                 
        self.view.layer.insertSublayer(gradientLayer, at:0)
    }

我需要使用渐变系统来实现吗?渐变系统具有渐变效果,我更希望顶部和底部有固定的颜色。

我如何获得下面图像的所需输出
Two separate background colors for top and bottom view controller

英文:

Problem:

I would like to set two different background colors for a view controller programmatically.

Code:

self.view.backgroundColor = .systemBackground

or

func setGradientBackground() {
        
        let colorTop = UIColor.black.cgColor
        let colorBottom = backgroundGray.cgColor
                 
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [colorTop, colorBottom]
        gradientLayer.startPoint = CGPoint(x: 0, y: 0)
        gradientLayer.endPoint = CGPoint(x: 1, y: -1)
        //gradientLayer.locations = [0.0, 1.0]
        gradientLayer.frame = self.view.bounds
                 
        self.view.layer.insertSublayer(gradientLayer, at:0)
    }

Do I need to use a gradient system to obtain this? The gradient system is well gradient and I would like more of a solid top and bottom color.

How can I obtain the desired output of the image below
Two separate background colors for top and bottom view controller

答案1

得分: 2

根据这个答案 https://stackoverflow.com/questions/24380535/how-to-apply-gradient-to-background-view-of-ios-swift-app

我修改了 CAGradientLayer#locationsCAGradientLayer#colors 以提供颜色之间的 "硬" 停止

import UIKit
import PlaygroundSupport

PlaygroundPage.current.needsIndefiniteExecution = true

var greeting = "Hello, playground"

class Gradient: UIView {
    var startColor: UIColor = .white { didSet { updateColors() }}
    var endColor: UIColor = .red { didSet { updateColors() }}
    
    override class var layerClass: AnyClass { CAGradientLayer.self }
    
    var gradientLayer: CAGradientLayer { layer as! CAGradientLayer }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }

    private func commonInit() {
        updatePoints()
        updateLocations()
        updateColors()
    }
    
    func updatePoints() {
        gradientLayer.startPoint = diagonalMode ? .init(x: 1, y: 0) : .init(x: 0, y: 0.5)
        gradientLayer.endPoint   = diagonalMode ? .init(x: 0, y: 1) : .init(x: 1, y: 0.5)
    }

    func updateLocations() {
        gradientLayer.locations = [0, 0.5, 0.5, 1.0]
    }

    func updateColors() {
        gradientLayer.colors = [startColor.cgColor, startColor.cgColor, endColor.cgColor, endColor.cgColor]
    }
}

let view = Gradient(frame: CGRect(x: 0, y: 0, width: 400, height: 400))

我也考虑创建一个复合/组合视图,其中有两个视图来管理背景颜色,第三个视图覆盖在它们之上,充当 "内容" 视图。虽然这需要一些更多的操作。

英文:

So, based on this answer https://stackoverflow.com/questions/24380535/how-to-apply-gradient-to-background-view-of-ios-swift-app

I modified the CAGradientLayer#locations and CAGradientLayer#colors to provide a "hard" stop between the colors

Two separate background colors for top and bottom view controller

import UIKit
import PlaygroundSupport

PlaygroundPage.current.needsIndefiniteExecution = true

var greeting = "Hello, playground"

class Gradient: UIView {
    var startColor:   UIColor = .white { didSet { updateColors() }}
    var endColor:     UIColor = .red { didSet { updateColors() }}
    
    override class var layerClass: AnyClass { CAGradientLayer.self }
    
    var gradientLayer: CAGradientLayer { layer as! CAGradientLayer }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }

    private func commonInit() {
        updatePoints()
        updateLocations()
        updateColors()
    }
    
    func updatePoints() {
        gradientLayer.startPoint = diagonalMode ? .init(x: 1, y: 0) : .init(x: 0, y: 0.5)
        gradientLayer.endPoint   = diagonalMode ? .init(x: 0, y: 1) : .init(x: 1, y: 0.5)
    }

    func updateLocations() {
        gradientLayer.locations = [0, 0.5, 0.5, 1.0]
    }

    func updateColors() {
        gradientLayer.colors = [startColor.cgColor, startColor.cgColor, endColor.cgColor, endColor.cgColor]
    }
}

let view = Gradient(frame: CGRect(x: 0, y: 0, width: 400, height: 400))

I might also consider devising a composite/compund view, one which had two views to manage the background color and a third which was laid over the top of them, which acted as the "content" view. It would require a little bit more juggling though.

huangapple
  • 本文由 发表于 2023年6月6日 05:49:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/76410215.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定