熒光筆：如何使用 CALayer 像熒光筆一樣調整 superview 的 alpha

Question

這些按鈕代表集合，每個集合可以...

Empty：“K7s”為空，由 K7s.alpha = 0.4 表示

Full：“Q7s”已滿，由 Q7s.alpha = 1.0 & borderWidth = 2 表示

或者

部分填充：“J7s”是一個部分填充的集合，通過添加較小的框架來表示。 我希望這個較小的框架成為一個 CALayer，它在新層的邊界內將 SuperLayer(J7s) 的 alpha 調整為 1.0。 結果將顯示為...

let highlighterLayer = CALayer()
highlighterLayer.borderWidth = 1
highlighterLayer.bounds = CGRect(x: 0, y: 0, width: buttonSize.width, height: percentHeight)
Buttons[tag].layer.addSublayer(highlighterLayer)
highlighterLayer.position = CGPoint(x: Buttons[tag].bounds.midX, y: Buttons[tag].bounds.midY)
Highlights[tag] = highlighterLayer 

Answer 1

我們不能對將“調整”超層的 alpha 的子層做任何事情。

但是，您可以添加子圖層並更改其alpha 和邊框寬度。

快速示例UIButton子類：

class SomeButton: UIButton {
    public var fillPct: CGFloat = 0 {
        didSet {
            setNeedsLayout()
        }
    }
    public var highlightColor: UIColor = .green
    
    private let highlighterLayer = CALayer()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    private func commonInit() {
        highlighterLayer.borderColor = UIColor.black.cgColor
        layer.addSublayer(highlighterLayer)
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        var r = bounds
        r.size.height *= fillPct
        highlighterLayer.frame = r
        highlighterLayer.position = CGPoint(x: bounds.midX, y: bounds.midY)
        highlighterLayer.borderWidth = 2.0 * fillPct
        highlighterLayer.backgroundColor = highlightColor.withAlphaComponent(fillPct).cgColor
    }
}

和演示 controller - 每次點擊“循環值”按鈕都會循環顯示幾組示例“填充百分比”值：

class HighlightButtonTestVC: UIViewController {
    
    var btns: [SomeButton] = []
    
    var demoVals: [[CGFloat]] = [
        [0.0, 1.0, 0.5],
        [1.0, 0.5, 0.0],
        [0.5, 0.5, 1.0],
    ]
    var valsIdx: Int = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let stackView = UIStackView()
        stackView.backgroundColor = UIColor(red: 0.0, green: 0.4, blue: 0.0, alpha: 1.0)
        stackView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(stackView)
        
        let g = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: g.topAnchor, constant: 40.0),
            stackView.heightAnchor.constraint(equalToConstant: 60.0),
            stackView.centerXAnchor.constraint(equalTo: g.centerXAnchor),
        ])
        
        ["K7s", "Q7s", "J7s"].forEach { str in
            let b = SomeButton()
            b.setTitle(str, for: [])
            b.setTitleColor(.black, for: .normal)
            b.setTitleColor(.lightGray, for: .highlighted)
            stackView.addArrangedSubview(b)
            btns.append(b)
        }
        for i in 0..<3 {
            btns[i].fillPct = demoVals[0][i]
        }
        
        let vBtn = UIButton(type: .system)
        vBtn.setTitle("Cycle Values", for: [])
        vBtn.addTarget(self, action: #selector(cycleVals), for: .touchUpInside)
        vBtn.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(vBtn)
        NSLayoutConstraint.activate([
            vBtn.topAnchor.constraint(equalTo: stackView.bottomAnchor, constant: 20.0),
            vBtn.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 40.0),
            vBtn.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -40.0),
        ])
    }
    
    @objc func cycleVals() {
        valsIdx += 1
        for i in 0..<3 {
            btns[i].fillPct = demoVals[valsIdx % 3][i]
        }
    }

}

結果 - 對於值集：

[0.0, 1.0, 0.5],
[1.0, 0.5, 0.0],
[0.5, 0.5, 1.0],

是：