透明 UITabBar 上的黑色背景

Question

我正在尝试为我的 UITabViewController 制作一个模糊背景 UITabBar，我的想法是让它变得模糊和透明，以便可以看到下面的视图滚动。

不幸的是，我这辈子都无法让标签栏变得透明。无论我做什么，标签栏总是有一些黑色背景，阻止底层视图控制器显示出来。

如果我将 UITabBar 的 alpha 更改为较低的值，我可以看到 tableview 确实在它后面，但是您可以看到 UITabBar 有某种背景正在阻止 tableview 完全显示（我不想禁止按钮项目不可见，只是标签栏背景）。

怎么会这样？

在自定义标签栏的视图中加载我有：

self.tabBar.translucent = true
self.tabBar.alpha = 0.3
self.tabBar.backgroundColor = UIColor.clearColor().colorWithAlphaComponent(0.0)
self.tabBar.layer.backgroundColor = UIColor.clearColor().colorWithAlphaComponent(0.0).CGColor
self.tabBar.backgroundImage = nil
self.tabBar.shadowImage = nil

在 AppDelegate 中我有：

UITabBar.appearance().barTintColor = UIColor.clearColor()
UITabBar.appearance().tintColor = kColorAccent
UITabBar.appearance().translucent = true
UITabBar.appearance().translucent = true
UITabBar.appearance().backgroundColor = UIColor.clearColor()
UITabBar.appearance().backgroundImage = nil
UITabBar.appearance().layer.backgroundColor = UIColor.clearColor().CGColor
UITabBar.appearance().shadowImage = nil

...是的，这太过分了，但我想尝试一切。

有什么想法吗？

Answer 1

使 UITabBar 透明

为其 backgroundImage 分配清晰图像。您可以使用 1x1 clear.png，或以编程方式创建一个：

self.backgroundImage = UIImage.imageWithColor(UIColor.clearColor())

这将使 UITabBar 透明：

添加模糊效果

插入一个UIVisualEffectView作为最后面的子视图。

let frost = UIVisualEffectView(effect: UIBlurEffect(style: .Light))
frost.frame = self.bounds
self.insertSubview(frost, atIndex: 0)

这会插入一个UIBlurEffect（霜）：

例子

将选项卡栏控制器 UITabBar 的 自定义 Class 设置为 FrostyTabBar。
您有几个选项可以提供 clearColor 图片。您可以创建 alpha 为 0 的 clear.png 图像。程序化的优雅解决方案是 described here.
如果使用 clear.png，请将其分配给 Attribute Inspector[中的 Background Image:
在 Interface Builder 中，选择样式：默认 & 半透明.
一旦你用 UIVisualEffectView 控制了背景模糊，你就可以反过来提供你想要的任何 UIVisualEffect。

整个FrostyTabBarclass看起来像这样：

import UIKit

class FrostyTabBar: UITabBar {
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        let frost = UIVisualEffectView(effect: UIBlurEffect(style: .light))
        frost.frame = bounds
        frost.autoresizingMask = .flexibleWidth
        insertSubview(frost, at: 0)
    }
}

► 在 GitHub and additional details including a 1x1 clear.png on Swift Recipes 上找到此解决方案。

Answer 2

我找到了一个完美的解决方案，你只需要继承 UITabBar 然后执行以下操作来清理那些烦人的视图

class MainTabBar: UITabBar {
    var cleanDone = false

    override func layoutSubviews() {
        super.layoutSubviews()
        self.deleteUnusedViews()
    }

    func deleteUnusedViews() {
        if !self.cleanDone {
            var removeCount = 0
            for (_, eachView) in (self.subviews.enumerate()) {
                if NSStringFromClass(eachView.classForCoder).rangeOfString("_UITabBarBackgroundView") != nil {
                    eachView.removeFromSuperview()
                    removeCount += 1
                }
                if NSStringFromClass(eachView.classForCoder).rangeOfString("UIImageView") != nil {
                    eachView.removeFromSuperview()
                    removeCount += 1
                }
                if removeCount == 2 {
                    self.cleanDone = true
                    break
                }
            }
        }
    }
}

Answer 3

唯一对我有用的解决方案是：

UITabBar.appearance().shadowImage = UIImage()
UITabBar.appearance().backgroundImage = UIImage()

并设置：（您也可以在故事板中执行此操作）

UITabBar.appearance().barTintColor = UIColor.clear

但我必须在情节提要中设置的是：

标签栏：半透明 -> 真

透明 UITabBar 上的黑色背景

Black background on transparent UITabBar

uitabbarcontroller

ios

ios9