如何实现UITabBar背景透明，解决自定义弧形TabBar中间按钮下方留白问题

你遇到的问题由两个原因导致：一是UITabBar默认自带的系统私有背景视图未被完全清空，二是自定义贝塞尔路径的形状错误，将中间空缺区域也纳入了填充范围。按照以下步骤修改即可：

步骤1：清空系统默认背景 #

UITabBar默认自带UIBarBackground私有视图，仅设置backgroundColor = .clear无法完全清除，需要额外清空其背景图与阴影图。在自定义DesignerTab类中添加初始化方法统一配置：

@IBDesignable
class DesignerTab: UITabBar {
    private var shapeLayer: CALayer?

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

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

    private func commonInit() {
        // 清空系统默认背景相关配置
        backgroundImage = UIImage()
        shadowImage = UIImage()
        isTranslucent = true
        backgroundColor = .clear
    }

    // 原有其他方法保留
}

同时删除draw(_ rect: CGRect)方法中重复的属性配置，draw方法仅保留调用addShape()的逻辑即可。

步骤2：修正贝塞尔路径形状 #

你当前的路径将中间区域向下凸出，纳入了填充范围，导致中间显示白色填充。调整路径的y轴方向，让中间区域向上凹陷，不在填充范围内：

func createPath() -> CGPath {
    // 凹陷深度，方向向上超出tabbar顶部
    let depth: CGFloat = 27
    let path = UIBezierPath()
    let centerX = self.frame.width / 2

    path.move(to: CGPoint(x: 0, y: 0))
    // 到中间凹陷左侧起点
    path.addLine(to: CGPoint(x: centerX - depth * 2 + 10, y: 0))

    // 凹陷左侧曲线
    path.addCurve(to: CGPoint(x: centerX, y: -depth),
                  controlPoint1: CGPoint(x: centerX - 30, y: 0),
                  controlPoint2: CGPoint(x: centerX - 25, y: -depth))

    // 凹陷右侧曲线
    path.addCurve(to: CGPoint(x: centerX + depth * 2 - 10, y: 0),
                  controlPoint1: CGPoint(x: centerX + 25, y: -depth),
                  controlPoint2: CGPoint(x: centerX + 30, y: 0))

    // 绘制剩余tabbar区域
    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
}

修改后shapeLayer仅会填充左右两侧的TabBar区域，中间凹陷位置不会被填充，自然呈现透明效果。

额外说明 #

你之前添加的全局UITabBar外观配置、ViewController中的背景色设置代码均可删除，所有配置在自定义TabBar类中处理即可，避免重复配置冲突。

内容的提问来源于stack exchange，提问作者Rj19