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

Question

我想像这张图片一样自定义UISegmentedControl：

Answer 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!
}

Answer 2

我认为你必须为此制作一个自定义菜单，以下是一些可以帮助你的想法

• 首先，您可以制作收藏视图。
• 在viewcontroller的视图中添加此collectionview作为子视图
• 制作自定义集合视图单元格
• 在单元格内添加textlabel
• 在这种特定情况下，细胞的宽度为1/4 collectionview框架的宽度
• 现在为此sliderBar添加一个视图作为单元格内的子视图，设置 constraitns将它放在单元格的底部

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

Answer 3

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

Answer 4

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