如何绘制矩形并根据电池级别填充颜色

Question

我想在Swift3中绘制矩形并根据手机的电池电量进行绘制，例如，如果电池电量为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

这是一个初始点。

在游乐场中的代码粘贴并点击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)