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 控制器：

已更新 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()
    }
}

使用方法：

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

Answer 3

测试于 iOS 12.1，Swift 4.2

添加到 .storyboard/.xib 文件中的 UITabBar 视图需要低于（在 Document Outline 中的位置）将滚动的内容，在我的例子中是 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 将阴影视觉效果调整到所需的效果。

UITabBar 边框和阴影问题

UITabBar Border and Shadow issue

uitabbar

ios

swift