如何使 UITabbar 背景颜色清晰？

Question

我需要设计一个这样的标签栏：

好吧，对于这个设计，我使用自定义类来获取形状和带阴影的弧线。对于中心按钮，我以编程方式在中间添加一个按钮。这是用于 Tabbar 形状的类：

@IBDesignable
class DesignerTab: UITabBar {

private var shapeLayer: CALayer?
private func addShape() {
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = createPath()
    shapeLayer.strokeColor = UIColor.lightGray.cgColor
    shapeLayer.fillColor = UIColor.white.cgColor
    shapeLayer.lineWidth = 1.0
    
    //The below 4 lines are for shadow above the bar. you can skip them if you do not want a shadow
    shapeLayer.shadowOffset = CGSize(width:0, height:0)
    shapeLayer.shadowRadius = 10
    shapeLayer.shadowColor = UIColor.gray.cgColor
    shapeLayer.shadowOpacity = 0.3

    if let oldShapeLayer = self.shapeLayer {
        self.layer.replaceSublayer(oldShapeLayer, with: shapeLayer)
    } else {
        self.layer.insertSublayer(shapeLayer, at: 0)
    }
    self.shapeLayer = shapeLayer
}
override func draw(_ rect: CGRect) {
    self.isTranslucent = true
    self.backgroundColor = .clear
    self.tintColor = .clear
    
    self.addShape()
}
func createPath() -> CGPath {
    let height: CGFloat = 27 
    let path = UIBezierPath()
    let centerWidth = self.frame.width 
    path.move(to: CGPoint(x: 0, y: 0)) 
 path.addLine(to: CGPoint(x: (centerWidth - (height * 2)+10), y: 0))
    
    path.addCurve(to: CGPoint(x: centerWidth, y: height),
    controlPoint1: CGPoint(x: (centerWidth - 30), y: 0), controlPoint2: CGPoint(x: centerWidth - 25, y: height-0))

    path.addCurve(to: CGPoint(x: (centerWidth + (height * 2)-10), y: 0),
    controlPoint1: CGPoint(x: centerWidth + 25, y: height-0), controlPoint2: CGPoint(x: (centerWidth + 30), y: 0))

    path.addLine(to: CGPoint(x: self.frame.width, y: 0))
    path.addLine(to: CGPoint(x: self.frame.width, y: self.frame.height))
    path.addLine(to: CGPoint(x: 0, y: self.frame.height))
    path.close()

    return path.cgPath
}
override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
    guard !clipsToBounds && !isHidden && alpha > 0 else { return nil }
    for member in subviews.reversed() {
        let subPoint = member.convert(point, from: self)
        guard let result = member.hitTest(subPoint, with: event) else { continue }
        return result
    }
    return nil
}
}

问题是我希望中心按钮的背景清晰，背景中不应该显示任何标签栏。这是我需要的：

这是我得到的：

我们可以清楚地看到背景中有白色。为了解决它，我尝试了：

UITabBar.appearance().isTranslucent = true
    UITabBar.appearance().backgroundColor = .clear
    UITabBar.appearance().tintColor = .clear
    
    self.tabBarController?.tabBar.backgroundColor = .clear
    self.tabBarController?.tabBar.tintColor = .clear
    
    self.tabBar.backgroundColor = .clear
    self.tabBar.tintColor = .clear

但这对我不起作用。有人请告诉我如何让这个标签栏背景清晰吗？ 谢谢。

在调试器中查看层次结构：

Answer 1

白色背景是由tabBar 的backgroundImage 引起的。我们需要将其设置为空图像以使tabBar 透明。此外，您可能希望将shadowImage 也设置为空，否则您还会看到方形边框

self.tabBarController?.tabBar.backgroundImage = UIImage()
self.tabBarController?.tabBar.shadowImage = UIImage()

通过这两个更改并使用您创建的ShapeLayer，我可以获得所需的效果。请参考下图