0
在我的场景中,我有2个视图:第一个保存CALayer实例(条),另一个保存CAGradientLayer并放置第一个。下图描述了当前状态。在CALayers上掩蔽CAGradientLayer
但我需要这个梯度仅被施加到第一视图的杆(CALayer的)。
我还没有发现任何相关信息到我的问题。任何帮助赞赏。
在我的场景中,我有2个视图:第一个保存CALayer实例(条),另一个保存CAGradientLayer并放置第一个。下图描述了当前状态。在CALayers上掩蔽CAGradientLayer
但我需要这个梯度仅被施加到第一视图的杆(CALayer的)。
我还没有发现任何相关信息到我的问题。任何帮助赞赏。
您必须将掩膜应用于渐变。有多种方法可以解决这个问题。
您可以创建一个CAShapeLayer
,将形状图层的path
设置为条形的形状,并将渐变图层的mask
设置为该形状图层。
或者您可以摆脱酒吧层,而是使用两个渐变图层,一个用于橙色酒吧,另一个用于灰色酒吧。将两个渐变图层并排放置在子视图中,并将超级视图的图层蒙版设置为形状图层。以下是如何做到这一点。
您需要两个梯度层和形状层:
@IBDesignable
class BarGraphView : UIView {
private let orangeGradientLayer = CAGradientLayer()
private let grayGradientLayer = CAGradientLayer()
private let maskLayer = CAShapeLayer()
你还需要的条宽:
private let barWidth = CGFloat(9)
在初始化的时候,建立了梯度和添加所有子层:
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
private func commonInit() {
backgroundColor = .black
initGradientLayer(orangeGradientLayer, with: .orange)
initGradientLayer(grayGradientLayer, with: .gray)
maskLayer.strokeColor = nil
maskLayer.fillColor = UIColor.white.cgColor
layer.mask = maskLayer
}
private func initGradientLayer(_ gradientLayer: CAGradientLayer, with color: UIColor) {
gradientLayer.colors = [ color, color, color.withAlphaComponent(0.6), color ].map({ $0.cgColor })
gradientLayer.locations = [ 0.0, 0.5, 0.5, 1.0 ]
layer.addSublayer(gradientLayer)
}
在布局时间,设置梯度层的帧并设置掩模捻呃的路径。这需要一点工作,因为你不想要一个酒吧半橙和半灰。
override func layoutSubviews() {
super.layoutSubviews()
let barCount = ceil(bounds.size.width/barWidth)
let orangeBarCount = floor(barCount/2)
let grayBarCount = barCount - orangeBarCount
var grayFrame = bounds
grayFrame.size.width = grayBarCount * barWidth
grayFrame.origin.x = frame.maxX - grayFrame.size.width
grayGradientLayer.frame = grayFrame
var orangeFrame = bounds
orangeFrame.size.width -= grayFrame.size.width
orangeGradientLayer.frame = orangeFrame
maskLayer.frame = bounds
maskLayer.path = barPath()
}
private func barPath() -> CGPath {
var columnBounds = self.bounds
columnBounds.origin.x = columnBounds.maxX
columnBounds.size.width = barWidth
let path = CGMutablePath()
for datum in barData.reversed() {
columnBounds.origin.x -= barWidth
let barHeight = CGFloat(datum) * columnBounds.size.height
let barRect = columnBounds.insetBy(dx: 1, dy: (columnBounds.size.height - barHeight)/2)
path.addRoundedRect(in: barRect, cornerWidth: 2, cornerHeight: 2)
}
return path
}
let barData: [Double] = {
let count = 100
return (0 ..< count).map({ 0.5 + (1 + sin(8.0 * .pi * Double($0)/Double(count)))/4 })
}()
}
结果:
的BarGraphView
是透明的地方有没有吧。如果你想让它在黑暗背景下,把一个黑暗的观点背后,或使其黑暗的视图的子视图:
非常感谢你为这个精彩实例 – WINSergey