Áp dụng nền gradient cho UIView sử dụng bố trí tự động

Question

tôi mở rộng UIView để thêm một phương pháp addGradientWithColor() để có được nền gradient:

extension UIView { 
    func addGradientWithColor() { 
    let gradient = CAGradientLayer() 
    gradient.frame = self.bounds 
    gradient.colors = [gradientEndColor.CGColor, gradientStartColor.CGColor] 
    gradient.startPoint = CGPointMake(1,0) 
    gradient.endPoint = CGPointMake(0.2,1) 
    self.layer.insertSublayer(gradient, atIndex: 0) 
    } } 

Vấn đề của tôi là khi tôi chạy chế độ phong cảnh, các UIView không kéo dài

override func viewDidLayoutSubviews() { 
    super.viewDidLayoutSubviews() 
    self.view.addGradientWithColor() } 

tôi cố gắng để gọi viewDidLayoutSubviews() nhưng nó không hoạt động đúng

Dưới đây là ảnh chụp màn hình:

sau khi gỡ bỏ viewDidLayoutSubviews()

Answer 1

Bạn có thể phân lớp phương thức draw UIView và ghi đè lên nơi bạn thêm gradient của mình.

class GradientView: UIView { 

private let gradient : CAGradientLayer = CAGradientLayer() 

override func layoutSublayers(of layer: CALayer) { 
    super.layoutSublayersOfLayer(layer) 
    self.gradient.frame = self.bounds 
} 

override public func draw(_ rect: CGRect) { 
    self.gradient.frame = self.bounds 
    self.gradient.colors = [gradientEndColor.CGColor, gradientStartColor.CGColor] 
    self.gradient.startPoint = CGPoint.init(x: 1, y: 0) 
    self.gradient.endPoint = CGPoint.init(x: 0.2, y: 1) 
    if self.gradient.superlayer == nil { 
     self.layer.insertSublayer(self.gradient, at: 0) 
    } 
} 

}

Sau khi bạn tạo UIView của bạn, bạn chỉ cần thêm những hạn chế của mình để quan điểm đó.

Answer 2

Layers không autoresize họ tự. Để khắc phục sự cố này, bạn nên thay đổi khung lớp. Đây là một cách có thể triển khai:

override func viewDidLayoutSubviews() { 
    super.viewDidLayoutSubviews() 
    //Update you're layer based on the new frame 
    self.view.addGradientWithColor() 

} 

Answer 3

bạn có thể lưu tham chiếu đến lớp và điều chỉnh khung của nó trong phương pháp xem layoutSublayersOfLayer. điều này có thể được thuê ngoài trong một lớp con UIView:

class GradientView: UIView { 

private let gradient : CAGradientLayer = CAGradientLayer() 

/** 
displays a gradient on the view 
*/ 
func addGradient() { 

    self.gradient.frame  = self.bounds 
    self.gradient.colors = [gradientEndColor.CGColor, gradientStartColor.CGColor] 
    gradient.startPoint  = CGPointMake(1,0) 
    gradient.endPoint  = CGPointMake(0.2,1)   
    self.layer.insertSublayer(self.gradient, atIndex: 0) 
} 

/** 
resizes the gradient with the view size 
*/ 
override func layoutSublayers(of layer: CALayer) { 
    super.layoutSublayers(of: layer) 
    self.gradient.frame = self.bounds 
} 
} 

Answer 4

Lấy cảm hứng từ các giải pháp ở đây, tôi đã tạo lớp sau.

ví dụ sử dụng:

// Simple usage. From clear to black. 
let gradientView1 = GradientView(colors: [.clear, .black]) 

// Tweak locations. Here the gradient from red to green will take 30% of the view. 
let gradientView2 = GradientView(colors: [.red, .green, .blue], locations: [0, 0.3, 1]) 

// Create your own gradient. 
let gradient = CAGradientLayer() 
gradient.colors = [UIColor.red.cgColor, UIColor.blue.cgColor] 
let gradientView3 = GradientView(gradient: gradient) 

Lớp:

import UIKit 

/** 
* View with a gradient layer. 
*/ 
class GradientView: UIView { 

    let gradient : CAGradientLayer 

    init(gradient: CAGradientLayer) { 
     self.gradient = gradient 
     super.init(frame: .zero) 
     self.gradient.frame = self.bounds 
     self.layer.insertSublayer(self.gradient, at: 0) 
    } 

    convenience init(colors: [UIColor], locations:[Float] = [0.0, 1.0]) { 
     let gradient = CAGradientLayer() 
     gradient.colors = colors.map { $0.cgColor } 
     gradient.locations = locations.map { NSNumber(value: $0) } 
     self.init(gradient: gradient) 
    } 

    override func layoutSublayers(of layer: CALayer) { 
     super.layoutSublayers(of: layer) 
     self.gradient.frame = self.bounds 
    } 

    required init?(coder: NSCoder) { fatalError("no init(coder:)") } 
}