Search code examples
iosswiftuitabbar

Add Top border to selected TabBar


How to add border to the TOP of selected TabBar. Below method I have used to add it at bottom but I want

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

tabBar.selectionIndicatorImage = UIImage().createSelectionIndicator(color: BLUE, size: CGSize(width: tabBar.frame.width/CGFloat(tabBar.items!.count), height:  tabBar.frame.height), lineWidth: 2.0)

Solution

  • You can use the function to create borders on any side -

    enum Side: String {
        case top, left, right, bottom
    }
    
    extension UIImage {
        func createSelectionIndicator(color: UIColor, size: CGSize, lineThickness: CGFloat, side: Side) -> UIImage {
            var xPosition = 0.0
            var yPosition = 0.0
            var imgWidth = 2.0
            var imgHeight = 2.0
            switch side {
                case .top:
                    xPosition = 0.0
                    yPosition = 0.0
                    imgWidth = size.width
                    imgHeight = lineThickness
                case .bottom:
                    xPosition = 0.0
                    yPosition = size.height - lineThickness
                    imgWidth = size.width
                    imgHeight = lineThickness
                case .left:
                    xPosition = 0.0
                    yPosition = 0.0
                    imgWidth = lineThickness
                    imgHeight = size.height
                case .right:
                    xPosition = size.width - lineThickness
                    yPosition = 0.0
                    imgWidth = lineThickness
                    imgHeight = size.height
            }
            UIGraphicsBeginImageContextWithOptions(size, false, 0)
            color.setFill()
            UIRectFill(CGRect(x: xPosition, y: yPosition, width: imgWidth, height: imgHeight))
            let image = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            return image!
        }
    }
    
    tabBar.selectionIndicatorImage = UIImage().createSelectionIndicator(color: BLUE, size: CGSize(width: tabBar.frame.width/CGFloat(tabBar.items!.count), height:  tabBar.frame.height), lineThickness: 2.0, side: .top)
    

    Let me know if this was useful or you need any other help. Happy Coding :)