我该如何更改UITabBar的顶部边框？

Question

我希望UITabBar的顶部边框宽度为5.0，颜色为黄色。不要有左/底/右边框。

Tab Bar边框应该是平的（没有阴影或其他杂物）。

如何移除阴影（图像）线？

- TIMEX

---

创建自己的 TabBar 子类，并在其上面制作具有顶部边框的覆盖层。 - Blind Ninja

Answer 1

您可以按照以下方式在 FirstViewController.swift 中隐藏顶部边框：

self.tabBarController!.tabBar.layer.borderWidth = 0.50
self.tabBarController!.tabBar.layer.borderColor = UIColor.clear.cgColor
self.tabBarController?.tabBar.clipsToBounds = true

结果将会是：

之前：

之后：

希望对您有所帮助。

编辑：

您可以使用以下方式设置背景图片：

UITabBar.appearance().backgroundImage = UIImage(named: "yourImageWithTopYellowBorder.png")

- Dharmesh Kheni

---

这会隐藏顶部边框，但我想要一个带颜色的边框。 - TIMEX

我认为现在可以设置带有黄色顶部边框的背景图像。 - Dharmesh Kheni

谢谢。图片应该是什么尺寸？ - TIMEX

默认的选项卡尺寸为320x49 - https://www.google.co.in/search?q=tab+bar+size+ios8&ie=utf-8&oe=utf-8&gws_rd=cr&ei=dUDlVdz1GsHuugT-nIGIAg - Dharmesh Kheni

谢谢 - 在iOS9上除了这个之外，没有其他不使用私有API的解决方案可行。 - RunLoop

Answer 2

如果您想完全删除选项卡栏，请将以下代码放入您的AppDelegate中：

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

- James

Answer 3

这就是我完成它的方式。我在UITabBar的顶部添加了一个子视图。

let lineView = UIView(frame: CGRect(x: 0, y: 0, width:tabBarController.tabBar.frame.size.width, height: 1))
lineView.backgroundColor = UIColor.yellow
tabBarController.tabBar.addSubview(lineView)

- Udaya Sri

---

不错的解决方案，尽管描述有误，因为UIView将放置在UITabBar内而不是其顶部。另外，lineView应该是一个“let”，因为它从未被改变过。 - Dante Puglisi

Answer 4

这是适用于我的完整解决方案，由不同的SO答案编译而成（Swift 3）：

// The tabBar top border is done using the `shadowImage` and `backgroundImage` properties.
// We need to override those properties to set the custom top border.
// Setting the `backgroundImage` to an empty image to remove the default border.
tabBar.backgroundImage = UIImage()
// The `shadowImage` property is the one that we will use to set the custom top border.
// We will create the `UIImage` of 1x5 points size filled with the red color and assign it to the `shadowImage` property.
// This image then will get repeated and create the red top border of 5 points width.

// A helper function that creates an image of the given size filled with the given color.
// https://dev59.com/fF8d5IYBdhLWcg3wsT4b#39604716
func getImageWithColor(color: UIColor, size: CGSize) -> UIImage
{
    let rect = CGRect(origin: CGPoint(x: 0, y: 0), size: CGSize(width: size.width, height: size.height))
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    color.setFill()
    UIRectFill(rect)
    let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()
    return image
}

// Setting the `shadowImage` property to the `UIImage` 1x5 red.
tabBar.shadowImage = getImageWithColor(color: UIColor.red, size: CGSize(width: 1.0, height: 5.0))

- iurii

Answer 5

SWIFT 3

我需要边框颜色（以及线条颜色和粗细）与我的应用程序中的其他元素匹配，因此在自定义UITabBarController的viewDidLoad中，以下代码适用于我：

tabBar.layer.borderWidth = 0.3
tabBar.layer.borderColor = UIColor(red:0.0/255.0, green:0.0/255.0, blue:0.0/255.0, alpha:0.2).cgColor
tabBar.clipsToBounds = true

- A.J. Hernandez

---

错误答案，这会在底部、左侧、右侧和顶部添加边框。 - Oscar Falmer

Answer 6

    UIView *borderLine = [[UIView alloc] initWithFrame:CGRectMake(0, 0, screenWidth, 5.0)];
    borderLine.backgroundColor = [UIColor yellowColor];  
    [self.tabBarController.tabBar addSubview:borderLine];

这是我遵循的为UITabBar添加边框的方法。 它运作良好。

- ABHILASH P

Answer 7

Swift 4.2

self.tabBarController!.tabBar.layer.borderWidth = 0.50
self.tabBarController!.tabBar.layer.borderColor = UIColor.clear.cgColor
self.tabBarController?.tabBar.clipsToBounds = true

您可以根据需要更改边框颜色。

- Mashood Murtaza

Answer 8

这是选项卡栏的阴影图像（属性）。尝试以下解决方案并查看。

** Swift **

//Remove shadow image by assigning nil value.
UITabBar.appearance().shadowImage = nil

// or 

// Assing UIImage instance without image reference
UITabBar.appearance().shadowImage = UIImage()

** Objective-C **

//Remove shadow image by assigning nil value.
[[UITabBar appearance] setShadowImage: nil];

// or 

// Assing UIImage instance without image reference
[[UITabBar appearance] setShadowImage: [[UIImage alloc] init]];

这是苹果关于shadowImage的指南。

@available(iOS 6.0, *)
open var shadowImage: UIImage?

默认值为nil。当非nil时，将显示自定义阴影图像，而不是默认的阴影图像。要显示自定义阴影，还必须使用-setBackgroundImage：设置自定义背景图像（如果使用默认背景图像，则将使用默认阴影图像）。

- Krunal

Answer 9

iOS 6引入了一个名为shadowImage的属性，您可以更改此属性以更改顶部边框。例如，您可以使用一个单色的1x1像素图像将顶部边框更改为该颜色：

UITabBar.appearance().shadowImage = UIImage(named: "TabBarShadow")

你还可以将其设置为 UIImage() ，以完全删除顶部边框。

UITabBar.appearance().shadowImage = UIImage()

回答你的问题，关于5像素边框，可以使用1x5像素的图片来实现。图片大小似乎没有限制，它会自动重复（例如，你可以通过使用4x5像素的图片来创建虚线，其中前2x5像素是黑色的，后面2x5像素是透明的）。请注意，如果使用此方法，它将超出UITabBar的范围，因此内容将在图片后面，除非你更改视图范围。

- Ben Dodson

Answer 10

首先创建一个UIImage的扩展，如下所示：

extension UIImage {
    func createSelectionIndicator(color: UIColor, size: CGSize, lineWidth: CGFloat) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        color.setFill()
        UIRectFill(CGRect(x: 0, y: 0, width: size.width, height: lineWidth))
        let image = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return image
    }
}

在您的视图控制器中添加以下代码。

let tabBar = self.tabBarController!.tabBar
tabBar.selectionIndicatorImage = UIImage().createSelectionIndicator(color: UIColor.blue, size: CGSize(width: tabBar.frame.width/CGFloat(tabBar.items!.count), height: tabBar.frame.height)   , lineWidth: 5.0)

- Alisha