我是 iOS 开发的新手，在为类(class)构建应用程序时遇到了一些麻烦。

我创建了一个分段控件，它的初始化函数(如下所示)在包含分段控件的 View Controller 类中被调用。我能够从分段控件类中删除分段控件的所有边框和分隔线，如下所示:

import Foundation
import UIKit

class CashSegmentedControl: UISegmentedControl{

func initUI(){
    removeBorders()
}

func removeBorders(){
    self.tintColor = UIColor.clear

}

我希望它在选择段时在每个段下都有一条线(类似于 instagram)

我进行了大量搜索并在 StackOverflow 上找到了一些帖子，但它们似乎是针对旧版本的 Swift 的。我真的很感激在这件事上的任何帮助，如果有更好的自定义边框的解决方案(除了我所做的)，我很乐意了解更多!

非常感谢:)

最佳答案

在单独的 swift 文件中添加以下代码(command+N -> New File):

extension UISegmentedControl{
    func removeBorder(){
        let backgroundImage = UIImage.getColoredRectImageWith(color: UIColor.white.cgColor, andSize: self.bounds.size)
        self.setBackgroundImage(backgroundImage, for: .normal, barMetrics: .default)
        self.setBackgroundImage(backgroundImage, for: .selected, barMetrics: .default)
        self.setBackgroundImage(backgroundImage, for: .highlighted, barMetrics: .default)

        let deviderImage = UIImage.getColoredRectImageWith(color: UIColor.white.cgColor, andSize: CGSize(width: 1.0, height: self.bounds.size.height))
        self.setDividerImage(deviderImage, forLeftSegmentState: .selected, rightSegmentState: .normal, barMetrics: .default)
        self.setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.gray], for: .normal)
        self.setTitleTextAttributes([NSForegroundColorAttributeName: UIColor(red: 67/255, green: 129/255, blue: 244/255, alpha: 1.0)], for: .selected)
    }

    func addUnderlineForSelectedSegment(){
        removeBorder()
        let underlineWidth: CGFloat = self.bounds.size.width / CGFloat(self.numberOfSegments)
        let underlineHeight: CGFloat = 2.0
        let underlineXPosition = CGFloat(selectedSegmentIndex * Int(underlineWidth))
        let underLineYPosition = self.bounds.size.height - 1.0
        let underlineFrame = CGRect(x: underlineXPosition, y: underLineYPosition, width: underlineWidth, height: underlineHeight)
        let underline = UIView(frame: underlineFrame)
        underline.backgroundColor = UIColor(red: 67/255, green: 129/255, blue: 244/255, alpha: 1.0)
        underline.tag = 1
        self.addSubview(underline)
    }

    func changeUnderlinePosition(){
        guard let underline = self.viewWithTag(1) else {return}
        let underlineFinalXPosition = (self.bounds.width / CGFloat(self.numberOfSegments)) * CGFloat(selectedSegmentIndex)
        UIView.animate(withDuration: 0.1, animations: {
            underline.frame.origin.x = underlineFinalXPosition
        })
    }
}

extension UIImage{

    class func getColoredRectImageWith(color: CGColor, andSize size: CGSize) -> UIImage{
        UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
        let graphicsContext = UIGraphicsGetCurrentContext()
        graphicsContext?.setFillColor(color)
        let rectangle = CGRect(x: 0.0, y: 0.0, width: size.width, height: size.height)
        graphicsContext?.fill(rectangle)
        let rectangleImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return rectangleImage!
    }
}

然后从您的 viewDidLoad() 方法调用 segmentedControl.addUnderlineForSelectedSegment() 之后，并为分段控件创建一个 @IBAction 方法，例如所以:

@IBAction func segmentedControlDidChange(_ sender: UISegmentedControl){
        segmentedControl.changeUnderlinePosition()
    }

然后从此方法中调用 segmentedControl.changeUnderlinePosition()。

不要忘记将 Storyboard中的分段控件连接到您刚刚创建的 @IBAction 方法。

非常重要:不要忘记在 Storyboard中使用自动布局来确定分段控件的大小和位置。

这是结果:

如有任何其他问题，请随时提出:)

关于ios - 如何在 UISegmentedControl 中只显示所选项目的底部边框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42755590/