如何绘制矩形并根据电池电量为其填充颜色

Question

我想在 Swift3 中绘制一个矩形，并根据 phone 的电池电量进行绘制，例如，如果电池电量为 100%，则必须完全填充矩形。如果电池电量为 67%，则填充应为该矩形宽度的 67%。

我对 CGRect 库和绘图还很陌生。

这是我目前的尝试：

let layer = CAShapeLayer()

layer.path = UIBezierPath(roundedRect: CGRect(x: battery.frame.origin.x,
                                              y: battery.frame.origin.y,
                                              width: (battery.image?.size.width)!,
                                              height: (battery.image?.size.height)!),
                                              cornerRadius: 0).cgPath
layer.fillColor = UIColor.red.cgColor
view.layer.addSublayer(layer)

电池图标基本上已经在页面上，只有边框，例如以下形状：

------ | | ------

Answer 1

这是一个起点。

将代码粘贴到 Playground 中，然后单击最后一行末尾的 Show Result

class LevelView : UIView {

    init(frame: CGRect, level: CGFloat) {
        super.init(frame: frame)
        self.layer.borderWidth = 1.0
        let levelLayer = CAShapeLayer()
        levelLayer.path = UIBezierPath(roundedRect: CGRect(x: frame.origin.x,
                                                      y: frame.origin.y,
                                                      width: frame.width * level,
                                                      height: frame.height),
                                  cornerRadius: 0).cgPath
        levelLayer.fillColor = UIColor.red.cgColor
        self.layer.addSublayer(levelLayer)

    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("Required, but Will not be called in a Playground")
    }
}


let view = LevelView(frame: CGRect(x: 0, y: 0, width: 64, height: 32), level: 0.75)

如何绘制矩形并根据电池电量为其填充颜色

How to draw a rectangle and fill it with color based on battery level

cashapelayer

ios

cgrect

swift

swift3