将顶部边框添加到选定的 TabBar

Posted

技术标签:

【中文标题】将顶部边框添加到选定的 TabBar【英文标题】:Add Top border to selected TabBar 【发布时间】:2020-09-11 14:09:25 【问题描述】:

如何在选定的 TabBar 的顶部添加边框。 下面的方法我用来在底部添加它,但我想要

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)

【问题讨论】:

【参考方案1】:

您可以使用该功能在任何一侧创建边框-

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)

让我知道这是否有用或您需要任何其他帮助。 快乐编码:)

【讨论】:

有什么办法可以给这张图片添加圆角半径吗?【参考方案2】:

导入 UIKit

class MyViewController: UIViewController 

    override func viewDidLoad() 
        super.viewDidLoad()

        tabBarController?.tabBar.addBorder(.top, color: .red, thickness: 2.0)
    
   

extension UITabBar 
    func addBorder(_ edge: UIRectEdge, color: UIColor, thickness: CGFloat) 
        let subview = UIView()
        subview.translatesAutoresizingMaskIntoConstraints = false
        subview.backgroundColor = color
        self.addSubview(subview)
        switch edge 
        case .top, .bottom:
            subview.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 0).isActive = true
            subview.rightAnchor.constraint(equalTo: self.rightAnchor, constant: 0).isActive = true
            subview.heightAnchor.constraint(equalToConstant: thickness).isActive = true
            if edge == .top 
                subview.topAnchor.constraint(equalTo: self.topAnchor, constant: 0).isActive = true
             else 
                subview.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 0).isActive = true
            
        case .left, .right:
            subview.topAnchor.constraint(equalTo: self.topAnchor, constant: 0).isActive = true
            subview.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 0).isActive = true
            subview.widthAnchor.constraint(equalToConstant: thickness).isActive = true
            if edge == .left 
                subview.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 0).isActive = true
             else 
                subview.rightAnchor.constraint(equalTo: self.rightAnchor, constant: 0).isActive = true
            
        default:
            break
        
    

tabBarController?.tabBar.addBorder(.top, color: .orange, thickness: 5.0)

【讨论】:

以上是关于将顶部边框添加到选定的 TabBar的主要内容,如果未能解决你的问题,请参考以下文章

IOS:将viewcontroller添加到ios中的自定义TabBar

将空白选项添加到选择顶部并使其成为 IE 中的选定选项

只使用Quartzcore / layer为UIView添加顶部边框?

有没有一种简单的方法可以在 Android 视图的顶部和底部添加边框?

css Nuvo-Express css用于将边框顶部添加到过程侧边栏。侧栏和顶栏的颜色相似时使用。用高光替换颜色

iOS Swift tabBarItem 与 tabBar 边框相交