如何自定义 UISegmentedControl 以更改选定的段底部边框？答案

【问题标题】：How to customize UISegmentedControl to change selected segment bottom border?如何自定义 UISegmentedControl 以更改选定的段底部边框？
【发布时间】：2017-07-30 12:18:15
【问题描述】：

我想像这样自定义 UISegmentedControl：

【问题讨论】：

标签： ios swift border customization uisegmentedcontrol

【解决方案1】：

使用扩展名 self.segmentController.customizeAppearance(for: 1)

调用 addBorder 方法并将您的 UISegmentedControl 作为参数传递

    static func addBorder(_ uiSegmentControl: UISegmentedControl){

    var upperBorder: CALayer = CALayer()
    upperBorder.backgroundColor = UIColor.init(red: 255.0, green:255.0, blue: 255.0, alpha: 1.0).cgColor
    upperBorder.frame = CGRect(x: 0, y: Int(ceil(uiSegmentControl.subviews[0].bounds.height))-1, width: Int(floor(uiSegmentControl.bounds.width)), height: 1)
    uiSegmentControl.layer.addSublayer(upperBorder)

    for i in 0..<uiSegmentControl.subviews.count {

        if i == uiSegmentControl.selectedSegmentIndex {
            upperBorder = CALayer()
            upperBorder.backgroundColor = UIColor.init(red: 215/255.0, green: 0.0, blue: 30/255.0, alpha: 1.0).cgColor
            upperBorder.frame = CGRect(x: i*Int(ceil(uiSegmentControl.subviews[i].bounds.width)), y: Int(ceil(uiSegmentControl.subviews[i].bounds.height))-1, width: Int(floor(uiSegmentControl.subviews[i].bounds.width)), height: 1)
            uiSegmentControl.layer.addSublayer(upperBorder)
        }
    }

}

extension UISegmentedControl {   
func customizeAppearance(for height: Int) {
    setDividerImage(UIImage().colored(with: .clear, size: CGSize(width: 1, height: height)), forLeftSegmentState: .normal, rightSegmentState: .normal, barMetrics: .default)
    setBackgroundImage(UIImage().colored(with: .clear, size: CGSize(width: 1, height: height)), for: .normal, barMetrics: .default)
  }
}
extension UIImage {
    func colored(with color: UIColor, size: CGSize) -> UIImage {
    UIGraphicsBeginImageContext(size)
    let context = UIGraphicsGetCurrentContext()
    context!.setFillColor(color.cgColor);
    let rect = CGRect(origin: CGPoint(x: 0, y: 0), size: size)
    context!.fill(rect);
    let image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image!
}

【讨论】：

可以，但是如何去掉 UISegmentedControl 的边框呢？
使用扩展并调用它。我已经编辑了答案。

【解决方案2】：

我认为您必须为此制作自定义菜单，这里有一些可以帮助您的想法

首先你可以创建一个collectionview。
将此集合视图添加为视图控制器视图中的子视图
制作自定义 collectionview 单元格
在单元格内添加文本标签
在这种特定情况下，单元格的宽度将是单元格宽度的 1/4 collectionview 框架的宽度
现在为这个滑块添加一个视图作为单元格内的子视图，设置将其放置在单元格底部的约束

希望这些想法可以帮助您入门..

【讨论】：

我对此有一些简单的想法，但我想要一个最佳解决方案。

【解决方案3】：

所以更简单的方法是在其中添加一个自定义视图，添加四个按钮，然后选择所有按钮并单击 StackView。使用 Stackview，您不必处理约束，只需将约束固定在 Stackview 上。现在关于下面按钮上的边界线。您可以为所有按钮添加所有边框线，为未选择的按钮隐藏，或者您只能为选定的按钮添加一个边框，并根据使用动画或不使用动画的按钮选择来更改其 x 位置。

【讨论】：

【解决方案4】：

系统 UIsegumentcontrol 无法实现你说的。您可以使用 uiscrollview 和 uibutton 或集合视图。

【讨论】：