如何为其中一个UITabBar项添加左右边框?

时间:2022-02-04 07:24:46

If you look at the image below, you'll see two vertical lines -- isolating the middle tab item. (The lines are faint)

如果你看下面的图像,你会看到两条垂直线 - 隔离中间的标签项。 (线条很暗)

In code, how can I create these two lines?

在代码中,我如何创建这两行?

如何为其中一个UITabBar项添加左右边框?

2 个解决方案

#1


1  

You can:
1. add selected Image with lines in .png
2. set background image with lines and change this image depend on selected tab.
3. create your own view, inherited from UIView and add it as subview (in this case you have to implement own switch logic)

您可以:1。使用.png中的行添加所选图像2.使用线条设置背景图像并根据所选选项卡更改此图像。 3.创建自己的视图,继承自UIView并将其添加为子视图(在这种情况下,您必须实现自己的切换逻辑)

#2


0  

 This will help you to add the seperators
//Add seperators Line
        if let items = self.tabBar.items {
            //Get the height of the tab bar
            let height = self.tabBar.bounds.height
            let width = self.tabBar.bounds.width

//Calculate the size of the items
            let numItems = CGFloat(items.count)
            let itemSize = CGSize(
                width: tabBar.frame.width / numItems,
                height: tabBar.frame.height)

            for (index, _) in items.enumerated() {
                //We don't want a separator on the left of the first item.
                if index > 0 {

//Xposition of the item
                    let xPosition = itemSize.width * CGFloat(index)

                    let separator = UIView(frame: CGRect(
                        x: xPosition, y: 0, width: 3.5, height: height))
                    separator.backgroundColor = UIColor.white
                    tabBar.insertSubview(separator, at: 1)
               }
           }

extension UIImage {

扩展UIImage {

class func imageWithColor(color: UIColor, size: CGSize) -> UIImage {
    let rect: CGRect = CGRectMake(0, 0, size.width, size.height)
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    color.setFill()
    UIRectFill(rect)
    let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
}

}

#1


1  

You can:
1. add selected Image with lines in .png
2. set background image with lines and change this image depend on selected tab.
3. create your own view, inherited from UIView and add it as subview (in this case you have to implement own switch logic)

您可以:1。使用.png中的行添加所选图像2.使用线条设置背景图像并根据所选选项卡更改此图像。 3.创建自己的视图,继承自UIView并将其添加为子视图(在这种情况下,您必须实现自己的切换逻辑)

#2


0  

 This will help you to add the seperators
//Add seperators Line
        if let items = self.tabBar.items {
            //Get the height of the tab bar
            let height = self.tabBar.bounds.height
            let width = self.tabBar.bounds.width

//Calculate the size of the items
            let numItems = CGFloat(items.count)
            let itemSize = CGSize(
                width: tabBar.frame.width / numItems,
                height: tabBar.frame.height)

            for (index, _) in items.enumerated() {
                //We don't want a separator on the left of the first item.
                if index > 0 {

//Xposition of the item
                    let xPosition = itemSize.width * CGFloat(index)

                    let separator = UIView(frame: CGRect(
                        x: xPosition, y: 0, width: 3.5, height: height))
                    separator.backgroundColor = UIColor.white
                    tabBar.insertSubview(separator, at: 1)
               }
           }

extension UIImage {

扩展UIImage {

class func imageWithColor(color: UIColor, size: CGSize) -> UIImage {
    let rect: CGRect = CGRectMake(0, 0, size.width, size.height)
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    color.setFill()
    UIRectFill(rect)
    let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
}

}