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 ，通過放置該代碼，它刪除邊框但它也刪除陰影效果。

我需要像下面的圖片：

沒有邊框，但有陰影效果。

任何幫助將不勝感激。

Answer 1

你需要在你的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
}

結果

Answer 2

所以@Reinier Melian提供的答案對我來說不起作用，但我制作了一個自定義的TabBar控制器，其效果如下：

碼：

class MyCustomTabBarController: UITabBarController {

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

如何使用它：

要使用它，請將標簽欄控制器拖到故事板上，然后通過下拉列表將該標簽欄的類更改為此類。

Answer 3

在iOS 12.1，Swift 4.2上測試

您的.storyboard/.xib文件中添加的UITabBar視圖需要比滾動的內容更低（ Document Outline位置），在我的情況下， Web Report Container是滾動部分，而Tab Bar是UITabBar in底端。 我把它放在文檔大綱的下方，你可以看到這里給它一個較低的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將陰影視覺調整為所需效果。