如何为UITabBar设置圆角和阴影？

Question

我想为UITabBar设置拐角半径和阴影，但是我遇到了问题。 这是我的代码

tabBar.barTintColor = .white
tabBar.isTranslucent = false

tabBar.layer.shadowOffset = CGSize(width: 0, height: 5)
tabBar.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1).cgColor
tabBar.layer.shadowOpacity = 1;
tabBar.layer.shadowRadius = 25;

tabBar.layer.masksToBounds = false
tabBar.isTranslucent = true
tabBar.barStyle = .blackOpaque
tabBar.layer.cornerRadius = 13
tabBar.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]

如果我将tabBar.layer.masksToBounds = false更改为= true->将显示圆角半径，但不会显示阴影。

Answer 1

快捷键5

尝试一下。我是通过在选项卡栏后面放置一个自定义视图来实现的。这适用于 Swift 5

import UIKit

class MainTabBarController:
    UITabBarController,
    UITabBarControllerDelegate {

    let customTabBarView: UIView = {

        let view = UIView(frame: .zero)

        view.backgroundColor = .white
        view.layer.cornerRadius = 20
        view.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
        view.clipsToBounds = true

        view.layer.masksToBounds = false
        view.layer.shadowColor = UIColor.black.cgColor
        view.layer.shadowOffset = CGSize(width: 0, height: -8.0)
        view.layer.shadowOpacity = 0.12
        view.layer.shadowRadius = 10.0
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        self.delegate = self

        addCustomTabBarView()
        hideTabBarBorder()
        setupTabBar()
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        customTabBarView.frame = tabBar.frame
    }

    override func viewDidAppear(_ animated: Bool) {
        var newSafeArea = UIEdgeInsets()

        newSafeArea.bottom += customTabBarView.bounds.size.height
        self.children.forEach({$0.additionalSafeAreaInsets = newSafeArea})
    }

    private func addCustomTabBarView() {
        customTabBarView.frame = tabBar.frame
        view.addSubview(customTabBarView)
        view.bringSubviewToFront(self.tabBar)
    }

    func hideTabBarBorder()  {
        let tabBar = self.tabBar
        tabBar.backgroundImage = UIImage.from(color: .clear)
        tabBar.shadowImage = UIImage()
        tabBar.clipsToBounds = true
    }

    func setupTabBar() {
        self.setViewControllers([tab1, tab2, tab3], animated: false)
        self.viewDidLayoutSubviews()
    }
}

extension UIImage {
    static func from(color: UIColor) -> UIImage {
        let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()
        context!.setFillColor(color.cgColor)
        context!.fill(rect)
        let img = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return img!
    }
}

Answer 2

我想出了一种方法，可以为标签栏添加一个单独的阴影层：

    tabBar.clipsToBounds = true
    tabBar.layer.cornerRadius = Siz_TabBar_CornerRadius

    shadowLayer = CALayer()
    shadowLayer.frame = tabBar.frame
    shadowLayer.backgroundColor = UIColor.clear.cgColor
    shadowLayer.cornerRadius = yourTabBarCornerRadius
    shadowLayer.shadowColor = yourShadowColor.cgColor
    shadowLayer.shadowRadius = yourShadowRadius
    shadowLayer.shadowOpacity = 1.0
    shadowLayer.maskedCorners = [.layerMinXMaxYCorner, .layerMaxXMaxYCorner]

    // This is important so the shadow doesn't lag content
    // which is scrolling underneath it.  You should tell the tab
    // bar layer to rasterize as well, the rounded corners can cause
    // performance issues with animated content underneath them.
    shadowLayer.shouldRasterize = true
    shadowLayer.rasterizationScale = UIScreen.main.scale

    // The shadow path is needed because a shadow won't
    // display for a layer with a clear backgroundColor
    let shadowPath = UIBezierPath(roundedRect: shadowLayer.bounds, byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: yourTabBarCornerRadius, height: yourTabBarCornerRadius))

    // The mask makes it so that the shadow doesn't draw on
    // top of the tab bar, filling in the whole layer
    let maskLayer = CAShapeLayer()
    let maskPath = CGMutablePath()

    // This path goes around the outside of the possible shadow radius, so that the
    // shadow is between this path and the tap bar
    maskPath.addRect(CGRect(x: -yourShadowRadius, y: -yourShadowRadius, width: shadowLayer.frame.width + yourShadowRadius, height: shadowLayer.frame.height + yourShadowRadius))

    // The shadow path (shape of the tab bar) is drawn on the inside
    maskPath.addPath(shadowPath.cgPath)
    maskLayer.path = maskPath

    // This makes it so that the only shadow layer content that will
    // be drawn is located in between the two above paths
    maskLayer.fillRule = .evenOdd
    shadowLayer.mask = maskLayer

    // View here is the tab bar controller's view
    view.layer.addSublayer(shadowLayer)

Answer 3

您是正确的，设置masksToBounds = true是允许应用tabBar.layer.cornerRadius值的唯一方法，但是将其设置为true会删除任何阴影！

许多解决方案涉及在选项卡栏后面添加虚拟视图，并对其施加阴影。它可以工作，但是一旦我通过将虚拟视图作为父视图的子视图添加到选项卡栏的后面而起作用，当我尝试通过使用hidesBottomBarWhenPushed = true推动视图控制器来导航到另一个屏幕时，选项卡栏被隐藏但虚拟视图仍保留在屏幕上：（

经过2天的反复试验，我找到了一个不需要添加虚拟视图的解决方案，而是添加了一个子层来处理角落并设置阴影。非常简单，不涉及子视图，不需要将masksToBounds设置为true。

受到此答案的启发：https://stackoverflow.com/a/63793084/1241783

我代替了UITabBar的子类，而是创建了UITabBarController的子类，并添加了以下功能：

SELECT st1.name student, su2.name subject
FROM students st1 
JOIN student_subjects ss1 ON st1.id = ss1.studentId
JOIN subjects su1 ON su1.id = ss1.subjectId
JOIN student_subjects ss2 ON ss2.studentId = ss1.studentId
JOIN subjects su2 ON su2.id = ss2.subjectId
WHERE su1.name = @subj

在覆盖viewDidLayoutSubviews的情况下调用此函数：

private func addShape() {
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = UIBezierPath(
        roundedRect: tabBar.bounds,
        byRoundingCorners: [.topLeft, .topRight],
        cornerRadii: CGSize(width: tabBarCornerRadius, height: 0.0)).cgPath
    shapeLayer.fillColor = UIColor.white.cgColor
    shapeLayer.shadowPath =  UIBezierPath(roundedRect: tabBar.bounds, cornerRadius: tabBarCornerRadius).cgPath
    shapeLayer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.2).cgColor
    shapeLayer.shadowOpacity = 1
    shapeLayer.shadowRadius = 16
    shapeLayer.shadowOffset = CGSize(width: 0, height: -6)

    // To improve rounded corner and shadow performance tremendously
    shapeLayer.shouldRasterize = true
    shapeLayer.rasterizationScale = UIScreen.main.scale

    if let oldShapeLayer = self.shapeLayer {
        tabBar.layer.replaceSublayer(oldShapeLayer, with: shapeLayer)
    } else {
        tabBar.layer.insertSublayer(shapeLayer, at: 0)
    }
    self.shapeLayer = shapeLayer
}

最后，难题的最后一部分，标签栏会自动创建一个没有圆角的背景视图，因此我们需要通过在viewDidLoad中添加这两行来使背景视图透明：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    addShape()
}