UITabBar边框和阴影问题

Question

我需要在UITabBar中添加阴影效果，以下是我使用的代码：

tabBar.layer.shadowOffset = CGSize(width: 0, height: 0)
tabBar.layer.shadowRadius = 4.0
tabBar.layer.shadowColor = UIColor.gray.cgColor
tabBar.layer.shadowOpacity = 0.6

目前它能很好地工作。

但是，我需要移除UITabBar上面的边框。我通过搜索得到了self.tabBar.clipsToBounds = true代码，使用该代码可以移除边框，但同时也去除了阴影效果。

我需要的效果如下图所示：

没有边框但有阴影效果。

非常感谢任何帮助。

- Abhishek Mitra

---

尝试一下 self.tabBar.layer.maskToBounds = true。 - Devang Tandel

Answer 1

所以@Reinier Melian提供的答案对我无效，但是我创建了一个自定义的TabBar控制器，并使用此效果成功：

已更新为Swift 5，iOS 13，Xcode 11

代码：

class MyCustomTabBarController: UITabBarController, UITabBarControllerDelegate {

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

        //here's the code that creates no border, but has a shadow:

        tabBar.layer.shadowColor = UIColor.lightGray.cgColor
        tabBar.layer.shadowOpacity = 0.5
        tabBar.layer.shadowOffset = CGSize.zero
        tabBar.layer.shadowRadius = 5
        self.tabBar.layer.borderColor = UIColor.clear.cgColor
        self.tabBar.layer.borderWidth = 0
        self.tabBar.clipsToBounds = false
        self.tabBar.backgroundColor = UIColor.white
        UITabBar.appearance().shadowImage = UIImage()
        UITabBar.appearance().backgroundImage = UIImage()
    }
}

如何使用：

要使用它，将标签栏控制器拖到故事板上，然后通过下拉列表将该标签栏的类更改为此类。

- Akash Kundu

Answer 2

您需要在TabBar中添加一个UIView，并将.shadowImage和.backgroundImage设置为UIImage()

代码

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    if let tabBarController = self.window?.rootViewController as? UITabBarController {

        let tabGradientView = UIView(frame: tabBarController.tabBar.bounds)
        tabGradientView.backgroundColor = UIColor.white
        tabGradientView.translatesAutoresizingMaskIntoConstraints = false;


        tabBarController.tabBar.addSubview(tabGradientView)
        tabBarController.tabBar.sendSubview(toBack: tabGradientView)
        tabGradientView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

        tabGradientView.layer.shadowOffset = CGSize(width: 0, height: 0)
        tabGradientView.layer.shadowRadius = 4.0
        tabGradientView.layer.shadowColor = UIColor.gray.cgColor
        tabGradientView.layer.shadowOpacity = 0.6
        tabBarController.tabBar.clipsToBounds = false
        tabBarController.tabBar.backgroundImage = UIImage()
        tabBarController.tabBar.shadowImage = UIImage()
    }
    // Override point for customization after application launch.
    return true
}

结果

- Reinier Melian

---

你能否发布你当前的代码并添加这一行？@AbhishekMitra 我在一个项目中使用了这一行并且它有效。 - Reinier Melian

@AbhishekMitra，请查看我的更新答案并告诉我。 - Reinier Melian

@AbhishekMitra 如果tabGradientView.alpha不是1，那么由于选项卡透明度问题，您将会遇到视觉问题。 - Reinier Melian

谢谢，我已经修改了.. :) - Abhishek Mitra

上帝保佑，我找了好几个小时才找到这个解决方案。 - Markon

Answer 3

已在iOS 12.1，Swift 4.2上进行了测试

您在.storyboard/.xib文件中添加的UITabBar视图需要比将要滚动的内容更低（在文档大纲中的位置），在我的情况下，Web Report Container是滚动部分，而Tab Bar是底部的UITabBar。我将其放置在文档大纲中更低的位置，如您在此处所见，以使其具有较低的z-index：

那么在您的ViewController.swift文件中，您可以在viewDidLoad中设置类似于以下示例的设置：

// Remove default line
tabBar.shadowImage = UIImage()
tabBar.backgroundImage = UIImage()
tabBar.backgroundColor = UIColor.white

// Add only shadow 
tabBar.layer.shadowOffset = CGSize(width: 0, height: 0)
tabBar.layer.shadowRadius = 8
tabBar.layer.shadowColor = UIColor.black.cgColor
tabBar.layer.shadowOpacity = 0.2

您可以通过调整shadowOpacity和shadowRadius来使阴影效果达到所需的视觉效果。

- denis_lor