Question

我有自定义视图，我将其用作加载栏。它有一个底层，不透明度为0.1，顶层有不透明度。

以下是它的设置方式：

override init(frame: CGRect) {
        super.init(frame: frame)
        configure()
    }

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

    func configure() {
        animation.delegate = self
        bottomProgressBar.strokeColor = UIColor.white.cgColor
        bottomProgressBar.opacity = 0.1
        bottomProgressBar.lineWidth = self.frame.height
        bottomProgressBar.strokeStart = 0
        bottomProgressBar.strokeEnd = 1
        self.layer.addSublayer(bottomProgressBar)

        topProgressBar.strokeColor = UIColor.white.cgColor
        topProgressBar.lineWidth = self.frame.height
        topProgressBar.strokeStart = 0
        topProgressBar.strokeEnd = 1
        self.layer.addSublayer(topProgressBar)
        animate(fromValue: 0, toValue: 0)
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: self.frame.width, y: 0))

        bottomProgressBar.lineWidth = self.frame.height // Update lineWidth
        topProgressBar.lineWidth = self.frame.height    // Update lineWidth

        bottomProgressBar.path = path.cgPath
        topProgressBar.path = path.cgPath

        self.clipsToBounds = true
        self.layer.cornerRadius = 4
    }

现在我还想应用一个角半径，所以我在layoutSubviews的底部添加了代码：

self.clipsToBounds = true
self.layer.cornerRadius = 4

这仅适用于左上角和右上角的角半径，就是这样。我无法理解为什么。

我还尝试在configure和bottomProgressBar图层的topProgressBar方法中设置它，但根本不起作用。

有人可以指出问题在这里吗？

编辑：

以下是完整的类代码：

class ProgressBar: UIView {

    var bottomProgressBar = CAShapeLayer()
    var topProgressBar = CAShapeLayer()

    override init(frame: CGRect) {
        super.init(frame: frame)
        configure()
    }

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

    func configure() {
        bottomProgressBar.strokeColor = UIColor.white.cgColor
        bottomProgressBar.opacity = 0.1
        bottomProgressBar.lineWidth = self.frame.height
        bottomProgressBar.strokeStart = 0
        bottomProgressBar.strokeEnd = 1
        self.layer.addSublayer(bottomProgressBar)

        topProgressBar.strokeColor = UIColor.white.cgColor
        topProgressBar.lineWidth = self.frame.height
        topProgressBar.strokeStart = 0
        topProgressBar.strokeEnd = 1
        self.layer.addSublayer(topProgressBar)

        animate(toValue: 1)
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: self.frame.width, y: 0))

        bottomProgressBar.lineWidth = self.frame.height // Update lineWidth
        topProgressBar.lineWidth = self.frame.height    // Update lineWidth

        bottomProgressBar.path = path.cgPath
        topProgressBar.path = path.cgPath
    }

    func animate(toValue: Double) {
        let animation = CABasicAnimation(keyPath: "strokeEnd")

        animation.duration = 1.0
        animation.fromValue = 0
        animation.toValue = toValue

        topProgressBar.strokeEnd = CGFloat(toValue)
        topProgressBar.animation(forKey: "animate")
    }
}

编辑2：

添加了更多截图，了解正在发生的事情：

这没有应用角半径 - 简单矩形

当我应用角半径时会发生这种情况 - 下半部被切掉（矩形显然是半切）

这就是我想要的 - 简单的矩形，角落半径到所有4个角落：

Answer 1

编辑：在澄清最终目标之后，这是一种更简单的方法。您可以直接在游乐场页面中运行...

import UIKit
import PlaygroundSupport

class ProgressBar: UIView {

    var progressView: UIView = {
        let v = UIView()
        v.backgroundColor = .white
        return v
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        configure()
    }

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

    func configure() {
        backgroundColor = UIColor(white: 1.0, alpha: 0.1)
        layer.cornerRadius = 8.0
        clipsToBounds = true

        progressView.frame = bounds
        progressView.frame.size.width = 0.0
        addSubview(progressView)
    }

    func animate(_ pct: CGFloat) -> Void {
        UIView.animate(withDuration: 1.0, animations: {
            self.progressView.frame.size.width = self.bounds.size.width * pct
        })
    }

}

class MyViewController : UIViewController {

    var theButton: UIButton = {
        let b = UIButton()
        b.setTitle("Tap Me", for: .normal)
        b.translatesAutoresizingMaskIntoConstraints = false
        b.backgroundColor = .red
        return b
    }()

    var myProgressBar = ProgressBar(frame: CGRect(x: 40, y: 300, width: 300, height: 30))

    // on button tap, set the progress bar to 80%
    @objc func didTap(_ sender: Any?) -> Void {
        myProgressBar.animate(0.8)
    }

    override func loadView() {
        let view = UIView()
        self.view = view
        view.backgroundColor = UIColor.purple

        view.addSubview(theButton)
        // constrain button to Top: 32 and centerX
        NSLayoutConstraint.activate([
            theButton.topAnchor.constraint(equalTo: view.topAnchor, constant: 32.0),
            theButton.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0.0),
            ])

        // add an action for the button tap
        theButton.addTarget(self, action: #selector(didTap(_:)), for: .touchUpInside)

        view.addSubview(myProgressBar)

    }

}

// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

点击按钮会将“进度条”设置为从零到80％

结果：

原始回答：

首先：你要添加一条从0,0到width,0的“行”...你将它的lineWidth作为你视图的高度。

这会给你这个结果：

黄色矩形是您的视图，白色矩形是您的“线”。如您所见，该行的中心沿着视图的顶部运行，因此该行的上半部分实际上是外部视图的框架。因此，当您绕视图的角落时，看起来好像只有顶角是圆角的。如果为视图设置背景颜色，您会看到底角也是圆角的，但那里没有“直线”。

如果这是你真正想要的（顶部栏是白色，底部栏是绿色）：

您想要将线宽设置为视图高度的1/2，并将线条中心设置为1/4和3/4：

class ProgressBar: UIView {

    var bottomProgressBar = CAShapeLayer()
    var topProgressBar = CAShapeLayer()

    override init(frame: CGRect) {
        super.init(frame: frame)
        configure()
    }

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

    func configure() {
        bottomProgressBar.strokeColor = UIColor.green.cgColor
        bottomProgressBar.opacity = 1
        bottomProgressBar.lineWidth = self.frame.height
        bottomProgressBar.strokeStart = 0
        bottomProgressBar.strokeEnd = 1
        self.layer.addSublayer(bottomProgressBar)

        topProgressBar.strokeColor = UIColor.white.cgColor
        topProgressBar.lineWidth = self.frame.height
        topProgressBar.strokeStart = 0
        topProgressBar.strokeEnd = 1
        self.layer.addSublayer(topProgressBar)

        //      animate(toValue: 1)
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        var path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: self.frame.height * 0.25))
        path.addLine(to: CGPoint(x: self.frame.width, y: self.frame.height * 0.25))

        topProgressBar.path = path.cgPath

        path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: self.frame.height * 0.75))
        path.addLine(to: CGPoint(x: self.frame.width, y: self.frame.height * 0.75))

        bottomProgressBar.path = path.cgPath

        bottomProgressBar.lineWidth = self.frame.height / 2.0 // Update lineWidth
        topProgressBar.lineWidth = self.frame.height / 2.0    // Update lineWidth

        self.clipsToBounds = true
        self.layer.cornerRadius = 8

    }

    func animate(toValue: Double) {
        let animation = CABasicAnimation(keyPath: "strokeEnd")

        animation.duration = 3.0
        animation.fromValue = 0
        animation.toValue = toValue

        topProgressBar.strokeEnd = CGFloat(toValue)
        topProgressBar.animation(forKey: "animate")
    }
}

当然，如果您想要的只是一个带圆角的矩形，那么您不需要任何子图层......只需创建一个带有白色背景的视图，并设置其图层的角半径。

为什么圆角半径仅应用于自定义视图的左上角和右上角？

1 个答案: