以编程方式自定义UITabBar不规则形状

Question

我需要创建自定义tabBar不规则形状编程。我发现了很多决策，但它们都与Interface Builder相连。代码在下面。自定义tabBar的所有方法都不在调试时调用。

final class TabBar: UITabBarController {

    var customTabBar = CustomizedTabBar()
    override var tabBar: UITabBar {
        return customTabBar
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .naviBarBlack
        UITabBar.appearance().barTintColor = .naviBarBlack
        UITabBar.appearance().clipsToBounds = false
        tabBar.tintColor = .white
        tabBar.itemPositioning = .centered
        
        setupVCs()
    }
    
    func setupVCs() {
        guard let homeUnselected = UIImage(named: "home-unselected"),
        let homeSelected = UIImage(named: "home-selected"),
        let likeUnselected = UIImage(named: "like-unselected"),
        let likeSelected = UIImage(named:"like-selected") else {return}
        
        self.viewControllers = [
            
            createNavController(for: MainScreenViewController(),
                                image: homeUnselected,
                                selected: homeSelected),
            createNavController(for: UIViewController(),
                                image: likeUnselected,
                                selected: likeSelected)
        ]
    }
    
    private func createNavController(for rootViewController: UIViewController,
                                     image: UIImage,
                                     selected: UIImage) -> UIViewController {
        let navController = UINavigationController(rootViewController: rootViewController)
        navController.tabBarItem.image = image
        navController.tabBarItem.selectedImage = selected
        return navController
    }
}

class CustomizedTabBar: 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

        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.addShape()
    }

    func createPath() -> CGPath {

        let height: CGFloat = 37.0
        let path = UIBezierPath()
        let centerWidth = self.frame.width / 2

        path.move(to: CGPoint(x: 0, y: 0)) // start top left
        path.addLine(to: CGPoint(x: (centerWidth - height * 2), y: 0)) // the beginning of the trough

        // first curve down
        path.addCurve(to: CGPoint(x: centerWidth, y: height),
                      controlPoint1: CGPoint(x: (centerWidth - 30), y: 0), controlPoint2: CGPoint(x: centerWidth - 35, y: height))
        // second curve up
        path.addCurve(to: CGPoint(x: (centerWidth + height * 2), y: 0),
                      controlPoint1: CGPoint(x: centerWidth + 35, y: height), controlPoint2: CGPoint(x: (centerWidth + 30), y: 0))

        // complete the rect
        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 point(inside point: CGPoint, with event: UIEvent?) -> Bool {
        let buttonRadius: CGFloat = 35
        return abs(self.center.x - point.x) > buttonRadius || abs(point.y) > buttonRadius
    }

    func createPathCircle() -> CGPath {

        let radius: CGFloat = 37.0
        let path = UIBezierPath()
        let centerWidth = self.frame.width / 2

        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: (centerWidth - radius * 2), y: 0))
        path.addArc(withCenter: CGPoint(x: centerWidth, y: 0), radius: radius, startAngle: CGFloat(180).degreesToRadians, endAngle: CGFloat(0).degreesToRadians, clockwise: false)
        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
    }
}

extension CGFloat {
    var degreesToRadians: CGFloat { return self * .pi / 180 }
    var radiansToDegrees: CGFloat { return self * 180 / .pi }
}

这就是我想要看到的（从https://betterprogramming.pub/draw-a-custom-ios-tabbar-shape-27d298a7f4fa)

而我得到的。

Answer 1

而UITabbarController的Apple文档声明：

您不应试图操作存储在此属性中的UITabBar对象本身。

你可以找到很多很多自定义标签栏的例子。

对于您的特定方法，不要尝试重写var tabbar:

相反，如果您的TabBarController位于情节提要板中，则将其TabBar的自定义类分配给CustomizedTabbar。

或者，如果您是从代码实例化控制器，您可以尝试以下操作：

override func viewDidLoad() {
    super.viewDidLoad()

    let tabBar = { () -> CustomizedTabBar in
        let tabBar = CustomizedTabBar()
        tabBar.delegate = self
        return tabBar
    }()
    self.setValue(tabBar, forKey: "tabBar")
    
    // ... the rest of your viewDidLoad()
}

不过，我建议阅读其他几个示例，并寻找一个通用的（可靠的）方法。